Move the draw.io XML generation reference to shared/xml-reference.md and wire all four consumers to use it instead of duplicating the content. Add layers, tags, and metadata/placeholders documentation. - MCP app server: reads at startup (Node.js) or pre-builds into generated-html.js (Workers) via build-html.js - MCP tool server: reads at startup with fallback to local copy; prepack script bundles the file before npm publish - Skill: references the GitHub raw URL so it works after install - Project instructions: tells users to copy from GitHub Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.2 KiB
Skill + CLI
Claude Code skill that generates native .drawio files, with optional export to PNG/SVG/PDF (with embedded XML) using the draw.io desktop CLI. No MCP server required.
Key Files
| File | Purpose |
|---|---|
drawio/SKILL.md |
Claude Code skill file (users copy this to their skills directory) |
README.md |
Installation and usage documentation |
How It Works
- User invokes
/drawioor Claude detects a diagram request - Claude generates mxGraphModel XML for the requested diagram
- The XML is written to a
.drawiofile in the working directory via the Write tool - If the user requested an export format (png, svg, pdf), the draw.io CLI exports to
.drawio.png/.drawio.svg/.drawio.pdfwith--embed-diagram, then deletes the source.drawiofile - The result is opened for viewing (
open/xdg-open/start)
Default output is .drawio (no export). The user requests export by mentioning a format: /drawio png ..., /drawio svg: ..., etc.
draw.io CLI Locations
- macOS:
/Applications/draw.io.app/Contents/MacOS/draw.io - Linux:
drawio(on PATH via snap/apt/flatpak) - Windows:
"C:\Program Files\draw.io\draw.io.exe" - WSL2:
`/mnt/c/Program Files/draw.io/draw.io.exe`(detect viagrep -qi microsoft /proc/version)
The skill tries drawio first, then falls back to the platform-specific path. On WSL2, use wslpath -w to convert paths when opening files with cmd.exe /c start.
Why XML Only?
A .drawio file is native mxGraphModel XML. Mermaid and CSV formats require draw.io's server-side conversion and cannot be saved as native files. The skill generates XML directly for all diagram types.
XML Reference
The XML generation reference lives in shared/xml-reference.md at the repo root (single source of truth for all prompts). The SKILL.md references it via the GitHub raw URL so it works after install without copying extra files.
Coding Conventions
- Allman brace style: Opening braces go on their own line for all control structures, functions, objects, and callbacks.
- Prefer
function()expressions over arrow functions for callbacks. - See the root
CLAUDE.mdfor examples.