Draw Io

This handles draw.io diagram files end to end: editing the XML directly, converting to PNG with transparent backgrounds at 2x scale, and managing font settings for Japanese text in Quarto slides. It's opinionated about workflow, treating drawio files as source and using pre-commit hooks to generate PNGs automatically. The real value is in the detailed coordinate adjustment guidance and the checklist for common mistakes like arrows overlapping labels or elements bleeding outside container boxes. It includes AWS icon search tooling and specific rules about layer ordering, which matters more than you'd think when arrows start disappearing behind boxes. If you're maintaining technical diagrams in a Git repo and tired of manual PNG exports, this codifies a lot of hard-won layout knowledge.

skills.sh installs: 838
GitHub stars: 2.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add softaworks/agent-toolkit --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/softaworks/agent-toolkit
Categories: Frontend Development, Git & Pull Requests, Code Review & Quality, AI & Agent Building, Marketing & SEO, Cloud & Infrastructure
First seen: Jun 3, 2026