drawio

Original：🇺🇸 English

Translated

7 scripts

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

22installs

Sourcebahayonghang/drawio-skills

Added on2026-02-04

NPX Install

npx skill4agent add bahayonghang/drawio-skills drawio

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 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: 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

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:

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

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:

json

{
  "command": "npx",
  "args": ["--yes", "@next-ai-drawio/mcp-server@latest"]
}

Default port:

(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

License & Author

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

drawio

NPX Install

Tags

SKILL.md Content

Draw.io Skill

Quick Start

Features

Design System

Themes

Semantic Shapes

Typed Connectors

8px Grid System

Installation

MCP Tools

Workflows

`/drawio create`
- Create from Scratch

`/drawio replicate`
- Replicate Existing

`/drawio edit`
- Modify Diagram

Documentation

Design System

Reference

Architecture

Troubleshooting

Links

License & Author