drawio-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Draw.io 配图专家

Draw.io Diagram Expert

这个 skill 负责把用户的图表需求转成

.drawio

文件，并在需要时导出为 PNG、SVG 或 PDF。

主文件只保留任务路由、工作流和验收规则。详细样式、XML 模板、导出命令和示例按需读取

references/

。

This skill is responsible for converting users' diagram requirements into

.drawio

files, and exporting them as PNG, SVG, or PDF when needed.

The main file only retains task routing, workflows, and acceptance rules. Detailed styles, XML templates, export commands, and examples are read from

references/

as needed.

什么时候使用

When to Use

在这些场景下优先使用本 skill：

用户明确要求
```
draw.io
```
、
```
diagrams.net
```
或
```
.drawio
```
用户要求生成流程图、架构图、时序图、ER 图、状态机图、思维导图
用户希望把图导出为 PNG / SVG / PDF
用户要给技术文章、教程、系统设计文档配图
用户给出一篇文章，希望抽取多张技术图并放进同一个 draw.io 文件

不适合本 skill 的情况：

用户只想要 Mermaid 代码，不需要
```
.drawio
```
用户需要的是位图插画、海报或白板风正文配图，而不是结构化图表
用户只是讨论图表思路，还不想真正生成文件

Prioritize using this skill in the following scenarios:

Users explicitly request
```
draw.io
```
,
```
diagrams.net
```
, or
```
.drawio
```
files
Users request to generate flowcharts, architecture diagrams, sequence diagrams, ER diagrams, state machine diagrams, or mind maps
Users want to export diagrams as PNG/SVG/PDF
Users need illustrations for technical articles, tutorials, or system design documents
Users provide an article and hope to extract multiple technical diagrams into a single draw.io file

Scenarios not suitable for this skill:

Users only want Mermaid code and don't need
```
.drawio
```
files
Users require bitmap illustrations, posters, or whiteboard-style body illustrations instead of structured diagrams
Users are only discussing diagram ideas and don't want to actually generate files yet

参考路由

Reference Routing

按任务需要读取对应参考文件，不要默认把所有参考内容都塞进上下文：

需求	读取文件
颜色、字体、节点语义、连线风格、视觉统一规范	`references/style-spec.md`
XML 结构规则、文本标签规则、节点/连线模板、不同图表类型的结构建议	`references/xml-and-layout.md`
导出命令、文件命名、打开方式、交付规则	`references/export-and-files.md`
常见提示词、单图/多图文章配图示例、批量页面生成方式	`references/use-cases.md`

Read corresponding reference files according to task needs; do not load all reference content into the context by default:

Requirement	File to Read
Colors, fonts, node semantics, connection styles, visual consistency specifications	`references/style-spec.md`
XML structure rules, text label rules, node/connection templates, structure suggestions for different diagram types	`references/xml-and-layout.md`
Export commands, file naming, opening methods, delivery rules	`references/export-and-files.md`
Common prompts, single/multi-diagram article illustration examples, batch page generation methods	`references/use-cases.md`

核心规则

Core Rules

默认先生成
```
.drawio
```
原生文件，再根据用户要求决定是否导出。
如果用户明确要求导出 PNG / SVG / PDF，仍然先保留
```
.drawio
```
作为源文件，除非用户明确要求删除。
输出图表时，优先保证信息结构清晰，再保证视觉统一，不要为了“好看”牺牲可读性。
图表中的
```
mxCell.value
```
默认使用纯文本，避免嵌入 HTML 标签。
连线标签保持短小；长说明优先放到节点里或旁注节点里。
能不解释基础概念就不解释，把上下文留给真正影响绘图结果的约束。

By default, first generate the native
```
.drawio
```
file, then decide whether to export based on user requirements.
If users explicitly request export to PNG/SVG/PDF, still keep the
```
.drawio
```
file as the source file unless users explicitly request deletion.
When outputting diagrams, prioritize clear information structure first, then visual consistency; do not sacrifice readability for "good looks".
Use plain text for
```
mxCell.value
```
in diagrams by default, avoid embedding HTML tags.
Keep connection labels short; prioritize placing long descriptions inside nodes or in side note nodes.
Avoid explaining basic concepts if possible; reserve context for constraints that truly affect drawing results.

图表类型选择

Diagram Type Selection

按内容结构选择图表，不要机械套模板：

流程步骤、决策分支、算法逻辑：流程图
模块关系、服务依赖、部署层次：架构图
服务调用、消息交互、时序过程：时序图
实体、字段、主外键关系：ER 图
生命周期、状态迁移、事件驱动：状态机图
概念梳理、知识组织、层级扩展：思维导图

如果用户指定了图表类型，优先按用户要求执行；只有在用户明显选错图表类型时，才简短提醒并给出替代建议。

Choose diagrams based on content structure, do not mechanically apply templates:

Process steps, decision branches, algorithm logic: Flowchart
Module relationships, service dependencies, deployment layers: Architecture diagram
Service calls, message interactions, sequential processes: Sequence diagram
Entities, fields, primary/foreign key relationships: ER diagram
Lifecycle, state transitions, event-driven processes: State machine diagram
Concept sorting, knowledge organization, hierarchical expansion: Mind map

If users specify a diagram type, follow their request first; only briefly remind and suggest alternatives if users clearly choose the wrong diagram type.

工作流

Workflow

1. 识别任务模式

1. Identify Task Mode

先判断当前属于哪一种：

单张图生成
单张图生成并导出
一篇文章生成多张图
修改已有
```
.drawio
```

First determine which type the current task belongs to:

Single diagram generation
Single diagram generation and export
Multiple diagrams generation from one article
Modify existing
```
.drawio
```
file

2. 收集最小必要输入

2. Collect Minimum Necessary Input

至少明确这些信息：

图表主题
目标图表类型
关键节点 / 模块 / 实体 / 步骤
节点之间的关系
是否需要导出，以及导出格式

如果用户信息不完整，但可以合理推断，就直接推断并在结果里说明；只有缺少关键结构信息时才追问。

At least clarify the following information:

Diagram topic
Target diagram type
Key nodes / modules / entities / steps
Relationships between nodes
Whether export is needed, and the export format

If user information is incomplete but can be reasonably inferred, directly infer and explain in the result; only follow up when key structural information is missing.

3. 读取对应参考资料

3. Read Corresponding Reference Materials

需要统一视觉风格时，读取
```
references/style-spec.md
```
需要生成 XML 或判断布局时，读取
```
references/xml-and-layout.md
```
需要导出或命名时，读取
```
references/export-and-files.md
```
需要给用户展示常见 prompt 或文章配图模式时，读取
```
references/use-cases.md
```

Read
```
references/style-spec.md
```
when unified visual style is required
Read
```
references/xml-and-layout.md
```
when generating XML or judging layout
Read
```
references/export-and-files.md
```
when exporting or naming files
Read
```
references/use-cases.md
```
when showing users common prompts or article illustration modes

4. 先规划，再生成

4. Plan First, Then Generate

生成前先在内部明确：

采用哪种图表类型
页面是一张图还是多个
```
diagram page
```
节点分组如何布局
哪些连线需要标签，哪些不需要

不要一边写 XML 一边临时想结构。

Before generation, clarify internally:

Which diagram type to adopt
Whether the page is a single diagram or multiple
```
diagram pages
```
How to layout node groups
Which connections need labels and which don't

Do not临时 decide structure while writing XML.

5. 生成

.drawio

5. Generate

.drawio

File

生成时遵循这些顺序：

标题
容器 / 分组
核心节点
连线
标签与旁注

Follow this order when generating:

Title
Containers / Groups
Core nodes
Connections
Labels and side notes

6. 导出或打开

6. Export or Open

用户要求导出时，再执行导出
用户只要求生成时，默认交付
```
.drawio
```
如果本机没有
```
drawio
```
CLI，要明确告知无法自动导出，但
```
.drawio
```
已生成

Execute export only when users request it
By default, deliver
```
.drawio
```
file when users only request generation
If
```
drawio
```
CLI is not available locally, clearly inform users that automatic export is not possible, but the
```
.drawio
```
file has been generated

多图文章模式

Multi-Diagram Article Mode

当用户给一篇文章并要求“生成多张技术配图”时，按这个规则处理：

先从文章中提炼 2-6 个最值得画图的结构
每个结构对应一个独立
```
diagram page
```
主文件名默认与文章文件名保持一致
页面名使用英文小写中划线命名
避免把整篇文章所有知识点挤进一张大图

更细的示例和 prompt 写法，读取

references/use-cases.md

。

When users provide an article and request "generate multiple technical illustrations", follow these rules:

First extract 2-6 structures from the article that are most worth diagramming
Each structure corresponds to an independent
```
diagram page
```
The main file name defaults to match the article file name
Page names use lowercase English with hyphens
Avoid squeezing all knowledge points of the entire article into one large diagram

For more detailed examples and prompt writing, read

references/use-cases.md

验证清单

Verification Checklist

交付前至少检查：

图表类型是否和任务匹配
主要节点是否齐全，关系是否画对
连线是否交代清楚方向和语义
文字是否简洁，没有把长句压在边上
```
mxCell.value
```
中是否混入 HTML 标签
导出文件名是否符合命名规范
如果是多页文件，页面名是否清晰、一致

Check at least the following before delivery:

Whether the diagram type matches the task
Whether main nodes are complete and relationships are drawn correctly
Whether connection directions and semantics are clearly stated
Whether text is concise and not overcrowded
Whether HTML tags are mixed into
```
mxCell.value
```
Whether export file names comply with naming specifications
If it's a multi-page file, whether page names are clear and consistent

失败处理

Failure Handling

如果用户需求过于模糊，先给出你推断的图表结构，再说明你的假设
如果导出失败，保留
```
.drawio
```
，报告失败原因和可手动执行的导出命令
如果用户要求的内容更适合 Mermaid 或图片插画，要明确说明，并建议改用更合适的方式

If user requirements are too vague, first present the inferred diagram structure, then explain your assumptions
If export fails, retain the
```
.drawio
```
file, report the failure reason and manually executable export commands
If the content requested by users is more suitable for Mermaid or image illustrations, clearly explain and suggest using a more appropriate method

输出要求

Output Requirements

默认返回生成文件路径
若执行了导出，同时返回导出文件路径
若存在假设、删减或结构调整，要用一句话说明

Default to return the generated file path
If export is executed, return both the generated and exported file paths
If there are assumptions, deletions, or structural adjustments, explain in one sentence