APEX/BrowserUse_and_ComputerUse_skills
5
0
Fork 0
Code Issues 6 Pull requests 2 Projects 1 Releases Packages Wiki Activity Actions

Update SKILL.md and related references to implement container binding for labeled shapes and arrows in Excalidraw

Browse source 
- Revised the labeled shape and arrow sections to utilize container binding instead of the deprecated "label" property, ensuring proper text rendering.
- Added warnings about the invalidity of the "label" property and emphasized the use of `boundElements` for text elements.
- Updated examples in dark-mode and general references to reflect the new binding approach, enhancing clarity and usability for users creating diagrams.
This commit is contained in:
teknium1 2026-02-10 20:05:23 -08:00
parent 153cd5bb44
commit 8fb44608bf
3 changed files with 125 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

33
skills/diagramming/excalidraw/references/dark-mode.md
View file

@ -39,17 +39,30 @@ Use the standard Primary Colors from the main color palette -- they're bright en
For subtle shape borders, use `#555555`.
## Example: Dark mode rectangle
## Example: Dark mode labeled rectangle
Use container binding (NOT the `"label"` property, which doesn't work). On dark backgrounds, set text `strokeColor` to `"#e5e5e5"` so it's visible:
```json
{
"type": "rectangle", "id": "r1",
"x": 100, "y": 100, "width": 200, "height": 80,
"backgroundColor": "#1e3a5f", "fillStyle": "solid",
"strokeColor": "#4a9eed", "strokeWidth": 2,
"roundness": { "type": 3 },
"label": { "text": "Dark Node", "fontSize": 20 }
}
[
{
"type": "rectangle", "id": "r1",
"x": 100, "y": 100, "width": 200, "height": 80,
"backgroundColor": "#1e3a5f", "fillStyle": "solid",
"strokeColor": "#4a9eed", "strokeWidth": 2,
"roundness": { "type": 3 },
"boundElements": [{ "id": "t_r1", "type": "text" }]
},
{
"type": "text", "id": "t_r1",
"x": 105, "y": 120, "width": 190, "height": 25,
"text": "Dark Node", "fontSize": 20, "fontFamily": 1,
"strokeColor": "#e5e5e5",
"textAlign": "center", "verticalAlign": "middle",
"containerId": "r1", "originalText": "Dark Node", "autoResize": true
}
]
```
Note: the label text color will default to `#1e1e1e` which is invisible on dark. If using labels on dark-filled shapes, the Excalidraw renderer handles text color automatically based on the background. For standalone text elements, explicitly set `"strokeColor": "#e5e5e5"`.
Note: For standalone text elements on dark backgrounds, always set `"strokeColor": "#e5e5e5"` explicitly. The default `#1e1e1e` is invisible on dark.