Draw.io Skill

AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.

Quick Start

Tip: Use /drawio followed by keywords like “create”, “replicate”, “edit” to trigger different 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

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

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

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

Reference

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

Links

• Homepage
• GitHub Repository
• MCP Server Documentation

License & Author

• License: Apache-2.0
• Author: DayuanJiang
• Skill Version: 1.1.0