drawio-skill
From text to professional diagrams. Generate draw.io files from natural language with self-check, iterative refinement, and ML model support.
git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill
Why This Skill
The only pure-SKILL.md solution that reads its own output and auto-fixes before showing you.
6 Diagram Presets
ERD, UML Class, Sequence, Architecture, ML/Deep Learning, Flowchart — each with preset shapes, styles, and layout conventions.
ML / Deep Learning
Transformer, CNN, LSTM architectures with tensor shape annotations (B, C, H, W). Built for NeurIPS, ICML, ICLR papers.
Self-Check Loop
Reads the exported PNG, detects 6 issue types (overlaps, clipped labels, stacked edges), and auto-fixes before showing you.
Animated Connectors
Add flowAnimation=1 for moving dot animations along arrows. Ideal for data-flow and pipeline diagrams in SVG.
5 Platforms, Zero Config
Claude Code, OpenClaw, Hermes, Codex, SkillsMP — just one SKILL.md file + draw.io desktop. No MCP, no Node.js.
Browser Fallback
No desktop CLI? Generates a diagrams.net URL that opens your diagram in the browser for viewing and editing.
Demo Gallery
Clean edge routing across different topologies — no lines crossing through shapes.
Star Topology
7 nodes — central broker, 6 services radiating outward
Layered Flow
10 nodes, 4 tiers — with cross-connections routed cleanly
Ring / Cycle
8 nodes — CI/CD pipeline with closed loop and spur branches
vs Native Agent
What you get with the skill vs prompting an LLM directly.
| Feature | Native Agent | This Skill |
|---|---|---|
| Self-check after export | ✗ | ✓ 2-round auto-fix |
| Iterative review loop | ✗ | ✓ 5-round with targeted edits |
| Diagram type presets | ✗ | ✓ 6 presets (ERD, UML, Seq, Arch, ML, Flow) |
| ML model diagrams | ✗ | ✓ Tensor shapes, layer colors |
| Animated connectors | ✗ | ✓ flowAnimation=1 |
| Grid-aligned layout | ✗ | ✓ 10px snap |
| Complexity-scaled spacing | ✗ | ✓ 200–350px by node count |
| Color palette | Random | ✓ 7-color semantic system |
| Edge routing rules | Basic | ✓ Corridors + waypoints + distribution |
| Container/group nesting | ✗ | ✓ Swimlane + group + custom |
| Embed diagram in export | ✗ | ✓ --embed-diagram |
| Browser fallback | ✗ | ✓ diagrams.net URL |
| Auto-launch desktop app | ✗ | ✓ Opens .drawio for fine-tuning |
Install
Pick your platform. Takes 10 seconds.
# Global install (available in all projects) git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill # Project-level install git clone https://github.com/Agents365-ai/drawio-skill.git .claude/skills/drawio-skill
# Via ClawHub registry clawhub install drawio-pro-skill # Manual install git clone https://github.com/Agents365-ai/drawio-skill.git ~/.openclaw/skills/drawio-skill
# Via SkillsMP CLI skills install drawio-skill
# Via ClawHub CLI clawhub install drawio-pro-skill
# User-level install git clone https://github.com/Agents365-ai/drawio-skill.git ~/.agents/skills/drawio-skill # Project-level install git clone https://github.com/Agents365-ai/drawio-skill.git .agents/skills/drawio-skill