Draw Io

This is for teams working with draw.io diagrams as code, especially in docs or presentation pipelines. It handles direct XML editing of .drawio files, automated PNG conversion via pre-commit hooks, and precise layout control through coordinate manipulation. The skill includes AWS icon support with search utilities, font configuration for multi-language slides, and detailed guidance on element layering to prevent visual overlaps. What stands out is the pragmatic checklist approach: it doesn't just explain the XML structure, it gives you margin calculations, arrow placement rules, and specific gotchas like Japanese text width requirements. If you're generating or maintaining diagrams in CI/CD rather than clicking around in a GUI, this codifies the tedious parts.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 13
skills.sh installs: 843
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill draw-io --agent claude-code

Installs into .claude/skills of the current project.

Files

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;"

3. Conversion Commands

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

SKILL.md on GitHub

Details

Repository: github.com/davila7/claude-code-templates
Categories: Frontend Development, Git & Pull Requests, Code Review & Quality, Marketing & SEO, Cloud & Infrastructure
First seen: Apr 16, 2026