Back to Details

drawio

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

drawio Diagram Generator

drawio 图表生成器

Quick Start: Create 
<mxfile>
with 
<diagram>
→ Define 
<mxGraphModel>
with grid settings → Add 
<root>
with cells → Use 
<mxCell>
for shapes and edges → Set geometry with 
<mxGeometry>
→ Wrap in 
```drawio
fence.
快速入门： 创建包含
<diagram>
的
<mxfile>
→ 定义带有网格设置的
<mxGraphModel>
→ 添加包含单元格的
<root>
→ 使用
<mxCell>
创建形状和连接线 → 通过
<mxGeometry>
设置几何属性 → 用
```drawio
代码块包裹内容。

Critical Rules

关键规则

Structure Rules

结构规则

  • S1: Check Stencil Names 🚨 NEVER guess stencil names. Check stencils/README.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 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.
Preset Color Palette: Blue(
#dae8fc
,
#6c8ebf
) Green(
#d5e8d4
,
#82b366
) Orange(
#ffe6cc
,
#d79b00
) Red(
#f8cecc
,
#b85450
) Purple(
#e1d5e7
,
#9673a6
) Yellow(
#fff2cc
,
#d6b656
) Gray(
#f5f5f5
,
#666666
)
  • S1: 核对模具名称 🚨 绝对不要猜测模具名称，请查看stencils/README.md获取准确名称。错误示例：
    mxgraph.cisco.router
    → 正确示例：
    mxgraph.cisco.routers.router
  • S2: 模具需设置填充色 许多模具没有默认颜色，务必添加
    fillColor
    /
    strokeColor
    属性。例外：连接线/链路模具属于连接器，不属于设备类，无需设置。
  • 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;
    设置背景透明，避免遮挡内部元素。
预设调色板： 蓝色(
#dae8fc
,
#6c8ebf
) 绿色(
#d5e8d4
,
#82b366
) 橙色(
#ffe6cc
,
#d79b00
) 红色(
#f8cecc
,
#b85450
) 紫色(
#e1d5e7
,
#9673a6
) 黄色(
#fff2cc
,
#d6b656
) 灰色(
#f5f5f5
,
#666666
)

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.
  • L3: Compact Layouts Use vertical stacking or grid layouts. Avoid spreading elements too far apart.
  • L1: 起始边距 从x=40、y=40的位置开始布局。
  • L2: 元素间距 相连形状之间保持40-60px的间距；路由通道预留150-200px的空间。
  • L3: 紧凑布局 使用垂直堆叠或网格布局，避免元素过度分散。

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, use waypoints. Add 20-30px clearance. NEVER let edges cross over shapes.
  • E5: Plan Layout First Organize shapes into columns/rows. Trace each edge mentally: "What shapes are between source and target?"
  • E6: Multiple Waypoints Use 2-3 waypoints for L-shaped or U-shaped paths. Each direction change needs a waypoint.
  • E7: Natural Connection Points NEVER use corners (
    entryX=1,entryY=1
    ). Top-to-bottom: 
    exitY=1
    , 
    entryY=0
    . Left-to-right: 
    exitX=1
    , 
    entryX=0
    .
  • E8: Diagonal Routing Principle When connecting distant nodes diagonally, route along the PERIMETER (outside edge) 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: 绕开障碍物 如果源节点和目标节点之间存在其他形状，使用路径点（waypoints），并预留20-30px的空隙。绝对不要让连接线穿过形状。
  • E5: 先规划布局 将形状按列/行排列，在脑海中模拟每条连接线的路径：“源节点和目标节点之间有哪些形状？”
  • E6: 多路径点使用 L型或U型路径使用2-3个路径点，每次方向改变都需要一个路径点。
  • E7: 自然连接点 绝对不要使用角落作为连接点（如
    entryX=1,entryY=1
    ）。上下连接：
    exitY=1
    ，
    entryY=0
    ；左右连接：
    exitX=1
    ，
    entryX=0
    。
  • E8: 对角线路由原则 连接远距离节点且中间有障碍物时，沿图表外围路由，不要穿过中间的其他形状。

Pre-Generation Checklist

生成前检查清单

  1. Do any edges cross over non-source/target shapes? → Add waypoints
  2. Do any two edges share the same path? → Adjust exit/entry points
  3. Are any connections at corners? → Use edge centers instead
  4. Could rearranging shapes reduce crossings? → Revise layout
  1. 是否有连接线穿过非源/目标形状？→ 添加路径点
  2. 是否有两条连接线路径重叠？→ 调整出口/入口位置
  3. 是否有角落连接？→ 改用边的中心位置
  4. 重新排列形状能否减少交叉？→ 修改布局

Common Shapes

常见形状

Basic Shapes

基础形状

drawio
<mxfile><diagram name="Basic Shapes" id="basic-shapes"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <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="diamond" value="Decision" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="350" 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="440" 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="520" y="10" width="100" height="70" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>
drawio
<mxfile><diagram name="Basic Shapes" id="basic-shapes"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <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="diamond" value="Decision" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="350" 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="440" 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="520" y="10" width="100" height="70" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

Container/Swimlane

容器/泳道

drawio
<mxfile><diagram name="Container Example" id="container-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="container" value="Container" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="200" height="150" as="geometry"/>
  </mxCell>
  <mxCell id="zone" value="Zone Name" style="whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;verticalAlign=top;fontSize=14;" vertex="1" parent="1"><mxGeometry x="280" y="40" width="200" height="150" as="geometry"/>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>
drawio
<mxfile><diagram name="Container Example" id="container-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="container" value="Container" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="200" height="150" as="geometry"/>
  </mxCell>
  <mxCell id="zone" value="Zone Name" style="whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;verticalAlign=top;fontSize=14;" vertex="1" parent="1"><mxGeometry x="280" y="40" width="200" height="150" as="geometry"/>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>

Swimlane with Child Elements (Relative Positioning)

包含子元素的泳道（相对定位）

drawio
<mxfile><diagram name="Swimlane" id="swimlane-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <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>
  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1"><mxGeometry x="280" y="40" width="200" height="200" as="geometry"/></mxCell>
  <mxCell id="step2" value="Step 2" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane2"><mxGeometry x="20" y="60" width="160" height="40" as="geometry"/></mxCell>
  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="step1" target="step2"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>
Note: Child elements (
step1
, 
step2
) use 
parent="lane1"
/ 
parent="lane2"
with coordinates RELATIVE to the swimlane. Edges always use 
parent="1"
(main canvas).
drawio
<mxfile><diagram name="Swimlane" id="swimlane-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <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>
  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1"><mxGeometry x="280" y="40" width="200" height="200" as="geometry"/></mxCell>
  <mxCell id="step2" value="Step 2" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="lane2"><mxGeometry x="20" y="60" width="160" height="40" as="geometry"/></mxCell>
  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="step1" target="step2"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>
注意： 子元素（
step1
、
step2
）使用
parent="lane1"
/ 
parent="lane2"
，坐标为相对于泳道的位置。连接线始终使用
parent="1"
（主画布）。

Stencil Libraries

模具库

drawio provides 8900+ pre-built stencils across 48 categories for professional diagrams. Full stencil reference: See stencils/README.md.
CategoryExamplesUse Case
Cloud
aws4
, 
azure
, 
gcp2
, 
alibaba_cloud
, 
ibm_cloud
Cloud architecture diagrams
Network
cisco
, 
cisco19
, 
cisco_safe
, 
networks
, 
networks2
Network topology
Virtualization
citrix
, 
citrix2
, 
veeam
, 
vvd
, 
kubernetes
Infrastructure diagrams
Software
bpmn
, 
flowchart
, 
sitemap
, 
mockup
Process & UI design
Hardware
rack
, 
cabinets
, 
electrical
Data center & electrical
Office
office
, 
atlassian
, 
salesforce
Business diagrams
drawio
<mxfile><diagram name="Stencil Example" id="stencil-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
<mxCell id="router" value="" style="shape=mxgraph.cisco.routers.router;html=1;fillColor=#036897;strokeColor=#ffffff;strokeWidth=2;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="78" height="53" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>
drawio提供8900+种预构建模具，涵盖48个分类，可用于制作专业图表。完整模具参考： 查看stencils/README.md。
分类示例适用场景
云服务
aws4
, 
azure
, 
gcp2
, 
alibaba_cloud
, 
ibm_cloud
云架构图
网络
cisco
, 
cisco19
, 
cisco_safe
, 
networks
, 
networks2
网络拓扑图
虚拟化
citrix
, 
citrix2
, 
veeam
, 
vvd
, 
kubernetes
基础设施图
软件
bpmn
, 
flowchart
, 
sitemap
, 
mockup
流程与UI设计
硬件
rack
, 
cabinets
, 
electrical
数据中心与电气图
办公
office
, 
atlassian
, 
salesforce
业务图表
drawio
<mxfile><diagram name="Stencil Example" id="stencil-ex"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
<mxCell id="router" value="" style="shape=mxgraph.cisco.routers.router;html=1;fillColor=#036897;strokeColor=#ffffff;strokeWidth=2;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="78" height="53" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

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
    )
  • Visibility Symbols: 
    +
    (public) 
    #
    (protected) 
    -
    (private) 
    ~
    (package) 
    /
    (derived)
  • State Colors: Pending(
    #dae8fc
    ,
    #6c8ebf
    ) Success(
    #d5e8d4
    ,
    #82b366
    ) Error(
    #f8cecc
    ,
    #b85450
    ) Warning(
    #fff2cc
    ,
    #d6b656
    ) Complete(
    #e1d5e7
    ,
    #9673a6
    )
  • 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)
  • Edge Styles: 
    edgeStyle
    (orthogonalEdgeStyle,entityRelationEdgeStyle,elbowEdgeStyle) 
    curved
    (0,1) 
    endArrow
    /
    startArrow
    (classic,block,open,oval,diamond,none) 
    endFill
    /
    startFill
    (0=hollow,1=filled)
  • 箭头类型： 继承(
    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
    )
  • 可见性符号： 
    +
    (公共) 
    #
    (保护) 
    -
    (私有) 
    ~
    (包) 
    /
    (派生)
  • 状态颜色： 待处理(
    #dae8fc
    ,
    #6c8ebf
    ) 成功(
    #d5e8d4
    ,
    #82b366
    ) 错误(
    #f8cecc
    ,
    #b85450
    ) 警告(
    #fff2cc
    ,
    #d6b656
    ) 完成(
    #e1d5e7
    ,
    #9673a6
    )
  • 形状样式： 
    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)
  • 连接线样式： 
    edgeStyle
    (orthogonalEdgeStyle,entityRelationEdgeStyle,elbowEdgeStyle) 
    curved
    (0,1) 
    endArrow
    /
    startArrow
    (classic,block,open,oval,diamond,none) 
    endFill
    /
    startFill
    (0=空心,1=实心)

Edge Examples

连接线示例

Basic Edge

基础连接线

drawio
<mxfile><diagram name="Edge Examples" id="edge-examples"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="a1" value="A" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="20" width="60" height="30" as="geometry"/></mxCell>
  <mxCell id="b1" value="B" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="20" width="60" height="30" as="geometry"/></mxCell>
  <mxCell style="endArrow=classic;html=1;" edge="1" parent="1" source="a1" target="b1"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell id="a2" value="C" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="80" width="60" height="30" as="geometry"/></mxCell>
  <mxCell id="b2" value="D" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="80" width="60" height="30" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;dashed=1;html=1;" edge="1" parent="1" source="a2" target="b2"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>
drawio
<mxfile><diagram name="Edge Examples" id="edge-examples"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="a1" value="A" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="20" width="60" height="30" as="geometry"/></mxCell>
  <mxCell id="b1" value="B" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="20" width="60" height="30" as="geometry"/></mxCell>
  <mxCell style="endArrow=classic;html=1;" edge="1" parent="1" source="a1" target="b1"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell id="a2" value="C" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="20" y="80" width="60" height="30" as="geometry"/></mxCell>
  <mxCell id="b2" value="D" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="140" y="80" width="60" height="30" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;dashed=1;html=1;" edge="1" parent="1" source="a2" target="b2"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram></mxfile>

Two Edges Between Same Nodes (No Overlap)

同一节点间的两条连接线（无重叠）

drawio
<mxfile><diagram name="Bidirectional" id="bidir"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="nodeA" value="A" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="60" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="nodeB" value="B" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="60" width="80" height="40" as="geometry"/></mxCell>
  <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>
</root></mxGraphModel></diagram></mxfile>
drawio
<mxfile><diagram name="Bidirectional" id="bidir"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="nodeA" value="A" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="60" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="nodeB" value="B" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="60" width="80" height="40" as="geometry"/></mxCell>
  <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>
</root></mxGraphModel></diagram></mxfile>

Edge with Waypoints (Routing Around Obstacle)

带路径点的连接线（绕开障碍物）

drawio
<mxfile><diagram name="Waypoints" id="waypoints"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="src" value="Source" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="obstacle" value="Obstacle" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1"><mxGeometry x="160" y="100" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="tgt" value="Target" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="280" y="160" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.5;entryX=0.5;entryY=0;endArrow=classic;html=1;" edge="1" parent="1" source="src" target="tgt">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="320" y="60"/>
      </Array>
    </mxGeometry>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>
drawio
<mxfile><diagram name="Waypoints" id="waypoints"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="src" value="Source" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="obstacle" value="Obstacle" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1"><mxGeometry x="160" y="100" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="tgt" value="Target" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="280" y="160" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.5;entryX=0.5;entryY=0;endArrow=classic;html=1;" edge="1" parent="1" source="src" target="tgt">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="320" y="60"/>
      </Array>
    </mxGeometry>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>

Diagonal Routing (Perimeter Pattern)

对角线路由（外围模式）

When connecting distant nodes diagonally with obstacles in between, route along the OUTSIDE perimeter:
drawio
<mxfile><diagram name="Perimeter" id="perimeter"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="main" value="Main" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="40" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="develop" value="Develop" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="120" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="hotfix" value="Hotfix" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="350" y="200" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="hotfix_to_main" style="edgeStyle=orthogonalEdgeStyle;exitX=0.5;exitY=0;entryX=1;entryY=0.5;endArrow=classic;html=1;" edge="1" parent="1" source="hotfix" target="main">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="390" y="60"/>
      </Array>
    </mxGeometry>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>
Key: Route goes RIGHT (x=390) then UP, avoiding the Develop node in the middle.
连接远距离节点且中间有障碍物时，沿图表外围路由：
drawio
<mxfile><diagram name="Perimeter" id="perimeter"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="main" value="Main" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="40" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="develop" value="Develop" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="200" y="120" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="hotfix" value="Hotfix" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="350" y="200" width="80" height="40" as="geometry"/></mxCell>
  <mxCell id="hotfix_to_main" style="edgeStyle=orthogonalEdgeStyle;exitX=0.5;exitY=0;entryX=1;entryY=0.5;endArrow=classic;html=1;" edge="1" parent="1" source="hotfix" target="main">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="390" y="60"/>
      </Array>
    </mxGeometry>
  </mxCell>
</root></mxGraphModel></diagram></mxfile>
关键： 连接线先向右（x=390）再向上，避开中间的Develop节点。

Complete Example: Simple Architecture

完整示例：简单架构图

drawio
<mxfile><diagram name="Architecture" id="arch-1"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="client" value="Client" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="40" y="100" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="server" value="Server" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="240" y="100" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="db" value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry x="440" y="85" width="80" height="80" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="client" target="server"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="server" target="db"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram</mxfile>
drawio
<mxfile><diagram name="Architecture" id="arch-1"><mxGraphModel dx="800" dy="600" grid="1" gridSize="10"><root><mxCell id="0"/><mxCell id="1" parent="0"/>
  <mxCell id="client" value="Client" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry x="40" y="100" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="server" value="Server" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry x="240" y="100" width="100" height="50" as="geometry"/></mxCell>
  <mxCell id="db" value="Database" style="shape=cylinder;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry x="440" y="85" width="80" height="80" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="client" target="server"><mxGeometry relative="1" as="geometry"/></mxCell>
  <mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=classic;" edge="1" parent="1" source="server" target="db"><mxGeometry relative="1" as="geometry"/></mxCell>
</root></mxGraphModel></diagram</mxfile>

Common Pitfalls

常见问题

IssueSolution
Shape not visibleVerify 
vertex="1"
and 
parent="1"
attributes
Edge not connectingEnsure 
source
and 
target
match cell IDs
Styles not applyingCheck semicolon separators in style string
Text not showingAdd 
html=1;whiteSpace=wrap;
to style
Edges crossing shapesUse waypoints to route around obstacles
Multiple edges overlappingUse different 
exitY
/
entryY
values (0.3 and 0.7)
Corner connections look uglyUse edge centers instead (
exitX=1,exitY=0.5
)
Diagram too spread outKeep within x: 0-800, y: 0-600 viewport
XML comments break editingNEVER include 
<!-- ... -->
in generated XML
问题解决方案
形状不可见验证
vertex="1"
和
parent="1"
属性是否存在
连接线未连接确保
source
和
target
与单元格ID匹配
样式未生效检查样式字符串中的分号分隔符是否正确
文本未显示在样式中添加
html=1;whiteSpace=wrap;
连接线穿过形状使用路径点绕开障碍物
多条连接线重叠使用不同的
exitY
/
entryY
值（如0.3和0.7）
角落连接不美观改用边的中心位置（如
exitX=1,exitY=0.5
）
图表过于分散将元素限制在x:0-800、y:0-600的视口范围内
XML注释导致编辑失败绝对不要在生成的XML中包含
<!-- ... -->
注释

Tips for AI Generation

AI生成技巧

  1. Plan layout first: Sketch positions mentally before writing XML — identify potential edge crossings
  2. Use grid alignment: Position shapes at multiples of 10 or 20
  3. Unique IDs: Use descriptive IDs like 
    client
    , 
    server
    , 
    db
    instead of random strings
  4. Consistent spacing: Keep 40-60px gaps between connected shapes; 150-200px for routing channels
  5. Layer backgrounds first: Define zone/container cells before shapes inside them
  6. Color zones: Use light background colors with 
    strokeColor=none
    for region highlighting
  7. Verify edges mentally: Before generating, trace each edge and ask "Does this cross any shape?"
  8. Escape special characters: Use 
    &lt;
    for <, 
    &gt;
    for >, 
    &amp;
    for &, 
    &quot;
    for "
  1. 先规划布局：在编写XML前在脑海中勾勒位置，预判可能的连接线交叉问题
  2. 使用网格对齐：将形状定位在10或20的倍数坐标上
  3. 唯一ID：使用描述性ID如
    client
    、
    server
    、
    db
    ，而非随机字符串
  4. 间距一致：相连形状之间保持40-60px的间距；路由通道预留150-200px空间
  5. 先绘制背景层：先定义区域/容器单元格，再添加内部形状
  6. 颜色分区：使用浅色背景色并设置
    strokeColor=none
    来高亮区域
  7. 提前验证连接线：生成前在脑海中模拟每条连接线的路径，确认是否穿过形状
  8. 转义特殊字符：使用
    &lt;
    表示<，
    &gt;
    表示>，
    &amp;
    表示&，
    &quot;
    表示"

Resources

资源