/legal-visualization

draw.io XML 参考

详细记录 draw.io 图表的样式属性、连线路由和容器用法。

基础结构

<mxGraphModel adaptiveColors="auto">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- 所有节点和连线从 id=2 开始，parent="1" -->
  </root>
</mxGraphModel>

关键规则：

• id="0" 和 id="1" 是保留节点，禁止删除或修改
• 所有顶层元素 parent="1"
• 子元素（容器内）parent="容器id"，使用相对坐标

常见样式

节点样式属性

限定形状

法律图只使用以下节点形状。角色、主题和状态样式优先由 scripts/apply_visual_roles.py 从 VizSpec 编译，不要手工复制主题色。

圆角矩形（默认）：

style="rounded=1;whiteSpace=wrap;fillColor=#E3F2FD;strokeColor=#1976D2;strokeWidth=2;"

菱形（判断/决策）：

<mxCell id="decision-1" value="条件是否满足？" visualRole="decision"
  style="rhombus;whiteSpace=wrap;fillColor=#FFF3E0;strokeColor=#EF6C00;strokeWidth=2;"
  vertex="1" parent="1">
  <mxGeometry x="320" y="160" width="160" height="110" as="geometry"/>
</mxCell>

rect 仅用于表格单元格和细小分隔块；分区使用 swimlane 或 container=1。椭圆、圆柱、文档形、六边形、人形、双椭圆等不规则形状不属于正式法律图的限定清单，shape_policy 会告警。

连线（Edge）规则

⚠️ 最重要规则：每个 edge 必须有子元素

<!-- ❌ 错误：自闭合 edge 不会渲染 -->
<mxCell id="e1" edge="1" source="2" target="3" .../>

<!-- ✅ 正确：包含 mxGeometry 子元素 -->
<mxCell id="e1" edge="1" source="2" target="3" ...>
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

正交连线（直角转弯）

<mxCell id="e1" value="标签" 
  style="endArrow=classic;strokeWidth=2;strokeColor=#78909C;exitX=1;exitY=0.5;entryX=0;entryY=0.5;edgeStyle=orthogonalEdgeStyle;curved=1;"
  edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

箭头类型

连线方向控制

从上到下：exitX=0.5;exitY=1; entryX=0.5;entryY=0;

从左到右：exitX=1;exitY=0.5; entryX=0;entryY=0.5;

从下到上：exitX=0.5;exitY=0; entryX=0.5;entryY=1;

从右到左：exitX=0;exitY=0.5; entryX=1;entryY=0.5;

带弯角的连线

<mxCell id="e1" style="endArrow=classic;edgeStyle=orthogonalEdgeStyle;rounded=1;" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry">
    <Array as="points">
      <mxPoint x="300" y="150"/>
    </Array>
  </mxGeometry>
</mxCell>

容器（Container）

不可见分组容器

<mxCell id="grp1" value="" style="group;" vertex="1" parent="1">
  <mxGeometry x="60" y="80" width="600" height="300" as="geometry"/>
</mxCell>
<mxCell id="c1" value="子节点" style="..." vertex="1" parent="grp1">
  <mxGeometry x="10" y="10" width="120" height="60" as="geometry"/>
</mxCell>

领域校验器会把真实祖先/后代关系视为合法包含，不报告碰撞。若因兼容旧模板必须把背景框和内部节点都保留为 parent="1"，应在背景框 style 中显式增加 container=1；不要依赖节点 ID 或中文名称猜测容器语义。

泳道容器（Swimlane）

<mxCell id="lane1" value="区域名称" style="swimlane;startSize=30;fillColor=#F5F5F5;strokeColor=#BDBDBD;strokeWidth=2;" vertex="1" parent="1">
  <mxGeometry x="60" y="80" width="600" height="300" as="geometry"/>
</mxCell>

坐标系统

• 顶层元素：从 x=60, y=80 开始（避免从 0,0 开始导致 viewBox 问题）
• 容器内子元素：使用相对坐标（相对于容器的左上角）
• 网格对齐：所有坐标为 10 的倍数

自动布局参数

中文宽度修正

• 纯英文：按字符数 × 10px
• 含中文：按字符数 × 16px，最小宽度 × 1.3
• 最大宽度不超过 350px

标题和标签

图表标题

<mxCell id="title" value="图表标题"
  style="text;fontSize=24;fontStyle=1;align=center;fillColor=none;strokeColor=none;fontColor=#1a1a2e;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="20" width="400" height="40" as="geometry"/>
</mxCell>

技术标注（小字）

<mxCell id="label" value="补充说明"
  style="text;fontSize=10;fontColor=#757575;align=center;fillColor=none;strokeColor=none;"
  vertex="1" parent="1">
  <mxGeometry x="100" y="160" width="120" height="18" as="geometry"/>
</mxCell>

暗色模式

mxGraphModel 使用 adaptiveColors="auto" 启用自动暗色适配。

• strokeColor、fillColor、fontColor 使用默认颜色时自动适配
• 显式颜色在暗色模式下自动反转
• 如需手动指定：light-dark(lightColor,darkColor)

导出注意事项

SVG viewBox 修正

导出后如果内容偏移，用文本编辑器修改 SVG 的 viewBox 属性：

• 找到内容实际边界（最小 x/y，最大 x+width/y+height）
• 修正为 viewBox="minX-20 minY-10 width height"

常见问题