drawio

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Draw.io Skill

Draw.io 技能

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

为Claude Code打造的、基于AI的Draw.io图表生成工具，支持实时浏览器预览。

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.

操作需求	命令	说明
创建新图表	`/drawio create ...`	自然语言 → 图表
复刻图片	`/drawio replicate ...`	图片 → A-H格式 → 图表
编辑图表	`/drawio edit ...`	修改现有图表

提示：使用
/drawio
后跟"create"、"replicate"、"edit"等关键词来触发不同工作流。

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

设计系统 - 包含主题、设计令牌及语义化形状的统一视觉语言
实时预览 - Claude生成图表时，浏览器中同步更新
版本历史 - 可恢复之前的图表版本
自然语言支持 - 用普通文本描述图表即可生成
云架构支持 - 自带AWS、GCP、Azure官方图标
动态连接线 - 支持连接线动画效果
语义化形状 - 根据节点类型自动选择对应形状
数学公式排版 - 标签中支持LaTeX/AsciiMath公式
IEEE学术风格 - 生成可直接用于发表的图表

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

主题	使用场景
科技蓝	软件架构、DevOps（默认）
学术彩色 ⭐	学术论文、研究（推荐）
学术灰度	仅用于IEEE灰度印刷
自然风	环境、生命周期类图表
深色模式	演示文稿、幻灯片

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

根据节点类型自动选择形状：

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

类型	样式	用途
`primary`	2px实线、实心箭头	主流程
`data`	2px虚线、实心箭头	数据/异步流程
`optional`	1px点线、空心箭头	弱关联
`dependency`	1px实线、菱形箭头	依赖关系

8px Grid System

8px栅格系统

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

所有间距和位置均对齐8px栅格，以获得专业效果：

节点边距：最小32px
容器内边距：24px
画布内边距：32px

→ 完整设计系统文档

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服务器在首次使用时自动配置：

json

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

默认端口：

（如果端口被占用会自动递增）

如需手动配置，请查看scripts/。

MCP Tools

MCP工具

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

工具	说明
`start_session`	打开带实时预览的浏览器
`create_new_diagram`	从XML创建图表
`edit_diagram`	通过基于ID的操作编辑图表
`get_diagram`	获取当前图表的XML
`export_diagram`	保存为 `.drawio` 文件

详情：docs/mcp-tools.md

Workflows

工作流

/drawio create

- Create from Scratch

/drawio create

- 从零开始创建

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 create a login flowchart with validation and error handling

A-H格式：可选（复杂图表使用

--structured

参数）

→ 完整工作流

/drawio replicate

- Replicate Existing

/drawio replicate

- 复刻现有图表

Recreate images/screenshots using structured A-H extraction.

/drawio replicate
【领域】软件架构
[Upload image]

A-H format: Required

→ Full workflow

使用结构化A-H格式提取来复刻图片/截图。

/drawio replicate
【领域】软件架构
[Upload image]

A-H格式：必填

→ 完整工作流

/drawio edit

- Modify Diagram

/drawio edit

- 修改图表

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

使用自然语言指令修改现有图表。

/drawio edit
Change "User Service" to "Auth Service"
Make database nodes green

A-H格式：可选（用于结构修改）

→ 完整工作流

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

主题	文件
设计系统概述	docs/design-system/README.md
设计令牌	docs/design-system/tokens.md
主题	docs/design-system/themes.md
语义化形状	docs/design-system/shapes.md
连接线	docs/design-system/connectors.md
图标	docs/design-system/icons.md
公式	docs/design-system/formulas.md
规范格式	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

主题	文件
数学公式排版	docs/math-typesetting.md
IEEE图表	docs/ieee-diagrams.md
使用示例	docs/examples.md
XML格式	docs/xml-format.md
MCP工具	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!

Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)

请求Claude创建图表
Claude调用
```
start_session
```
打开浏览器
Claude生成图表XML
图表实时显示在浏览器中！

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`

问题	解决方案
"d.setId is not a function"	仅使用数字类型的 `mxCell` ID
端口已被占用	服务器会自动尝试6002-6020端口
"No active session"	先调用 `start_session`
浏览器未更新	检查URL是否包含 `?mcp=` 参数
数学公式未渲染	启用 `Extras > Mathematical Typesetting`

License & Author

许可证与作者

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

许可证：Apache-2.0
作者：DayuanJiang
技能版本：1.1.0

drawio

Original

Translation

Draw.io Skill

Draw.io 技能

Quick Start

快速开始

Features

功能特性

Design System

设计系统

Themes

主题

Semantic Shapes

语义化形状

Typed Connectors

类型化连接线

8px Grid System

8px栅格系统

Installation

安装

MCP Tools

MCP工具

Workflows

工作流

/drawio create - Create from Scratch

/drawio create - 从零开始创建

/drawio replicate - Replicate Existing

/drawio replicate - 复刻现有图表

/drawio edit - Modify Diagram

/drawio edit - 修改图表

Documentation

文档

Design System

设计系统

Reference

参考文档

Architecture

架构

Troubleshooting

故障排除

Links

相关链接

License & Author

许可证与作者

`/drawio create`
- Create from Scratch

`/drawio create`
- 从零开始创建

`/drawio replicate`
- Replicate Existing

`/drawio replicate`
- 复刻现有图表

`/drawio edit`
- Modify Diagram

`/drawio edit`
- 修改图表