garyld1962 Draw.io Skill for Claude Code
A Claude Code skill that generates native .drawio files, with optional export to PNG, SVG, or PDF (with embedded XML so the exported file remains editable in draw.io) or as a browser URL that opens the diagram directly in app.diagrams.net. No MCP setup required.
How It Works
When you ask Claude Code to create a diagram, it will:
- Generate draw.io XML for your requested diagram
- Write it to a
.drawiofile in your current directory - Handle the requested output:
- PNG / SVG / PDF — export using the draw.io desktop CLI
url— compress the XML with Node.js's built-inzliband openhttps://app.diagrams.net/#create=...in your browser (keeps the.drawiofile as a local copy)- (default) — leave the
.drawiofile as-is
- Open the result
Prerequisites
- Claude Code installed
- draw.io Desktop installed (only required for PNG/SVG/PDF export — not needed for
.drawioorurlmodes)
Installation
Copy drawio/SKILL.md to your Claude Code skills directory:
Global (all projects):
mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md
Per-project:
mkdir -p .claude/skills/drawio
cp drawio/SKILL.md .claude/skills/drawio/SKILL.md
Usage
/skill:drawio create a flowchart for user login
By default, this writes a .drawio file and opens it in draw.io. To export to an image format or open the diagram in the browser, mention the format in your request:
/skill:drawio png flowchart for user login → login-flow.drawio.png
/skill:drawio svg: ER diagram for e-commerce → er-diagram.drawio.svg
/skill:drawio pdf architecture overview → architecture-overview.drawio.pdf
/skill:drawio url flowchart for user login → opens app.diagrams.net in browser, keeps login-flow.drawio locally
More examples:
/skill:drawio sequence diagram for API auth
/skill:drawio png class diagram for the models in src/
/skill:drawio url architecture overview
Output Formats
| Format | Output | Editor | Dependency |
|---|---|---|---|
| (default) | .drawio file |
draw.io Desktop, or the browser app | None |
png |
.drawio.png (embedded XML) |
draw.io Desktop, or any viewer | draw.io Desktop (for export) |
svg |
.drawio.svg (embedded XML) |
draw.io Desktop, or any viewer | draw.io Desktop (for export) |
pdf |
.drawio.pdf (embedded XML) |
draw.io Desktop, or any PDF viewer | draw.io Desktop (for export) |
url |
Browser tab at app.diagrams.net + .drawio file kept locally |
draw.io editor in browser | Node.js (bundled with Claude Code) |
The .drawio.* double extension signals that the file contains embedded diagram XML. Open any of these in draw.io to recover and edit the full diagram. The intermediate .drawio source file is deleted after image export since the exported file contains the complete diagram. In url mode, the .drawio file is kept so you have a persistent local copy to re-edit or share.
url mode uses only Node.js's built-in zlib (deflate-raw compression) and child_process (browser open) — no external dependencies. The resulting https://app.diagrams.net/#create=... URL is the same format used by the MCP Tool Server, so behavior is identical.
XML Reference
The skill references the shared XML generation guide (edge routing, containers, layers, tags, metadata, dark mode, etc.) from GitHub at runtime:
shared/xml-reference.md
This is the single source of truth for all draw.io MCP prompts across the repository. No extra files need to be copied during installation.
Why XML Only?
A .drawio file is just mxGraphModel XML. Mermaid and CSV formats require draw.io's server-side conversion — they can't be saved as native files. Claude generates XML directly for all diagram types, which means:
- No server dependency
- No conversion step
- Files are immediately editable in draw.io
Other Variants
This repository offers multiple ways to integrate draw.io with AI assistants:
- MCP App Server — Inline diagrams in chat (Claude.ai, VS Code)
- MCP Tool Server — Opens diagrams in browser via MCP (Claude Desktop)
- Project Instructions — Claude.ai Projects, no install needed