Draw.io Architecture Diagram Skill

npx degit xstongxue/best-skills/skills/drawio-diagram ~/.claude/skills/drawio-diagram

drawio-diagram is the formal sibling of excalidraw-diagram. Output is standard .drawio XML — opens in app.diagrams.net, the VS Code extension, or Confluence’s Draw.io integration. Editable, not flattened.

Two modes

Mode	Trigger
Generate from scratch	”draw an architecture diagram”, “visualize this model”
Style migration	User provides a reference image + content; output mimics the reference’s layout, palette, and style

What it gets right

• Strict XML correctness — properly closed tags, escaped specials, sequential IDs
• Standard mxfile structure with mxGraphModel, root, vertex/edge cells
• ML-aware shapes — knows how to depict attention heads, conv layers, residual connections, normalization

Where it shines

• Academic papers that need formal architecture diagrams
• Tech blogs that need consistent visual styling across posts
• Documentation where you’d be using Draw.io anyway

Style migration tip

If your team has a “house style” (specific palette, specific shape vocabulary), take a screenshot of one existing diagram, give it to the skill alongside the new content, and it’ll match. Useful for keeping a thesis or report’s diagrams visually consistent.

Pairs with

• excalidraw-diagram — when you want hand-drawn vibe instead
• pptgen-drawio — embed these diagrams into the deck
• Confluence / Notion — both render Draw.io natively

→ Install on GitHub

Use drawio-diagram to visualize a Transformer encoder block:
Input → Embedding → Multi-Head Attention → FFN → LayerNorm → Output.
Show residual connections as dashed lines. Layered top-down layout.