---

name: drawio version: 2.0.0 description: AI-powered Draw.io diagram generation with Design System, 3 workflows, and real-time browser preview category: visual-design tags: [diagram, flowchart, architecture, drawio, design-system]

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)

1. Ask Claude to create a diagram
2. Claude calls start_session to open browser
3. Claude generates diagram XML
4. 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