drawio

drawio 图表生成器

快速入门： 创建 <mxfile> 和 <diagram> → 定义带网格设置的 <mxGraphModel> → 添加包含单元格的 <root> → 使用 <mxCell> 创建形状和边 → 使用 <mxGeometry> 设置几何属性 → 用 ```drawio 围栏包裹。

关键规则

结构规则

• S1：检查图形库名称 🚨 切勿猜测图形库名称。请查看 stencils/README.md 中的确切名称。错误：mxgraph.cisco.router → 正确：mxgraph.cisco.routers.router
• S2：图形库图形需要 fillColor 许多图形库图形没有默认颜色。请始终添加 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）

布局规则

• L1：起始边距 从 x=40、y=40 开始定位。
• L2：元素间距 相连形状之间保持 40-60px 间距；路由通道间距为 150-200px。
• L3：紧凑布局 使用纵向堆叠或网格布局。避免将元素分散得过远。

边路由规则——对绘制清晰的图表至关重要

• 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：绕开障碍物布线 如果源和目标之间有任何形状，请使用路径点，并留出 20-30px 间距。切勿让边穿过形状。
• E5：先规划布局 将形状排列成列或行。在脑海中追踪每条边：“源和目标之间有哪些形状？”
• E6：使用多个路径点 对于 L 形或 U 形路径，使用 2-3 个路径点。每次改变方向都需要一个路径点。
• E7：选择自然连接点 切勿使用角点（entryX=1,entryY=1）。从上到下：exitY=1、entryY=0。从左到右：exitX=1、entryX=0。
• E8：对角路由原则 对角连接相距较远的节点时，沿图表的外围（外侧边缘）布线，而不要穿过其他形状所在的中间区域。

生成前检查清单

1. 是否有边穿过非源/目标形状？→ 添加路径点
2. 是否有两条边共用同一路径？→ 调整出口/入口点
3. 是否有连接位于角点？→ 改用边的中心
4. 调整形状位置是否能减少交叉？→ 修改布局

多阶段生成工作流

复杂图表应按顺序分阶段生成。将每个阶段分别输出为一个区块，以便控制 XML 的复杂度并减少错误。

• P1：规划 确定图表类型：拓扑图（包含边）或空间图（仅布局，例如平面图）。选择画布大小，从 stencils/README.md 中选择模板库。先规划元素位置，再根据元素布局确定区域边界——不知道区域内有什么，就无法确定区域大小。
• P2：区域（XML 输出顺序） 虽然区域是在元素之后规划的（P1），但必须在 XML 中先写入——drawio 按文档顺序渲染，因此较早出现的单元格会显示在较晚出现的单元格后面。实心填充：rounded=1;fillColor=#BAC8D3;strokeColor=none;opacity=60。虚线边框：rounded=1;dashed=1;dashPattern=8 8;fillColor=none;strokeColor=#0BA5C4。区域标签使用单独的 text 单元格。总线（如有需要）：shape=line;strokeColor=#23445D。
• P3：元素 将形状定位在网格上（间隔为 10/20 的倍数）。组内间距保持在 40-60px，组间路由通道保持在 150-200px。每个模板系列采用一致的设备样式（例如，Cisco：fillColor=#036897;strokeColor=#ffffff;strokeWidth=2）。
• P4：连接 空间图（平面图、线框图）跳过此阶段——这类图表依靠邻近关系，而非边。对于拓扑图，最后添加边。网络链路：endArrow=none;endFill=0。数据流：endArrow=classic。逻辑连接/VPN 使用虚线：dashed=1。在脑海中追踪每条边，避免其穿过形状。
• P5：标签 添加浮动文本、图例和尺寸线。空间图的标签承载更多语义信息。确认每个元素都有 value 或相邻的标签单元格。
• P6：分块 当图表元素超过约 30 个时，将 XML 输出拆分：区块 1 = 标头 + 区域 + 第一组元素，区块 2 = 剩余元素，区块 3 = 所有边 + 闭合标签。

常见形状

基本形状

<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>

容器/泳道

<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>

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

<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"（主画布）。

模板库

drawio 提供 48 个类别、8,900 多个预置模板，用于绘制专业图表。完整模板参考： 请参阅 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	业务图表

<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>

通用样式参考

• 箭头类型： 继承（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=填充）

边示例

基本边

<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>

同一组节点之间的两条边（不重叠）

<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>

带路径点的边（绕过障碍物）

<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>

对角线路径（周边模式）

连接被障碍物隔开的远距离节点时，沿外侧周边布线：

<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 节点旁绕过。

完整示例：简单架构

<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>

常见问题

问题	解决方案
形状不可见	检查 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 中绝不要包含 ``

AI 生成提示

1. 先规划布局：编写 XML 前先在脑中勾勒位置——找出可能交叉的边
2. 使用网格对齐：将形状放置在 10 或 20 的倍数坐标上
3. 使用唯一 ID：使用 client、server、db 等描述性 ID，而非随机字符串
4. 保持间距一致：相连形状之间留出 40-60px 的间距；布线通道留出 150-200px
5. 先绘制背景层：在定义内部形状之前，先定义区域/容器单元格
6. 为区域着色：使用浅色背景，并设置 strokeColor=none 以突出显示区域
7. 在脑中检查边：生成前，沿每条边检查并确认“它会穿过任何形状吗？”
8. 转义特殊字符：使用 < 表示 <，> 表示 >，& 表示 &，" 表示 "

资源

• drawio 文档
• mxGraph API 参考