drawio

Original：🇺🇸 English
Translated
7 scripts

AI-powered Draw.io diagram generation with Design System, 3 workflows, and real-time browser preview

19installs
Sourcebahayonghang/drawio-skills
Added on

NPX Install

npx skill4agent add bahayonghang/drawio-skills drawio

Tags

Translated version includes tags in frontmatter
ai-diagram-generationdrawio-integrationdesign-systemreal-time-previewmcp-server

SKILL.md Content

View Translation Comparison →

Draw.io Skill

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

Quick Start

What you want to doCommandDescription
Create new diagram
/drawio create ...
Natural language → diagram
Replicate image
/drawio replicate ...
Image → A-H → diagram
Edit diagram
/drawio edit ...
Modify existing diagram
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

ThemeUse Case
Tech BlueSoftware architecture, DevOps (default)
Academic Color ⭐Academic papers, research (recommended)
AcademicIEEE grayscale print only
NatureEnvironmental, lifecycle diagrams
Dark ModePresentations, slides

Semantic Shapes

Automatic shape selection based on node type:
yaml
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

TypeStyleUsage
primary
Solid 2px, filled arrowMain flow
data
Dashed 2px, filled arrowData/async flow
optional
Dotted 1px, open arrowWeak relation
dependency
Solid 1px, diamondDependencies

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:
json
{
  "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

ToolDescription
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

TopicFile
Design System Overviewdocs/design-system/README.md
Design Tokensdocs/design-system/tokens.md
Themesdocs/design-system/themes.md
Semantic Shapesdocs/design-system/shapes.md
Connectorsdocs/design-system/connectors.md
Iconsdocs/design-system/icons.md
Formulasdocs/design-system/formulas.md
Specification Formatdocs/design-system/specification.md

Reference

TopicFile
Math Typesettingdocs/math-typesetting.md
IEEE Diagramsdocs/ieee-diagrams.md
Usage Examplesdocs/examples.md
XML Formatdocs/xml-format.md
MCP Toolsdocs/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

IssueSolution
"d.setId is not a function"Use numeric 
mxCell
IDs only
Port already in useServer auto-tries ports 6002-6020
"No active session"Call 
start_session
first
Browser not updatingCheck URL has 
?mcp=
parameter
Math not renderedEnable 
Extras > Mathematical Typesetting

Links

License & Author

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