drawio

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Draw.io Diagram Skill

Draw.io 图表生成技能

Generate draw.io diagrams as native

.drawio

files. Optionally export to PNG, SVG, or PDF with the diagram XML embedded (so the exported file remains editable in draw.io).

生成原生

.drawio

格式的绘图文件。还可选择将其导出为嵌入图表XML的PNG、SVG或PDF格式（这样导出后的文件仍可在draw.io中编辑）。

How to create a diagram

如何创建图表

Generate draw.io XML in mxGraphModel format for the requested diagram
Write the XML to a
```
.drawio
```
file in the current working directory using the Write tool
If the user requested an export format (png, svg, pdf), export using the draw.io CLI with
```
--embed-diagram
```
, then delete the source
```
.drawio
```
file
Open the result — the exported file if exported, or the
```
.drawio
```
file otherwise

生成mxGraphModel格式的draw.io XML，以匹配所需的图表内容
将XML写入文件：使用写入工具在当前工作目录中创建
```
.drawio
```
文件
如果用户要求特定导出格式（png、svg、pdf），使用draw.io CLI并添加
```
--embed-diagram
```
参数进行导出，然后删除源
```
.drawio
```
文件
打开结果文件：如果进行了导出则打开导出后的文件，否则打开
```
.drawio
```
文件

Choosing the output format

选择输出格式

Check the user's request for a format preference. Examples:

/drawio create a flowchart

→

flowchart.drawio

/drawio png flowchart for login

→

login-flow.drawio.png

/drawio svg: ER diagram

→

er-diagram.drawio.svg

/drawio pdf architecture overview

→

architecture-overview.drawio.pdf

If no format is mentioned, just write the

.drawio

file and open it in draw.io. The user can always ask to export later.

检查用户请求中的格式偏好。示例：

/drawio create a flowchart

→

flowchart.drawio

/drawio png flowchart for login

→

login-flow.drawio.png

/drawio svg: ER diagram

→

er-diagram.drawio.svg

/drawio pdf architecture overview

→

architecture-overview.drawio.pdf

如果未提及格式，仅创建

.drawio

文件并在draw.io中打开。用户后续可随时要求导出。

Supported export formats

支持的导出格式

Format	Embed XML	Notes
`png`	Yes ( `-e` )	Viewable everywhere, editable in draw.io
`svg`	Yes ( `-e` )	Scalable, editable in draw.io
`pdf`	Yes ( `-e` )	Printable, editable in draw.io
`jpg`	No	Lossy, no embedded XML support

PNG, SVG, and PDF all support

--embed-diagram

— the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram.

格式	嵌入XML	说明
`png`	是 ( `-e` )	可在所有平台查看，可在draw.io中编辑
`svg`	是 ( `-e` )	可缩放，可在draw.io中编辑
`pdf`	是 ( `-e` )	可打印，可在draw.io中编辑
`jpg`	否	有损压缩，不支持嵌入XML

PNG、SVG和PDF均支持

--embed-diagram

参数——导出的文件包含完整的图表XML，因此在draw.io中打开时可恢复为可编辑的图表。

draw.io CLI

The draw.io desktop app includes a command-line interface for exporting.

draw.io桌面应用包含用于导出功能的命令行界面。

Locating the CLI

定位CLI

Try

drawio

first (works if on PATH), then fall back to the platform-specific path:

macOS:

/Applications/draw.io.app/Contents/MacOS/draw.io

Linux:
```
drawio
```
(typically on PATH via snap/apt/flatpak)
Windows:
```
"C:\Program Files\draw.io\draw.io.exe"
```

Use

which drawio

(or

where drawio

on Windows) to check if it's on PATH before falling back.

首先尝试使用

drawio

命令（如果已添加到PATH），如果失败则使用平台特定路径：

macOS:

/Applications/draw.io.app/Contents/MacOS/draw.io

Linux:
```
drawio
```
（通常通过snap/apt/flatpak添加到PATH）
Windows:
```
"C:\Program Files\draw.io\draw.io.exe"
```

在使用备选路径前，可通过

which drawio

（Windows系统使用

where drawio

）检查该命令是否在PATH中。

Export command

导出命令

bash

drawio -x -f <format> -e -b 10 -o <output> <input.drawio>

Key flags:

```
-x
```
/
```
--export
```
: export mode
```
-f
```
/
```
--format
```
: output format (png, svg, pdf, jpg)
```
-e
```
/
```
--embed-diagram
```
: embed diagram XML in the output (PNG, SVG, PDF only)
```
-o
```
/
```
--output
```
: output file path
```
-b
```
/
```
--border
```
: border width around diagram (default: 0)
```
-t
```
/
```
--transparent
```
: transparent background (PNG only)
```
-s
```
/
```
--scale
```
: scale the diagram size
```
--width
```
/
```
--height
```
: fit into specified dimensions (preserves aspect ratio)
```
-a
```
/
```
--all-pages
```
: export all pages (PDF only)
```
-p
```
/
```
--page-index
```
: select a specific page (1-based)

bash

drawio -x -f <format> -e -b 10 -o <output> <input.drawio>

关键参数说明：

```
-x
```
/
```
--export
```
: 导出模式
```
-f
```
/
```
--format
```
: 输出格式（png, svg, pdf, jpg）
```
-e
```
/
```
--embed-diagram
```
: 在输出文件中嵌入图表XML（仅支持PNG、SVG、PDF）
```
-o
```
/
```
--output
```
: 输出文件路径
```
-b
```
/
```
--border
```
: 图表周围的边框宽度（默认值：0）
```
-t
```
/
```
--transparent
```
: 透明背景（仅PNG支持）
```
-s
```
/
```
--scale
```
: 缩放图表尺寸
```
--width
```
/
```
--height
```
: 将图表适配到指定尺寸（保持宽高比）
```
-a
```
/
```
--all-pages
```
: 导出所有页面（仅PDF支持）
```
-p
```
/
```
--page-index
```
: 选择特定页面（从1开始计数）

Opening the result

打开结果文件

macOS:
```
open <file>
```
Linux:
```
xdg-open <file>
```
Windows:
```
start <file>
```

macOS:
```
open <file>
```
Linux:
```
xdg-open <file>
```
Windows:
```
start <file>
```

File naming

文件命名规范

Use a descriptive filename based on the diagram content (e.g.,
```
login-flow
```
,
```
database-schema
```
)
Use lowercase with hyphens for multi-word names
For export, use double extensions:
```
name.drawio.png
```
,
```
name.drawio.svg
```
,
```
name.drawio.pdf
```
— this signals the file contains embedded diagram XML
After a successful export, delete the intermediate
```
.drawio
```
file — the exported file contains the full diagram

根据图表内容使用描述性文件名（例如：
```
login-flow
```
、
```
database-schema
```
）
多词名称使用小写字母加连字符分隔
导出文件使用双重扩展名：
```
name.drawio.png
```
、
```
name.drawio.svg
```
、
```
name.drawio.pdf
```
——这表明文件中嵌入了图表XML
导出成功后，删除中间的
```
.drawio
```
文件——导出后的文件已包含完整的图表内容

XML format

XML格式

.drawio

file is native mxGraphModel XML. Always generate XML directly — Mermaid and CSV formats require server-side conversion and cannot be saved as native files.

.drawio

文件是原生的mxGraphModel XML格式。请始终直接生成XML——Mermaid和CSV格式需要服务器端转换，无法保存为原生文件。

Basic structure

基本结构

Every diagram must have this structure:

xml

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Diagram cells go here with parent="1" -->
  </root>
</mxGraphModel>

Cell
```
id="0"
```
is the root layer
Cell
```
id="1"
```
is the default parent layer
All diagram elements use
```
parent="1"
```
unless using multiple layers

每个图表必须遵循以下结构：

xml

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- 图表元素需设置parent="1"，并放在此处 -->
  </root>
</mxGraphModel>

Cell
```
id="0"
```
是根图层
Cell
```
id="1"
```
是默认父图层
所有图表元素除非使用多图层，否则均需设置
```
parent="1"
```

Common styles

常用样式

Rounded rectangle:

xml

<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Diamond (decision):

xml

<mxCell id="3" value="Condition?" style="rhombus;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="120" height="80" as="geometry"/>
</mxCell>

Arrow (edge):

xml

<mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Labeled arrow:

xml

<mxCell id="5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="3" target="6" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

圆角矩形：

xml

<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

菱形（决策节点）：

xml

<mxCell id="3" value="Condition?" style="rhombus;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="120" height="80" as="geometry"/>
</mxCell>

箭头（连接线）：

xml

<mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

带标签的箭头：

xml

<mxCell id="5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="3" target="6" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Useful style properties

实用样式属性

Property	Values	Use for
`rounded=1`	0 or 1	Rounded corners
`whiteSpace=wrap`	wrap	Text wrapping
`fillColor=#dae8fc`	Hex color	Background color
`strokeColor=#6c8ebf`	Hex color	Border color
`fontColor=#333333`	Hex color	Text color
`shape=cylinder3`	shape name	Database cylinders
`shape=mxgraph.flowchart.document`	shape name	Document shapes
`ellipse`	style keyword	Circles/ovals
`rhombus`	style keyword	Diamonds
`edgeStyle=orthogonalEdgeStyle`	style keyword	Right-angle connectors
`edgeStyle=elbowEdgeStyle`	style keyword	Elbow connectors
`dashed=1`	0 or 1	Dashed lines
`swimlane`	style keyword	Swimlane containers

属性	取值	用途
`rounded=1`	0或1	设置圆角
`whiteSpace=wrap`	wrap	文本自动换行
`fillColor=#dae8fc`	十六进制颜色码	背景颜色
`strokeColor=#6c8ebf`	十六进制颜色码	边框颜色
`fontColor=#333333`	十六进制颜色码	文本颜色
`shape=cylinder3`	形状名称	数据库圆柱形状
`shape=mxgraph.flowchart.document`	形状名称	文档形状
`ellipse`	样式关键字	圆形/椭圆形
`rhombus`	样式关键字	菱形
`edgeStyle=orthogonalEdgeStyle`	样式关键字	直角连接线
`edgeStyle=elbowEdgeStyle`	样式关键字	弯头连接线
`dashed=1`	0或1	虚线
`swimlane`	样式关键字	泳道容器

CRITICAL: XML well-formedness

重要提示：XML格式正确性

NEVER use double hyphens (
--
) inside XML comments.
```
--
```
is illegal inside
```

```
per the XML spec and causes parse errors. Use single hyphens or rephrase.
Escape special characters in attribute values:
```
&amp;
```
,
```
&lt;
```
,
```
&gt;
```
,
```
&quot;
```
Always use unique
```
id
```
values for each
```
mxCell
```

绝对不要在XML注释中使用双连字符(
--
)。根据XML规范，
```
--
```
在
```

```
注释中是非法的，会导致解析错误。请使用单连字符或重新表述。
转义属性值中的特殊字符：
```
&amp;
```
、
```
&lt;
```
、
```
&gt;
```
、
```
&quot;
```
确保每个
```
mxCell
```
的
```
id
```
值唯一