drawio-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Draw.io Diagram Generator

Draw.io 图表生成工具

Generate professional-grade Draw.io (mxGraph) XML diagrams from natural language. You ARE the LLM — generate the XML directly, validate it, fix issues, and deliver.

根据自然语言生成专业级别的Draw.io（mxGraph）XML图表。你是LLM——直接生成XML，验证它，修复问题并交付。

Critical Rules

核心规则

Structure Rules

结构规则

S1: Check Stencil Names 🚨 NEVER guess stencil names. Check
```
stencils/*.md
```
for EXACT names. Wrong:
```
mxgraph.cisco.router
```
→ Correct:
```
mxgraph.cisco.routers.router
```
S2: Stencils Require fillColor Many stencils have no default color. Always add
```
fillColor
```
/
```
strokeColor
```
. Exception: edge/link stencils are connectors, not devices.
S3: Root Cells Required Must include
```
<mxCell id="0"/>
```
and
```
<mxCell id="1" parent="0"/>
```
or diagram won't render.

S4: Labels Below Stencils Use

verticalLabelPosition=bottom;verticalAlign=top;labelPosition=center;align=center;

for device/icon labels.

S5: mxCell Must Be Siblings ALL mxCell elements must be siblings under
```
<root>
```
— NEVER nest mxCell inside another mxCell.
S6: Container Transparency For container shapes, use
```
fillColor=none;
```
to make background transparent and prevent covering child elements.
S7: No Array Elements ⚠️ NEVER use
```
<Array>
```
elements in mxGeometry — this CRASHES draw.io! Let draw.io auto-route edges. Use
```
exitX/exitY/entryX/entryY
```
style params instead.
S8: No XML Comments NEVER include
```

```
in generated XML — breaks editing.

S1：检查模板名称 🚨 绝不猜测模板名称。查看
```
stencils/*.md
```
获取精确名称。错误示例：
```
mxgraph.cisco.router
```
→ 正确示例：
```
mxgraph.cisco.routers.router
```
S2：模板需设置fillColor 许多模板没有默认颜色。务必添加
```
fillColor
```
/
```
strokeColor
```
。例外：连接线（edge/link）模板是连接器，而非设备，无需设置。
S3：必须包含根单元格 必须包含
```
<mxCell id="0"/>
```
和
```
<mxCell id="1" parent="0"/>
```
，否则图表无法渲染。

S4：标签位于模板下方 设备/图标标签需使用

verticalLabelPosition=bottom;verticalAlign=top;labelPosition=center;align=center;

样式。

S5：mxCell必须为同级元素 所有mxCell元素必须是
```
<root>
```
下的同级元素——绝不能将mxCell嵌套在另一个mxCell内。
S6：容器透明化 对于容器形状，使用
```
fillColor=none;
```
使背景透明，避免覆盖子元素。
S7：禁止使用Array元素 ⚠️ 绝不能在mxGeometry中使用
```
<Array>
```
元素——这会导致draw.io崩溃！让draw.io自动路由连接线，改用
```
exitX/exitY/entryX/entryY
```
样式参数。
S8：禁止XML注释 绝不能在生成的XML中包含
```

```
——这会破坏编辑功能。

Layout Rules

布局规则

L1: Starting Margin Begin positioning from x=40, y=40.
L2: Element Spacing Keep 40-60px gaps between connected shapes; 150-200px for routing channels between groups.
L3: Compact Layouts Use vertical stacking or grid layouts. Keep within x: 0-800, y: 0-600 viewport. Avoid spreading elements too far apart.

L1：起始边距 从x=40，y=40开始定位元素。
L2：元素间距 相连形状之间保持40-60px的间隙；组与组之间的路由通道保持150-200px的间距。
L3：紧凑布局 使用垂直堆叠或网格布局。将元素限制在x:0-800，y:0-600的视口范围内，避免元素过于分散。

Edge Routing Rules — CRITICAL for Clean Diagrams

连接线路由规则——对清晰图表至关重要

E1: No Shared Paths Multiple edges between same nodes must use DIFFERENT exit/entry positions (
```
exitY=0.3
```
and
```
exitY=0.7
```
, NOT both 0.5).
E2: Bidirectional Use Opposite Sides A→B:
```
exitX=1
```
,
```
entryX=0
```
. B→A:
```
exitX=0
```
,
```
entryX=1
```
.
E3: Explicit Exit/Entry Points Every edge should specify:
```
exitX
```
,
```
exitY
```
,
```
entryX
```
,
```
entryY
```
in style.
E4: Route Around Obstacles If any shape is between source and target, let draw.io auto-route with
```
edgeStyle=orthogonalEdgeStyle
```
. Do NOT use
```
<Array>
```
waypoints.
E5: Plan Layout First Organize shapes into columns/rows. Trace each edge mentally: "What shapes are between source and target?"
E6: Natural Connection Points NEVER use corners (
```
entryX=1,entryY=1
```
). Top-to-bottom:
```
exitY=1
```
,
```
entryY=0
```
. Left-to-right:
```
exitX=1
```
,
```
entryX=0
```
.
E7: Diagonal Routing Principle When connecting distant nodes diagonally, route along the PERIMETER of the diagram, NOT through the middle where other shapes exist.

E1：避免路径重叠 同一节点间的多条连接线必须使用不同的出口/入口位置（如
```
exitY=0.3
```
和
```
exitY=0.7
```
，而非都用0.5）。
E2：双向连接使用相对侧 A→B：
```
exitX=1
```
，
```
entryX=0
```
。B→A：
```
exitX=0
```
，
```
entryX=1
```
。
E3：明确出口/入口点 每条连接线都应在样式中指定：
```
exitX
```
、
```
exitY
```
、
```
entryX
```
、
```
entryY
```
。
E4：绕过障碍物路由 如果源节点和目标节点之间有其他形状，让draw.io使用
```
edgeStyle=orthogonalEdgeStyle
```
自动路由。不要使用
```
<Array>
```
路径点。
E5：先规划布局 将形状组织成列/行。在脑海中追踪每条连接线：“源节点和目标节点之间有哪些形状？”
E6：使用自然连接点 绝不要使用角落（如
```
entryX=1,entryY=1
```
）。上下连接：
```
exitY=1
```
，
```
entryY=0
```
。左右连接：
```
exitX=1
```
，
```
entryX=0
```
。
E7：对角线路由原则 连接远距离节点时，沿图表外围路由，而非穿过中间有其他形状的区域。

Pre-Generation Checklist

生成前检查清单

Do any edges cross over non-source/target shapes? → Rearrange layout
Do any two edges share the same path? → Adjust exit/entry points
Are any connections at corners? → Use edge centers instead
Could rearranging shapes reduce crossings? → Revise layout

是否有连接线穿过非源/目标形状？→ 重新排列布局
是否有两条连接线路径重叠？→ 调整出口/入口点
是否有连接点在角落？→ 改用边的中心
重新排列形状能否减少交叉？→ 修改布局

Workflow

工作流

1. Understand the Request

1. 理解需求

Determine:

Diagram type: Cloud architecture, microservices, network, UML, ERD, etc.
Components: Systems, services, databases, actors involved
Relationships: Connections (sync/async, data flow, dependencies)

If the user provides a file (PDF, DOCX, TXT, MD), read it and extract entities, relationships, and processes.

确定：

图表类型：云架构、微服务、网络、UML、ERD等
组件：涉及的系统、服务、数据库、角色
关系：连接方式（同步/异步、数据流、依赖关系）

如果用户提供文件（PDF、DOCX、TXT、MD），读取并提取实体、关系和流程。

2. Read the Prompt References

2. 阅读提示参考资料

Before generating, read these files for rules and styling guidance:

```
references/drawio_system_prompt.txt
```
— the master system prompt with all XML rules
```
references/color_palette.md
```
— professional colors by component type
```
references/drawio_xml_rules.md
```
— quick-reference for mxGraph syntax

Also study

assets/example_simple.drawio

as a structural reference.

生成前，阅读以下文件获取规则和样式指导：

```
references/drawio_system_prompt.txt
```
— 包含所有XML规则的主系统提示
```
references/color_palette.md
```
— 按组件类型分类的专业配色方案
```
references/drawio_xml_rules.md
```
— mxGraph语法速查手册

同时参考

assets/example_simple.drawio

作为结构示例。

3. Select Stencils (if applicable)

3. 选择模板（如适用）

If the diagram involves vendor-specific icons (AWS, Azure, GCP, Cisco, Kubernetes, etc.):

Identify which stencil library to use from the table below
Read the corresponding
```
stencils/<category>.md
```
file for EXACT shape names
Note the required
```
fillColor
```
and recommended dimensions for each shape

NEVER guess stencil names — always verify against the stencil file.

如果图表涉及厂商特定图标（AWS、Azure、GCP、Cisco、Kubernetes等）：

从下表确定要使用的模板库
阅读对应的
```
stencils/<category>.md
```
文件获取精确的形状名称
记录每个形状所需的
```
fillColor
```
和推荐尺寸

绝不猜测模板名称 — 务必对照模板文件验证。

4. Plan the Layout (Multi-Phase for Complex Diagrams)

4. 规划布局（复杂图表分阶段进行）

For diagrams with >15 components, use this phased approach:

P1: Plan — Identify diagram type, choose canvas size, select stencil libraries. Plan element positions first, then derive zone boundaries.

P2: Zones — Write zone/container cells FIRST in XML (drawio renders by document order). Solid fill:

rounded=1;fillColor=#BAC8D3;strokeColor=none;opacity=60

. Dashed border:

rounded=1;dashed=1;dashPattern=8 8;fillColor=none;strokeColor=#0BA5C4

P3: Elements — Position shapes on grid (multiples of 10/20). Keep consistent device style per stencil family.
P4: Connections — Add edges last. Network links:
```
endArrow=none;endFill=0
```
. Data flow:
```
endArrow=classic
```
. Dashed for logical/VPN:
```
dashed=1
```
.
P5: Labels — Add floating text, legends. Verify every element has a
```
value
```
or adjacent label.
P6: Chunking — When a diagram exceeds ~30 elements, split XML output into chunks.

对于包含>15个组件的图表，使用以下分阶段方法：

P1：规划 — 确定图表类型，选择画布尺寸，选择模板库。先规划元素位置，再确定区域边界。
P2：区域 — 先在XML中编写区域/容器单元格（draw.io按文档顺序渲染）。实色填充：
```
rounded=1;fillColor=#BAC8D3;strokeColor=none;opacity=60
```
。虚线边框：
```
rounded=1;dashed=1;dashPattern=8 8;fillColor=none;strokeColor=#0BA5C4
```
。
P3：元素 — 将形状定位在网格上（坐标为10/20的倍数）。同一模板系列的设备样式保持一致。
P4：连接 — 最后添加连接线。网络链接：
```
endArrow=none;endFill=0
```
。数据流：
```
endArrow=classic
```
。逻辑/VPN连接用虚线：
```
dashed=1
```
。
P5：标签 — 添加浮动文本、图例。验证每个元素都有
```
value
```
或相邻标签。
P6：分块 — 当图表超过~30个元素时，将XML输出拆分为多个块。

5. Generate the Draw.io XML

5. 生成Draw.io XML

Following the system prompt rules, generate the complete mxFile XML. Key rules:

Use the exact root skeleton:
```
<mxfile>
```
→
```
<diagram>
```
→
```
<mxGraphModel>
```
→
```
<root>
```

Always include

<mxCell id="0"/>

and

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

Shapes:
```
vertex="1" parent="1"
```
with unique descriptive IDs
Edges:
```
edge="1" parent="1"
```
with valid
```
source
```
and
```
target
```
NEVER use
```
<Array>
```
elements — crashes draw.io
Use color palette by component type
Position shapes at grid multiples of 10 or 20
Labels match the user's language

Save the XML to a

.drawio

file using

write_to_file

遵循系统提示规则，生成完整的mxFile XML。核心规则：

使用精确的根结构：
```
<mxfile>
```
→
```
<diagram>
```
→
```
<mxGraphModel>
```
→
```
<root>
```

必须包含

<mxCell id="0"/>

和

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

形状：
```
vertex="1" parent="1"
```
，使用唯一的描述性ID
连接线：
```
edge="1" parent="1"
```
，包含有效的
```
source
```
和
```
target
```
绝不能使用
```
<Array>
```
元素——会导致draw.io崩溃
按组件类型使用配色方案
将形状定位在10或20倍数的网格上
标签使用用户的语言

使用

write_to_file

将XML保存为

.drawio

文件。

6. Validate (ReAct Loop)

6. 验证（ReAct循环）

Run the validator script on the saved file:

bash

python .agent/skills/drawio-generator/scripts/validate_drawio.py <output_file.drawio>

If ✅ valid → proceed to step 7
If ❌ errors → read the error messages, fix the XML, save again, re-validate
Repeat until all checks pass

Common fixes:

Duplicate IDs: Renumber cells sequentially
Broken edges: Ensure source/target IDs exist as vertex cells
Array elements: Remove
```
<Array>
```
children from edge geometries
Malformed XML: Fix unclosed tags, unescape
```
&
```
or
```
<
```
in labels

运行验证脚本检查保存的文件：

bash

python .agent/skills/drawio-generator/scripts/validate_drawio.py <output_file.drawio>

如果✅ 验证通过 → 进入步骤7
如果❌ 有错误 → 阅读错误信息，修复XML，重新保存，再次验证
重复直到所有检查通过

常见修复：

重复ID：按顺序重新编号单元格
无效连接线：确保source/target ID对应存在的顶点单元格
Array元素：移除edge geometries中的
```
<Array>
```
子元素
格式错误的XML：修复未闭合标签，转义标签中的
```
&
```
或
```
<
```

7. Deliver

7. 交付

Tell the user:

Where the
```
.drawio
```
file was saved
Brief design concept (what architectural decisions you made)
How to open: draw.io desktop, app.diagrams.net, or VS Code Draw.io extension

告知用户：

```
.drawio
```
文件的保存位置
简要设计思路（你做出的架构决策）
打开方式：draw.io桌面端、app.diagrams.net或VS Code Draw.io扩展

8. Iterative Refinement

8. 迭代优化

If the user wants changes to an existing diagram:

Read the current
```
.drawio
```
file
Modify the XML preserving existing IDs where possible
Save, validate, and deliver the updated file

如果用户需要修改现有图表：

读取当前的
```
.drawio
```
文件
修改XML，尽可能保留现有ID
保存、验证并交付更新后的文件

Stencil Libraries

模板库

drawio provides 8900+ pre-built stencils across 48 categories. Full stencil reference: See

stencils/*.md

files.

Category	Stencil File	Use Case
AWS	`aws4.md`	AWS cloud architecture (1031 shapes)
Azure	`azure.md` , `mscae.md`	Azure cloud & enterprise architecture
GCP	`gcp2.md`	Google Cloud architecture
Cisco	`cisco.md` , `cisco19.md` , `cisco_safe.md`	Network topology
Kubernetes	`kubernetes.md` , `kubernetes2.md`	Container orchestration
Network	`networks.md` , `networks2.md`	General network diagrams
Virtualization	`citrix.md` , `citrix2.md` , `veeam.md` , `vvd.md`	Infrastructure diagrams
Software	`bpmn.md` , `flowchart.md` , `sitemap.md` , `mockup.md`	Process & UI design
Hardware	`rack.md` , `cabinets.md` , `electrical.md`	Data center & electrical
Office	`office.md` , `atlassian.md` , `salesforce.md`	Business diagrams
Cloud (Other)	`alibaba_cloud.md` , `ibm_cloud.md`	Other cloud providers

drawio提供48个分类的8900+预构建模板。完整模板参考：查看

stencils/*.md

文件。

分类	模板文件	使用场景
AWS	`aws4.md`	AWS云架构（1031个形状）
Azure	`azure.md` , `mscae.md`	Azure云与企业架构
GCP	`gcp2.md`	Google Cloud架构
Cisco	`cisco.md` , `cisco19.md` , `cisco_safe.md`	网络拓扑
Kubernetes	`kubernetes.md` , `kubernetes2.md`	容器编排
Network	`networks.md` , `networks2.md`	通用网络图表
Virtualization	`citrix.md` , `citrix2.md` , `veeam.md` , `vvd.md`	基础设施图表
Software	`bpmn.md` , `flowchart.md` , `sitemap.md` , `mockup.md`	流程与UI设计
Hardware	`rack.md` , `cabinets.md` , `electrical.md`	数据中心与电气系统
Office	`office.md` , `atlassian.md` , `salesforce.md`	业务图表
Cloud (Other)	`alibaba_cloud.md` , `ibm_cloud.md`	其他云提供商

Stencil Usage Example

模板使用示例

xml

<!-- Cisco router with label below -->
<mxCell id="router1" value="Core Router" style="shape=mxgraph.cisco.routers.router;html=1;fillColor=#036897;strokeColor=#ffffff;strokeWidth=2;verticalLabelPosition=bottom;verticalAlign=top;labelPosition=center;align=center;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="53" as="geometry"/>
</mxCell>

<!-- AWS Lambda -->
<mxCell id="lambda1" value="Lambda" style="shape=mxgraph.aws4.lambda;html=1;fillColor=#ED7100;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="200" y="100" width="54" height="56" as="geometry"/>
</mxCell>

<!-- Kubernetes pod -->
<mxCell id="pod1" value="API Pod" style="shape=mxgraph.kubernetes.pod;html=1;fillColor=#326CE5;strokeColor=#ffffff;strokeWidth=2;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="300" y="100" width="50" height="50" as="geometry"/>
</mxCell>

xml

<!-- Cisco路由器，标签在下方 -->
<mxCell id="router1" value="核心路由器" style="shape=mxgraph.cisco.routers.router;html=1;fillColor=#036897;strokeColor=#ffffff;strokeWidth=2;verticalLabelPosition=bottom;verticalAlign=top;labelPosition=center;align=center;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="78" height="53" as="geometry"/>
</mxCell>

<!-- AWS Lambda -->
<mxCell id="lambda1" value="Lambda" style="shape=mxgraph.aws4.lambda;html=1;fillColor=#ED7100;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="200" y="100" width="54" height="56" as="geometry"/>
</mxCell>

<!-- Kubernetes Pod -->
<mxCell id="pod1" value="API Pod" style="shape=mxgraph.kubernetes.pod;html=1;fillColor=#326CE5;strokeColor=#ffffff;strokeWidth=2;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="300" y="100" width="50" height="50" as="geometry"/>
</mxCell>

Common Shapes Reference

常用形状参考

Basic Shapes

基础形状

xml

<mxCell id="rect" value="Box" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="20" y="20" width="100" height="50" as="geometry"/></mxCell>
<mxCell id="rounded" value="Rounded" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="140" y="20" width="100" height="50" as="geometry"/></mxCell>
<mxCell id="circle" value="Circle" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="260" y="10" width="70" height="70" as="geometry"/></mxCell>
<mxCell id="db" value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="350" y="5" width="60" height="80" as="geometry"/></mxCell>
<mxCell id="cloud" value="Cloud" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="430" y="10" width="100" height="70" as="geometry"/></mxCell>

xml

<mxCell id="rect" value="矩形" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="20" y="20" width="100" height="50" as="geometry"/></mxCell>
<mxCell id="rounded" value="圆角矩形" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="140" y="20" width="100" height="50" as="geometry"/></mxCell>
<mxCell id="circle" value="圆形" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="260" y="10" width="70" height="70" as="geometry"/></mxCell>
<mxCell id="db" value="数据库" style="shape=cylinder;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="350" y="5" width="60" height="80" as="geometry"/></mxCell>
<mxCell id="cloud" value="云" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;" vertex="1" parent="1">
  <mxGeometry x="430" y="10" width="100" height="70" as="geometry"/></mxCell>

Container / Swimlane

容器 / 泳道

xml

<!-- Swimlane with child elements (relative positioning) -->
<mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/></mxCell>
<mxCell id="step1" value="Step 1" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane1">
  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/></mxCell>

Note: Children use

parent="lane1"

with coordinates RELATIVE to the swimlane. Edges always use

parent="1"

xml

<!-- 包含子元素的泳道（相对定位） -->
<mxCell id="lane1" value="前端" style="swimlane;" vertex="1" parent="1">
  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/></mxCell>
<mxCell id="step1" value="步骤1" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane1">
  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/></mxCell>

注意：子元素使用

parent="lane1"

，坐标为相对于泳道的相对坐标。连接线始终使用

parent="1"

。

Edge Patterns

连接线样式

xml

<!-- Basic directional edge -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/></mxCell>

<!-- Bidirectional: use different exit/entry Y positions -->
<mxCell id="e1" value="Request" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.3;entryX=0;entryY=0.3;endArrow=classic;html=1;" edge="1" parent="1" source="nodeA" target="nodeB">
  <mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="e2" value="Response" style="edgeStyle=orthogonalEdgeStyle;exitX=0;exitY=0.7;entryX=1;entryY=0.7;endArrow=classic;html=1;" edge="1" parent="1" source="nodeB" target="nodeA">
  <mxGeometry relative="1" as="geometry"/></mxCell>

xml

<!-- 基础有向连接线 -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry"/></mxCell>

<!-- 双向连接：使用不同的Y轴出口/入口位置 -->
<mxCell id="e1" value="请求" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.3;entryX=0;entryY=0.3;endArrow=classic;html=1;" edge="1" parent="1" source="nodeA" target="nodeB">
  <mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="e2" value="响应" style="edgeStyle=orthogonalEdgeStyle;exitX=0;exitY=0.7;entryX=1;entryY=0.7;endArrow=classic;html=1;" edge="1" parent="1" source="nodeB" target="nodeA">
  <mxGeometry relative="1" as="geometry"/></mxCell>

Common Style Reference

常用样式参考

Arrow Types: Inheritance(

endArrow=block;endFill=0

) Implementation(

endArrow=block;endFill=0;dashed=1

) Association(

endArrow=open;endFill=1

) Dependency(

endArrow=open;dashed=1

) Aggregation(

startArrow=diamondThin;startFill=0

) Composition(

startArrow=diamondThin;startFill=1

)

Shape Styles:
```
rounded
```
(0,1)
```
fillColor
```
(hex)
```
strokeColor
```
(hex)
```
strokeWidth
```
(num)
```
dashed
```
(0,1)
```
opacity
```
(0-100)
```
fontColor
```
(hex)
```
fontSize
```
(num)
```
fontStyle
```
(0=normal,1=bold,2=italic,3=both)
```
align
```
(left,center,right)
```
verticalAlign
```
(top,middle,bottom)
```
shadow
```
(0,1)
Edge Styles:
```
edgeStyle
```
(orthogonalEdgeStyle,entityRelationEdgeStyle,elbowEdgeStyle)
```
curved
```
(0,1)
```
endArrow
```
/
```
startArrow
```
(classic,block,open,oval,diamond,none)
```
endFill
```
/
```
startFill
```
(0=hollow,1=filled)

State Colors: Pending(

#dae8fc

#6c8ebf

) Success(

#d5e8d4

#82b366

) Error(

#f8cecc

#b85450

) Warning(

#fff2cc

#d6b656

) Complete(

#e1d5e7

#9673a6

)

箭头类型：继承(

endArrow=block;endFill=0

) 实现(

endArrow=block;endFill=0;dashed=1

) 关联(

endArrow=open;endFill=1

) 依赖(

endArrow=open;dashed=1

) 聚合(

startArrow=diamondThin;startFill=0

) 组合(

startArrow=diamondThin;startFill=1

)

形状样式：
```
rounded
```
(0,1)
```
fillColor
```
(十六进制)
```
strokeColor
```
(十六进制)
```
strokeWidth
```
(数字)
```
dashed
```
(0,1)
```
opacity
```
(0-100)
```
fontColor
```
(十六进制)
```
fontSize
```
(数字)
```
fontStyle
```
(0=正常,1=粗体,2=斜体,3=粗斜体)
```
align
```
(left,center,right)
```
verticalAlign
```
(top,middle,bottom)
```
shadow
```
(0,1)
连接线样式：
```
edgeStyle
```
(orthogonalEdgeStyle,entityRelationEdgeStyle,elbowEdgeStyle)
```
curved
```
(0,1)
```
endArrow
```
/
```
startArrow
```
(classic,block,open,oval,diamond,none)
```
endFill
```
/
```
startFill
```
(0=空心,1=实心)

状态颜色：待处理(

#dae8fc

#6c8ebf

) 成功(

#d5e8d4

#82b366

) 错误(

#f8cecc

#b85450

) 警告(

#fff2cc

#d6b656

) 完成(

#e1d5e7

#9673a6

)

Common Pitfalls

常见陷阱

Issue	Solution
Shape not visible	Verify `vertex="1"` and `parent="1"` attributes
Edge not connecting	Ensure `source` and `target` match cell IDs
Styles not applying	Check semicolon separators in style string
Text not showing	Add `html=1;whiteSpace=wrap;` to style
Stencil not rendering	Verify exact name in `stencils/*.md` , add `fillColor`
Edges crossing shapes	Rearrange layout to minimize crossings
Multiple edges overlapping	Use different `exitY` / `entryY` values (0.3 and 0.7)
Corner connections look ugly	Use edge centers instead ( `exitX=1,exitY=0.5` )
Diagram too spread out	Keep within x: 0-800, y: 0-600 viewport
XML crashes draw.io	Remove `<Array>` elements, fix unclosed tags

问题	解决方案
形状不可见	验证 `vertex="1"` 和 `parent="1"` 属性是否存在
连接线未连接	确保 `source` 和 `target` 匹配单元格ID
样式未生效	检查样式字符串中的分号分隔符
文本未显示	在样式中添加 `html=1;whiteSpace=wrap;`
模板未渲染	验证 `stencils/*.md` 中的精确名称，添加 `fillColor`
连接线穿过形状	重新排列布局以减少交叉
多条连接线重叠	使用不同的 `exitY` / `entryY` 值（如0.3和0.7）
角落连接不美观	改用边的中心（如 `exitX=1,exitY=0.5` ）
图表过于分散	将元素限制在x:0-800，y:0-600的视口范围内
XML导致draw.io崩溃	移除 `<Array>` 元素，修复未闭合标签

Tips for AI Generation

AI生成技巧

Plan layout first: Sketch positions mentally before writing XML — identify potential edge crossings
Use grid alignment: Position shapes at multiples of 10 or 20
Unique IDs: Use descriptive IDs like
```
client
```
,
```
server
```
,
```
db
```
instead of random strings
Consistent spacing: Keep 40-60px gaps between connected shapes; 150-200px for routing channels
Layer backgrounds first: Define zone/container cells before shapes inside them
Color zones: Use light background colors with
```
strokeColor=none
```
for region highlighting
Verify edges mentally: Before generating, trace each edge and ask "Does this cross any shape?"
Escape special characters: Use
```
&lt;
```
for <,
```
&gt;
```
for >,
```
&amp;
```
for &,
```
&quot;
```
for "

先规划布局：编写XML前在脑海中勾勒位置——识别潜在的连接线交叉
使用网格对齐：将形状定位在10或20倍数的坐标上
唯一ID：使用描述性ID如
```
client
```
、
```
server
```
、
```
db
```
而非随机字符串
一致间距：相连形状之间保持40-60px间隙；组间路由通道保持150-200px
先绘制背景层：先定义区域/容器单元格，再添加内部形状
区域配色：使用浅色背景色并设置
```
strokeColor=none
```
突出显示区域
预先验证连接线：生成前在脑海中追踪每条连接线，问“这条线会穿过其他形状吗？”
转义特殊字符：使用
```
&lt;
```
表示<，
```
&gt;
```
表示>，
```
&amp;
```
表示&，
```
&quot;
```
表示"

Files

文件说明

Path	Purpose
`scripts/validate_drawio.py`	XML validator — run after every generation
`references/drawio_system_prompt.txt`	Master system prompt with all mxGraph rules
`references/drawio_xml_rules.md`	Quick-reference for XML syntax
`references/color_palette.md`	Professional colors by component type
`assets/example_simple.drawio`	Working example for structural reference
`stencils/*.md`	Stencil libraries — 48 categories, 8900+ shapes

路径	用途
`scripts/validate_drawio.py`	XML验证工具——每次生成后运行
`references/drawio_system_prompt.txt`	包含所有mxGraph规则的主系统提示
`references/drawio_xml_rules.md`	XML语法速查手册
`references/color_palette.md`	按组件类型分类的专业配色方案
`assets/example_simple.drawio`	用于结构参考的可运行示例
`stencils/*.md`	模板库——48个分类，8900+个形状