draw-io — Claude Code skill: draw.io diagrams from XML
A Claude skill that edits .drawio XML, converts diagrams to PNG and fixes element layout.
npx claude-code-templates@latest --skill creative-design/draw-ioWhat draw-io does
The skill handles draw.io diagrams from inside the agent: creating them, editing them, reviewing them. It only touches .drawio files and leaves .drawio.png alone — those get generated for you, for instance by a pre-commit hook in slides. A conversion script ships with it at scripts/convert-drawio-to-png.sh, wrapping drawio -x -f png -s 2 -t -o output.drawio.png input.drawio for 2x scale and a transparent background.
Layout work happens by hand on coordinates. Open the .drawio file as plain XML, find the mxCell you want by its value attribute, then change x, y, width and height inside mxGeometry and re-run the conversion to check the PNG. Aligning elements means matching centers, computed as y + (height / 2). Arrows are the fiddly part: exitX/exitY do nothing on text elements, so endpoints go in as explicit sourcePoint and targetPoint coordinates, and the offset attribute pushes a label away from its line.
Styling rules come bundled too. Drop background="#ffffff" so the diagram adapts to any theme, put arrows on the back layer right after the title, keep at least 20px between a label and an arrow end. For Japanese text it advises 30–40px per character, otherwise lines break in the wrong place. Reference docs cover layout and AWS icons, and scripts/find_aws_icon.py looks up an icon by service name. The checklist section cuts off mid-item, so treat it as incomplete.
What it helps with
- build an architecture diagram in
.drawioand export it to PNG - fix element coordinates so boxes stop overlapping
- route arrows and labels so lines do not cross the text
- find the right AWS icon by service name
- get a transparent background so the diagram fits any theme
Example prompts for the agent
- fix the box coordinates in assets/architecture.drawio and convert it to PNG
- find the AWS icon for lambda and place it on the diagram
- reroute the arrows, they overlap the labels
How to install draw-io
1claude-code-templates
npx claude-code-templates@latest --skill creative-design/draw-io2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill draw-io -a claude-code3Manually: put the files in place
~/.claude/skills/draw-io/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/draw-io/
Manually: put the files in place
.agents/skills/draw-io/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/draw-io/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates draw-io2Manually: put the files in place
.github/skills/draw-io/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/draw-ioManually: put the files in place
.devin/skills/draw-io/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about draw-io
How do I install draw-io in Claude?
Use the templates command: npx claude-code-templates@latest --skill creative-design/draw-io. Or install with npx skills add davila7/claude-code-templates --skill draw-io -a claude-code. The skill file then lives at ~/.claude/skills/draw-io/SKILL.md.
What does draw-io do?
It edits .drawio XML, converts diagrams to PNG and helps with layout: element coordinates, arrows, labels. It also covers searching for AWS icons.
Can I edit .drawio.png files directly?
No, the skill works on .drawio files only. The PNG is generated automatically, for example by a pre-commit hook, and is not edited in place.
