draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
npxskills add softaworks/agent-toolkit--skill draw-ioLoading…
.drawio files.drawio.png files.drawio.png by pre-commit hook in slidesFor 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;"
See conversion script at scripts/convert-drawio-to-png.sh.
# 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
Internal command used:
drawio -x -f png -s 2 -t -o output.drawio.png input.drawio
| Option | Description |
|---|---|
-x | Export mode |
-f png | PNG format output |
-s 2 | 2x scale (high resolution) |
-t | Transparent background |
-o | Output file path |
.drawio file in text editor (plain XML format)mxCell for element to adjust (search by value attribute for text)mxGeometry tag
x: Position from lefty: Position from topwidth: Widthheight: Heighty + (height / 2)Separate complex systems into staged diagrams:
| Diagram Type | Purpose |
|---|---|
| Context Diagram | System overview from external perspective |
| System Diagram | Main components and relationships |
| Component Diagram | Technical details and integration points |
| Deployment Diagram | Infrastructure configuration |
| Data Flow Diagram | Data flow and transformation |
| Sequence Diagram | Time-series interactions |
Include title, description, last updated, author, and version in diagrams.
background="#ffffff"<!-- For 10-character text, allow 300-400px -->
<mxGeometry x="140" y="60" width="400" height="40" />
<!-- Title -->
<mxCell id="title" value="..." .../>
<!-- Arrows (back layer) -->
<mxCell id="arrow1" style="edgeStyle=..." .../>
<!-- Other elements (front layer) -->
<mxCell id="box1" .../>
For text elements, exitX/exitY don't work, so use explicit coordinates:
<!-- Good: Explicit coordinates with sourcePoint/targetPoint -->
<mxCell id="arrow" style="..." edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="1279" y="500" as="sourcePoint"/>
<mxPoint x="119" y="500" as="targetPoint"/>
<Array as="points">
<mxPoint x="1279" y="560"/>
<mxPoint x="119" y="560"/>
</Array>
</mxGeometry>
</mxCell>
Adjust offset attribute to distance arrow labels from arrows:
<!-- Place above arrow (negative value to distance) -->
<mxPoint x="0" y="-40" as="offset"/>
<!-- Place below arrow (positive value to distance) -->
<mxPoint x="0" y="40" as="offset"/>
<br> tag for line breaksWhen placing elements inside background frames (grouping boxes), ensure sufficient margin.
rounded=1) and stroke widthCoordinate 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)
Bad example (may overflow):
<!-- Background frame -->
<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
<mxGeometry x="500" y="20" width="560" height="400" />
</mxCell>
<!-- Text: y=30 is too close to frame top (y=20) -->
<mxCell id="label" value="Title" style="text;...">
<mxGeometry x="510" y="30" width="540" height="35" />
</mxCell>
Good example (sufficient margin):
<!-- Background frame -->
<mxCell id="bg" style="rounded=1;strokeWidth=3;...">
<mxGeometry x="500" y="20" width="560" height="430" />
</mxCell>
<!-- Text: y=50 is 30px from frame top (y=20) -->
<mxCell id="label" value="Title" style="text;...">
<mxGeometry x="510" y="50" width="540" height="35" />
</mxCell>
AWS icon search examples:
python ~/.claude/skills/draw-io/scripts/find_aws_icon.py ec2
python ~/.claude/skills/draw-io/scripts/find_aws_icon.py lambda
Add auto-stretch: false to YAML header:
---
title: "Your Presentation"
format:
revealjs:
auto-stretch: false
---
This ensures correct image display on mobile devices.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).