draw-io

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

draw.io Diagram Generation Skill

draw.io 图表生成Skill

Overview

概述

This skill enables Claude Code to generate high-quality draw.io diagrams by directly editing XML. It addresses common pitfalls when generating draw.io files programmatically.

该Skill可让Claude Code通过直接编辑XML来生成高质量的draw.io图表。它解决了以编程方式生成draw.io文件时的常见问题。

Quick Start

快速开始

When creating a draw.io diagram:

Set
```
defaultFontFamily
```
in
```
mxGraphModel
```
Add
```
fontFamily=FontName;
```
to ALL text element styles
Use
```
fontSize=18
```
or larger for readability
Place arrows (edges) BEFORE boxes (vertices) in XML
Allocate 30-40px width per Japanese character
Set
```
page="0"
```
for transparent background
Verify with PNG export

创建draw.io图表时：

在
```
mxGraphModel
```
中设置
```
defaultFontFamily
```
为所有文本元素的样式添加
```
fontFamily=FontName;
```
使用
```
fontSize=18
```
或更大字号以保证可读性
在XML中先放置箭头（edges）再放置框（vertices）
每个日文字符分配30-40px的宽度
设置
```
page="0"
```
以获得透明背景
通过PNG导出进行验证

Core Rules

核心规则

Font Settings

字体设置

xml

<!-- In mxGraphModel -->
<mxGraphModel defaultFontFamily="Noto Sans JP" page="0" ...>

<!-- In EVERY text element's style -->
<mxCell style="text;fontFamily=Noto Sans JP;fontSize=18;..." />

xml

<!-- In mxGraphModel -->
<mxGraphModel defaultFontFamily="Noto Sans JP" page="0" ...>

<!-- In EVERY text element's style -->
<mxCell style="text;fontFamily=Noto Sans JP;fontSize=18;..." />

Arrow Placement (Z-Order)

箭头布局（Z轴顺序）

Arrows must be declared FIRST to render behind other elements:

xml

<root>
  <mxCell id="0" />
  <mxCell id="1" parent="0" />

  <!-- ARROWS FIRST (renders at back) -->
  <mxCell id="arrow1" edge="1" ... />

  <!-- BOXES AFTER (renders in front) -->
  <mxCell id="box1" vertex="1" ... />
</root>

箭头必须先声明才能渲染在其他元素后方：

xml

<root>
  <mxCell id="0" />
  <mxCell id="1" parent="0" />

  <!-- ARROWS FIRST (renders at back) -->
  <mxCell id="arrow1" edge="1" ... />

  <!-- BOXES AFTER (renders in front) -->
  <mxCell id="box1" vertex="1" ... />
</root>

Label-Arrow Spacing

标签与箭头间距

Labels must be at least 20px away from arrow lines:

xml

<!-- Arrow at Y=220 -->
<mxCell id="arrow">
  <mxGeometry>
    <mxPoint y="220" as="sourcePoint"/>
  </mxGeometry>
</mxCell>

<!-- Label at Y=180 (40px above arrow) - CORRECT -->
<mxCell id="label" value="Process">
  <mxGeometry y="180" width="60" height="20" />
</mxCell>

标签必须与箭头线条保持至少20px的距离：

xml

<!-- Arrow at Y=220 -->
<mxCell id="arrow">
  <mxGeometry>
    <mxPoint y="220" as="sourcePoint"/>
  </mxGeometry>
</mxCell>

<!-- Label at Y=180 (40px above arrow) - CORRECT -->
<mxCell id="label" value="Process">
  <mxGeometry y="180" width="60" height="20" />
</mxCell>

Japanese Text Width

日文文本宽度

Allocate sufficient width to prevent unwanted line breaks:

xml

<!-- 8 Japanese characters × 35px = 280px minimum -->
<mxCell id="title" value="シンプルなフロー図">
  <mxGeometry width="300" height="40" />
</mxCell>

需分配足够的宽度以避免不必要的换行：

xml

<!-- 8 Japanese characters × 35px = 280px minimum -->
<mxCell id="title" value="シンプルなフロー図">
  <mxGeometry width="300" height="40" />
</mxCell>

Instruction Template

操作模板

When asked to create a draw.io diagram, use this approach:

Understand the diagram requirements
Plan the layout (positions, connections)
Generate XML with all rules applied
Suggest PNG verification command

当被要求创建draw.io图表时，遵循以下步骤：

理解图表需求
规划布局（位置、连接关系）
生成符合所有规则的XML
建议PNG验证命令

PNG Verification

PNG验证

Always recommend PNG export for visual verification:

bash

undefined

始终建议通过PNG导出进行可视化验证：

bash

undefined

macOS

drawio -x -f png -s 2 -t -o output.png input.drawio open output.png

Linux

drawio -x -f png -s 2 -t -o output.png input.drawio xdg-open output.png

undefined

drawio -x -f png -s 2 -t -o output.png input.drawio xdg-open output.png

undefined

draw-io

Original

Translation

draw.io Diagram Generation Skill

draw.io 图表生成Skill

Overview

概述

Quick Start

快速开始

Core Rules

核心规则

Font Settings

字体设置

Arrow Placement (Z-Order)

箭头布局（Z轴顺序）

Label-Arrow Spacing

标签与箭头间距

Japanese Text Width

日文文本宽度

Instruction Template

操作模板

PNG Verification

PNG验证

macOS

macOS

Linux

Linux

Supporting Files

相关文件