Draw.io Skill
AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.
Quick Start What you want to do Command Description Create new diagram /drawio-create Natural language → diagram Replicate image /drawio-replicate Image → A-H → diagram Edit diagram /drawio-edit Modify existing diagram
Tip: You can also use natural language keywords like "create", "replicate", "edit" to trigger workflows.
Features Design System - Unified visual language with themes, tokens, and semantic shapes Real-time Preview - Diagrams update in browser as Claude creates them Version History - Restore previous diagram versions Natural Language - Describe diagrams in plain text Cloud Architecture - AWS, GCP, Azure with official icons Animated Connectors - Dynamic connector animations Semantic Shapes - Auto-select shapes based on node type Math Typesetting - LaTeX/AsciiMath equations in labels IEEE Academic Style - Publication-ready diagrams Design System
The skill includes a unified design system providing consistent visual language:
Themes Theme Use Case Tech Blue Software architecture, DevOps (default) Academic Color ⭐ Academic papers, research (recommended) Academic IEEE grayscale print only Nature Environmental, lifecycle diagrams Dark Mode Presentations, slides Semantic Shapes
Automatic shape selection based on node type:
nodes: - id: api label: API Gateway type: service # → Rounded rectangle
-
id: db label: User Database type: database # → Cylinder
-
id: check label: Valid? type: decision # → Diamond
Typed Connectors Type Style Usage primary Solid 2px, filled arrow Main flow data Dashed 2px, filled arrow Data/async flow optional Dotted 1px, open arrow Weak relation dependency Solid 1px, diamond Dependencies 8px Grid System
All spacing and positions align to 8px grid for professional results:
Node margin: 32px minimum Container padding: 24px Canvas padding: 32px
→ Full Design System Documentation
Installation
MCP server auto-configures on first use:
{ "command": "npx", "args": ["--yes", "@next-ai-drawio/mcp-server@latest"] }
Default port: 6002 (auto-increments if in use)
For manual setup, see scripts/.
MCP Tools Tool Description start_session Opens browser with real-time preview create_new_diagram Create diagram from XML edit_diagram Edit by ID-based operations get_diagram Get current diagram XML export_diagram Save to .drawio file
Details: docs/mcp-tools.md
Workflows /drawio-create - Create from Scratch
Create diagrams from natural language descriptions.
/drawio-create a login flowchart with validation and error handling
A-H format: Optional (use --structured for complex diagrams)
→ Full workflow
/drawio-replicate - Replicate Existing
Recreate images/screenshots using structured A-H extraction.
/drawio-replicate 【领域】软件架构 [Upload image]
A-H format: Required
→ Full workflow
/drawio-edit - Modify Diagram
Edit existing diagrams with natural language instructions.
/drawio-edit Change "User Service" to "Auth Service" Make database nodes green
A-H format: Optional (use for structural changes)
→ Full workflow
Documentation Design System Topic File Design System Overview docs/design-system/README.md Design Tokens docs/design-system/tokens.md Themes docs/design-system/themes.md Semantic Shapes docs/design-system/shapes.md Connectors docs/design-system/connectors.md Icons docs/design-system/icons.md Formulas docs/design-system/formulas.md Specification Format docs/design-system/specification.md Reference Topic File Math Typesetting docs/math-typesetting.md IEEE Diagrams docs/ieee-diagrams.md Usage Examples docs/examples.md XML Format docs/xml-format.md MCP Tools docs/mcp-tools.md Architecture Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)
Ask Claude to create a diagram Claude calls start_session to open browser Claude generates diagram XML Diagram appears in real-time! Troubleshooting Issue Solution "d.setId is not a function" Use numeric mxCell IDs only Port already in use Server auto-tries ports 6002-6020 "No active session" Call start_session first Browser not updating Check URL has ?mcp= parameter Math not rendered Enable Extras > Mathematical Typesetting Links Homepage GitHub Repository MCP Server Documentation License & Author License: Apache-2.0 Author: DayuanJiang Skill Version: 1.1.0