Download skills/draw-io/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does draw-io live?
The publisher keeps it at https://github.com/softaworks/agent-toolkit.
Which agents can use draw-io?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
name: draw-io
description: draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
draw.io Diagram Skill
1. Basic Rules
Edit only .drawio files
Do not directly edit .drawio.png files
Use auto-generated .drawio.png by pre-commit hook in slides
2. Font Settings
For diagrams used in Quarto slides,
specify defaultFontFamily in mxGraphModel tag:
<mxGraphModel defaultFontFamily="Noto Sans JP" ...>
Also explicitly specify fontFamily in each text element's style attribute:
style="text;html=1;fontSize=27;fontFamily=Noto Sans JP;"
# Convert all .drawio files
mise exec -- pre-commit run --all-files
# Convert specific .drawio file
mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio
# Run script directly (using skill's script)
bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram1.drawio
Example: If ECR exists, separate Docker icon is unnecessary
6.8. Labels and Headings
Service name only: 1 line
Service name + supplementary info: 2 lines with line break
Redundant notation (e.g., ECR Container Registry): shorten to 1 line
Use <br> tag for line breaks
6.9. Background Frame and Internal Element Placement
When placing elements inside background frames (grouping boxes),
ensure sufficient margin.
YOU MUST: Internal elements must have at least 30px margin from frame boundary
YOU MUST: Account for rounded corners (rounded=1) and stroke width
YOU MUST: Always visually verify PNG output for overflow
Coordinate calculation verification:
Background frame: y=20, height=400 -> range is y=20-420
Internal element top: frame y + 30 or more (e.g., y=50)
Internal element bottom: frame y + height - 30 or less (e.g., up to y=390)