DrawIO 绘图规范文档

一、基本要求

1.1 颜色规范

  • 配色原则：颜色应与内容逻辑关联，而非简单的元素分类。使用颜色表达技术演进、因果关系或方案价值判断
  • 整体主要颜色不超过 4 种

  • 推荐使用颜色（RGB值）：

    • 蓝色 #0070C0：触发点/关键突破 - 用于问题的触发点或解决问题的关键突破点，传达"这是转折"
    • 橄榄绿 #799540：负面后果/影响 - 用于问题导致的负面结果，传达"这是问题的后果"
    • 棕色 #9C4A09：核心机制/方案 - 用于核心的技术机制或方案（无论历史或现代），传达"这是核心逻辑"
    • 绿色 #00B050：正面价值/最佳实践 - 用于正确做法和现代最佳实践，传达"这是正确方向"
    • 灰色：RGB(102,102,102) = #666666 - 用于边框线条
    • 黑色：RGB(0,0,0) = #000000 - 用于边框轮廓

配色逻辑示例（TCP_NODELAY主题）：

  • 蓝色 #0070C0：小包问题（问题的触发点）、TCP_NODELAY（关键突破点）
  • 橄榄绿 #799540：4000%开销（问题的负面后果）
  • 棕色 #9C4A09：Nagle算法、延迟确认、死锁效应（核心机制，历史方案）
  • 绿色 #00B050：应用层处理、现代分布式系统、中间件配置（最佳实践）

这样配色形成清晰的逻辑叙事：

  1. 蓝色触发问题 → 橄榄绿产生负面后果
  2. 棕色提出历史方案 → 但又产生新的问题（死锁）
  3. 蓝色提出关键突破（TCP_NODELAY） → 绿色形成现代最佳实践

1.2 字体规范

  • 中文字体：微软雅黑 (Microsoft YaHei)
  • 字体颜色：白色 (#FFFFFF)

  • 字体大小：

    • 层标题：14px，加粗
    • 分组标题：13px
    • 节点内容：12px
  • 对齐方式：居中对齐 (align=center)

1.3 线条规范

  • 线宽统一为 1pt：所有线条的 strokeWidth=1，包括框图边框、箭头连线等
  • 层框线（一、二、三等主要内容框）：实线，strokeColor=#666666（给人清晰简洁的感觉）
  • 系统边界（最外层大框）：虚线 (dashed=1)，dashPattern="8 8"
  • 子系统/模块级框图：实线，strokeColor=#666666
  • 节点边框：带填充颜色的节点无边框（strokeColor=none），无填充颜色的节点才有边框（strokeColor=#000000）
  • 禁止连线跨越框图

  • 连线连接点规范：连线应从元素的合适位置连接，确保美观

    • 水平连接：当两个元素在同一水平线（Y坐标相近）时，使用水平箭头

      • 从源元素右侧中心连接（exitX=1, exitY=0.5）
      • 到目标元素左侧中心连接（entryX=0, entryY=0.5）
      • 避免从底部连接到顶部这种不美观的方式

    • 垂直连接：当两个元素在同一垂直线（X坐标相近）时，使用垂直箭头

      • 从源元素底部中心连接（exitX=0.5, exitY=1）
      • 到目标元素顶部中心连接（entryX=0.5, entryY=0）
    • 跨区域连接：当元素在不同区域时，优先使用水平连接，必要时使用折线（Array points）避免交叉

    • 避免与框线重叠：连线路径应避开区域框线，避免与框线重叠

      • 当连线需要跨越多个区域时，应使用折线路径，让连线在区域外部绕过框线
      • 例如：从区域A到区域C，路径应为：A右侧 → 区域外（避开B区域框线）→ 向下 → 向左到C
      • 折线路径应保持至少10-20px的间距，避免与框线紧贴

    • 避免穿越元素：连线路径不能穿越任何长方形元素（节点、框等）

      • 当连线路径需要经过元素附近时，应使用折线路径绕过元素
      • 路径应保持在元素外部，保持至少10-20px的安全间距
      • 例如：从元素A到元素C，如果中间有元素B，路径应为：A右侧 → 绕过B元素（在B下方或上方）→ 到C左侧
      • 计算元素边界：元素x坐标到x+width，y坐标到y+height，连线路径应避开这个矩形区域

1.4 背景规范

  • 整体背景：无填充 (fillColor=none)
  • 最外层框：无填充
  • 内部子分组框：无填充（避免内容被覆盖）
  • 节点框：有颜色填充

1.5 布局规范

  • 无跨线
  • 文字不能跨线
  • 保持图中文字和正文的一致性
  • 确保黑白打印、彩色打印、投影都清晰

1.6 文件命名规范

  • 文件名后缀必须是 .drawio.svg
  • 此格式在 VSCode 中使用 DrawIO 插件编辑，复制到其他地方则作为 SVG 图片显示
  • 示例：architecture.drawio.svg

二、进阶要求

2.1 标题处理

  • 层标题与框分离，避免覆盖内容
  • 标题作为独立文本元素放置在框上方
  • 标题位置：Y轴统一，X轴左对齐

2.2 对齐与对称

  • 同层节点保持相同高度（建议70px）
  • 同组内节点Y轴对齐，间距统一（建议90px）
  • 分组框之间保持均匀间距
  • 三列对称：中间列居中，左右列对称分布（包括水平和垂直方向，相对于框线）

2.2.1 框内元素对称性要求（核心原则）

  • 必须同时满足上下对称和左右对称：框内元素必须同时满足垂直居中和水平居中，不能只满足其中一个
  • 元素不能超出框线：所有元素的边界（x, y, x+width, y+height）必须完全在框的边界内，不能覆盖或超出框线
  • 最小边距要求：元素与框线之间必须保持至少10px的最小间距，确保视觉清晰且不会误触框线

  • 验证公式：

    • 元素左边界：元素X ≥ 框X + 10px
    • 元素右边界：元素X + 元素宽度 ≤ 框X + 框宽度 - 10px
    • 元素上边界：元素Y ≥ 框Y + 10px
    • 元素下边界：元素Y + 元素高度 ≤ 框Y + 框高度 - 10px

2.2.2 单个元素的对称布局

  • 垂直居中（上下对称）：

    • 计算公式：元素Y坐标 = 框Y坐标 + (框高度 - 元素高度) / 2
    • 验证：上边距 = 下边距 = (框高度 - 元素高度) / 2
    • 例如：框Y=100，框高200px，元素高70px，则元素Y = 100 + (200-70)/2 = 165px（上下各留65px）

  • 水平居中（左右对称）：

    • 计算公式：元素X坐标 = 框X坐标 + (框宽度 - 元素宽度) / 2
    • 验证：左边距 = 右边距 = (框宽度 - 元素宽度) / 2
    • 例如：框X=50，框宽500px，元素宽180px，则元素X = 50 + (500-180)/2 = 210px（左右各留160px）

2.2.3 多个元素的对称布局

  • 水平排列的多个元素（必须同时满足左右对称和上下对称）：

    • 水平方向（左右对称）：

      • 步骤1：计算内容总宽度 = 节点宽度×数量 + 间距×(数量-1)
      • 步骤2：计算左边距 = (框宽度 - 内容总宽度) / 2
      • 步骤3：验证左边距 ≥ 10px（最小边距要求）
      • 步骤4：如果左边距 < 10px，需要增大框宽度或减小节点宽度/间距
      • 步骤5：第一个节点X坐标 = 框X + 左边距
      • 步骤6：后续节点X坐标 = 前一个节点X + 前一个节点宽度 + 间距

    • 垂直方向（上下对称）：

      • 所有水平排列的元素必须在垂直方向上居中
      • 计算公式：元素Y坐标 = 框Y坐标 + (框高度 - 元素高度) / 2
      • 验证：上边距 = 下边距 = (框高度 - 元素高度) / 2

    • 完整示例：框X=50，框Y=100，框宽920px，框高200px，4个节点每个180px×70px，间距50px

      • 水平方向：

        • 内容总宽 = 180×4 + 50×3 = 870px
        • 左边距 = (920 - 870) / 2 = 25px（满足≥10px要求）
        • 节点1 X = 50 + 25 = 75px
        • 节点2 X = 75 + 180 + 50 = 305px
        • 节点3 X = 305 + 180 + 50 = 535px
        • 节点4 X = 535 + 180 + 50 = 765px
        • 验证：节点4右边界 = 765 + 180 = 945px，框右边界 = 50 + 920 = 970px，右边距 = 970 - 945 = 25px（与左边距相等）

      • 垂直方向：

        • 所有节点Y = 100 + (200 - 70) / 2 = 165px
        • 验证：上边距 = 165 - 100 = 65px，下边距 = (100 + 200) - (165 + 70) = 65px（上下对称）

  • 垂直排列的多个元素（必须同时满足上下对称和左右对称）：

    • 垂直方向（上下对称）：

      • 步骤1：计算内容总高度 = 节点高度×数量 + 间距×(数量-1)
      • 步骤2：计算上边距 = (框高度 - 内容总高度) / 2
      • 步骤3：验证上边距 ≥ 10px（最小边距要求）
      • 步骤4：如果上边距 < 10px，需要增大框高度或减小节点高度/间距
      • 步骤5：第一个节点Y坐标 = 框Y + 上边距
      • 步骤6：后续节点Y坐标 = 前一个节点Y + 前一个节点高度 + 间距

    • 水平方向（左右对称）：

      • 所有垂直排列的元素必须在水平方向上居中
      • 计算公式：元素X坐标 = 框X坐标 + (框宽度 - 元素宽度) / 2
      • 验证：左边距 = 右边距 = (框宽度 - 元素宽度) / 2

    • 完整示例：框X=50，框Y=100，框宽500px，框高400px，3个节点每个180px×70px，间距40px

      • 垂直方向：

        • 内容总高 = 70×3 + 40×2 = 290px
        • 上边距 = (400 - 290) / 2 = 55px（满足≥10px要求）
        • 节点1 Y = 100 + 55 = 155px
        • 节点2 Y = 155 + 70 + 40 = 265px
        • 节点3 Y = 265 + 70 + 40 = 375px
        • 验证：节点3下边界 = 375 + 70 = 445px，框下边界 = 100 + 400 = 500px，下边距 = 500 - 445 = 55px（与上边距相等）

      • 水平方向：

        • 所有节点X = 50 + (500 - 180) / 2 = 210px
        • 验证：左边距 = 210 - 50 = 160px，右边距 = (50 + 500) - (210 + 180) = 160px（左右对称）

2.2.4 网格布局的对称性（多行多列）

  • 行列对称原则：多行多列布局时，必须同时满足：

    • 行与行之间的垂直间距对称（上下边距相等）
    • 列与列之间的水平间距对称（左右边距相等）
    • 整体内容在框内垂直居中（上下对称）
    • 整体内容在框内水平居中（左右对称）

  • 计算方法（以2行3列为例）：

    • 步骤1：计算整体内容区域

      • 内容总宽度 = 节点宽度×列数 + 列间距×(列数-1)
      • 内容总高度 = 节点高度×行数 + 行间距×(行数-1)

    • 步骤2：计算整体内容的边距（确保整体居中）

      • 左边距 = (框宽度 - 内容总宽度) / 2
      • 上边距 = (框高度 - 内容总高度) / 2
      • 验证：左边距 ≥ 10px，上边距 ≥ 10px

    • 步骤3：计算每行的水平位置（左右对称）

      • 第一列X坐标 = 框X + 左边距
      • 后续列X坐标 = 前一列X + 节点宽度 + 列间距

    • 步骤4：计算每列的垂直位置（上下对称）

      • 第一行Y坐标 = 框Y + 上边距
      • 后续行Y坐标 = 前一行Y + 节点高度 + 行间距

    • 完整示例：框X=50，框Y=100，框宽920px，框高400px，2行3列，节点180px×70px，列间距50px，行间距40px

      • 步骤1：内容总宽 = 180×3 + 50×2 = 640px，内容总高 = 70×2 + 40×1 = 180px
      • 步骤2：左边距 = (920 - 640) / 2 = 140px，上边距 = (400 - 180) / 2 = 110px（都满足≥10px）

      • 步骤3：列位置

        • 第1列X = 50 + 140 = 190px
        • 第2列X = 190 + 180 + 50 = 420px
        • 第3列X = 420 + 180 + 50 = 650px

      • 步骤4：行位置

        • 第1行Y = 100 + 110 = 210px
        • 第2行Y = 210 + 70 + 40 = 320px
      • 验证：整体左右对称（左边距=右边距=140px），整体上下对称（上边距=下边距=110px）

2.2.5 不同大小元素的对称布局

  • 问题场景：框内元素大小不一致（如有些宽180px，有些宽200px）

  • 解决方法：

    • 方法1：统一元素大小（推荐）：调整所有元素为相同尺寸，然后按2.2.3节方法布局

    • 方法2：按最大元素计算：以最大元素尺寸为准，其他元素保持相同间距

      • 计算时使用最大宽度和最大高度
      • 小元素在各自位置内居中

    • 方法3：分组布局：将相同大小的元素分组，每组内部对称，组与组之间也对称

      • 先计算每组的总宽度/高度
      • 再按"多个元素的对称布局"方法计算组的位置
      • 最后在组内计算元素位置

2.2.6 嵌套框的对称性

  • 子框在父框内的对称：子框本身作为元素，必须满足父框的对称性要求

    • 子框在父框内必须垂直居中和水平居中（或按布局规则对称分布）
    • 子框不能超出父框边界，与父框线保持至少10px间距
  • 子框内元素的对称：子框内的元素按2.2.2-2.2.4节方法计算，相对于子框边界

  • 示例：父框X=50，Y=100，宽920px，高400px；子框宽340px，高220px

    • 子框在父框内居中：子框X = 50 + (920-340)/2 = 340px，子框Y = 100 + (400-220)/2 = 190px
    • 子框内元素按子框边界（X=340，Y=190）计算位置

2.2.7 标题与内容对齐

  • 标题位置规则：

    • 规则1：标题通常放置在框外上方（按2.1节要求）
    • 规则2：如果标题在框内，必须满足框内元素的对称性要求（不能覆盖框线）

  • 标题与内容对齐：

    • 当标题在框外上方时：标题X坐标与框X坐标左对齐（按2.1节要求）
    • 当标题需要与内容中线对齐时：标题X坐标 = 内容中X坐标 + (内容宽度 - 标题宽度) / 2
    • 例如：节点X=80，宽140，则节点中线=80+70=150；标题宽200，则标题X=150-100=50
  • 标题不能覆盖框线：标题应放置在框外上方，或确保标题完全在框内且不覆盖框线

2.3 尺寸建议

  • 系统边界：根据内容自适应，留出足够边距
  • 层框高度：根据内容自适应（100px-260px）
  • 节点宽度：根据内容自适应（140px-500px）
  • 分组框宽度：建议340px-360px

2.4 文本简化

  • 核心信息优先保留
  • 长文本适当换行（ ）
  • 标题与说明分行显示
  • 避免文字过长溢出

三、颜色使用原则

3.1 元素分类着色

  • 创新组件（编号1-8）：#9C4A09（棕色）
  • 标准K8s组件：#00B050（绿色）
  • 边框线条：#666666（灰色）或 #000000（黑色）

3.2 颜色简化原则

  • 不一定非得用掉所有颜色
  • 优先保证可读性和清晰度
  • 同类元素使用相同颜色
  • 避免颜色过多导致混乱

3.3 打印适应性

  • 黑白打印：通过深浅对比区分
  • 彩色打印：通过颜色区分类型
  • 投影：高对比度，避免浅色

四、结构设计原则

4.1 KISS 原则

  • Keep It Simple, Stupid
  • 布局清朗，避免复杂嵌套
  • 层级分明，关系清晰
  • 去除不必要的装饰

4.2 层级结构

  • 最外层：系统边界（虚线框）
  • 第一层：层标题 + 层框
  • 第二层：子分组框（可选）
  • 第三层：节点元素

4.3 框图类型

  • 系统边界：虚线，无填充
  • 层框：虚线，无填充
  • 子分组框：实线，无填充
  • 节点框：实线，有填充

五、DrawIO 语法规范

5.1 节点元素

<!-- 带颜色的节点（无边框） -->
<mxCell id="xxx" value="标题&#xa;说明"
  style="rounded=1;whiteSpace=wrap;html=1;strokeColor=none;fillColor=#9C4A09;fontFamily=Microsoft YaHei;fontSize=12;fontColor=#FFFFFF;align=center;"
  vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="100" height="70" as="geometry" />
</mxCell>

<!-- 无填充颜色的节点（有黑色边框） -->
<mxCell id="xxx" value="标题"
  style="rounded=1;whiteSpace=wrap;html=1;strokeWidth=1;strokeColor=#000000;fillColor=#00B050;fontFamily=Microsoft YaHei;fontSize=12;fontColor=#FFFFFF;align=center;"
  vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="100" height="70" as="geometry" />
</mxCell>

5.2 框图元素

<!-- 虚线框 -->
<mxCell id="xxx" value=""
  style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=1;strokeColor=#666666;dashed=1;dashPattern=8 8;fillColor=none;"
  vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="1000" height="100" as="geometry" />
</mxCell>

<!-- 实线框 -->
<mxCell id="xxx" value=""
  style="rounded=0;whiteSpace=wrap;html=1;strokeWidth=1;strokeColor=#666666;fillColor=none;"
  vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="350" height="220" as="geometry" />
</mxCell>

5.3 文本标题

<mxCell id="xxx" value="标题文字"
  style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Microsoft YaHei;fontSize=14;fontColor=#000000;fontStyle=1"
  vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="200" height="30" as="geometry" />
</mxCell>

5.4 连线元素

<!-- 水平连接（元素在同一水平线） -->
<mxCell id="arrow1" value="标签文字" 
  style="endArrow=classic;html=1;strokeWidth=1;strokeColor=#666666;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;"
  edge="1" parent="1" source="source-id" target="target-id">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- 垂直连接（元素在同一垂直线） -->
<mxCell id="arrow2" value="" 
  style="endArrow=classic;html=1;strokeWidth=1;strokeColor=#666666;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;"
  edge="1" parent="1" source="source-id" target="target-id">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

<!-- 跨区域连接（使用折线，避免与框线重叠和穿越元素） -->
<mxCell id="arrow3" value="标签文字" 
  style="endArrow=classic;html=1;strokeWidth=1;strokeColor=#666666;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;"
  edge="1" parent="1" source="source-id" target="target-id">
  <mxGeometry relative="1" as="geometry">
    <Array as="points">
      <!-- 从源元素右侧出发，向右绕过中间区域的框线 -->
      <!-- 注意：620 > 560（中间区域右边界），保持60px安全距离 -->
      <mxPoint x="620" y="270" />
      <!-- 向下，避开中间元素（元素范围y:760-820），保持在y=850 -->
      <!-- 注意：850 > 820（元素底部），保持30px安全距离 -->
      <mxPoint x="620" y="850" />
      <!-- 向左到目标元素左侧 -->
      <mxPoint x="860" y="850" />
      <!-- 向上到目标元素中心 -->
      <mxPoint x="860" y="790" />
    </Array>
  </mxGeometry>
</mxCell>

六、检查清单

完成绘图后，请检查以下项目：

  • [ ] 文件名后缀为 .drawio.svg
  • [ ] 颜色不超过4种
  • [ ] 字体使用微软雅黑，颜色为白色
  • [ ] 线条宽度统一为 1pt（包括框图边框、节点边框、连线，所有strokeWidth=1）
  • [ ] 层框线使用实线（主要内容框）
  • [ ] 系统边界使用虚线（最外层大框）
  • [ ] 带颜色填充的节点无边框（strokeColor=none）
  • [ ] 无连线跨越框图
  • [ ] 连线连接点美观（水平连接用左右，垂直连接用上下）
  • [ ] 连线不与框线重叠（跨区域连线使用折线路径绕过框线）
  • [ ] 连线不穿越元素（使用折线路径绕过元素，保持安全间距）
  • [ ] 无文字跨线
  • [ ] 大框无背景色（无填充）
  • [ ] 标题与框分离，不被覆盖
  • [ ] 标题与内容中线对齐
  • [ ] 同层节点高度一致
  • [ ] 框内元素必须同时满足上下对称和左右对称（不能只满足其中一个）
  • [ ] 框内元素上下间距对称（垂直居中，上边距=下边距）
  • [ ] 框内元素左右间距对称（水平居中，左边距=右边距）
  • [ ] 所有元素完全在框内，不覆盖或超出框线（元素边界在框边界内）
  • [ ] 元素与框线之间保持至少10px的最小间距
  • [ ] 节点水平位置居中对称，无重叠
  • [ ] 分组对称，间距均匀
  • [ ] 黑白打印清晰
  • [ ] 彩色打印清晰
  • [ ] 投影显示清晰
  • [ ] 导出PDF不丢失元素

七、最佳实践

7.1 设计流程

  1. 先确定整体布局和层级结构
  2. 规划颜色方案，根据元素类型分配
  3. 使用网格辅助对齐（grid=1, gridSize=10）
  4. 先画框，再画节点，最后调整对齐
  5. 导出多种格式测试效果

7.2 调试技巧

  • 使用 guides=1 启用辅助线
  • 使用 tooltips=1 查看元素信息
  • 保存前导出PNG检查效果
  • 对称布局时计算精确坐标

7.4 对称性验证方法

  • 验证步骤：

    1. 选择框内所有元素，查看它们的X、Y坐标
    2. 计算左边距 = 第一个元素X - 框X
    3. 计算右边距 = (框X + 框宽度) - (最后一个元素X + 元素宽度)
    4. 验证：左边距 = 右边距（允许1-2px误差，因为像素对齐）
    5. 计算上边距 = 第一个元素Y - 框Y
    6. 计算下边距 = (框Y + 框高度) - (最后一个元素Y + 元素高度)
    7. 验证：上边距 = 下边距（允许1-2px误差）
    8. 验证所有元素边界：元素X ≥ 框X + 10px，元素X + 宽度 ≤ 框X + 框宽度 - 10px
    9. 验证所有元素边界：元素Y ≥ 框Y + 10px，元素Y + 高度 ≤ 框Y + 框高度 - 10px

  • DrawIO检查工具：

    • 使用"排列"菜单的"对齐"功能检查元素对齐
    • 使用"视图"菜单的"网格"功能辅助对齐
    • 使用"编辑"菜单的"选择"功能批量选择元素查看坐标

7.3 常见问题

  • 问题：内容被框覆盖 → 解决：标题与框分离
  • 问题：不对齐 → 解决：使用网格计算坐标
  • 问题：颜色过多 → 解决：合并同类元素颜色
  • 问题：文字溢出 → 解决：增大节点宽度或简化文本
  • 问题：连线不美观（从底部连接到顶部） → 解决：检查元素位置，同一水平线用水平箭头（右侧→左侧），同一垂直线用垂直箭头（底部→顶部）
  • 问题：连线与框线重叠 → 解决：使用折线路径，让连线在区域外部绕过框线，保持至少10-20px间距
  • 问题：连线穿越元素 → 解决：使用折线路径绕过元素，路径保持在元素外部，保持至少10-20px安全间距

  • 问题：框内元素上下对称但左右不对称（或反之） → 解决：

    • 检查是否只计算了垂直居中或只计算了水平居中
    • 必须同时计算上下对称和左右对称
    • 使用2.2.2和2.2.3节的计算公式，分别计算X坐标和Y坐标
    • 验证：左边距=右边距，上边距=下边距

  • 问题：元素盖住框线或超出框线 → 解决：

    • 检查元素边界是否在框边界内：元素X≥框X+10px，元素X+宽度≤框X+框宽度-10px
    • 检查元素Y≥框Y+10px，元素Y+高度≤框Y+框高度-10px
    • 如果元素超出，需要调整元素位置或增大框的尺寸
    • 确保所有元素与框线保持至少10px的最小间距

  • 问题：多个元素布局时，左右对称但上下不对称（或反之） → 解决：

    • 对于水平排列的元素：使用2.2.3节的方法计算水平位置，同时使用2.2.2节的方法计算垂直位置
    • 对于垂直排列的元素：使用2.2.3节的方法计算垂直位置，同时使用2.2.2节的方法计算水平位置
    • 确保所有元素在框内垂直居中（上下对称），同时水平居中（左右对称）

  • 问题：网格布局时整体不对称 → 解决：

    • 使用2.2.4节的完整计算方法
    • 先计算整体内容区域，确保整体在框内居中
    • 再计算每行每列的具体位置
    • 验证整体边距：左边距=右边距，上边距=下边距

  • 问题：元素大小不一致导致不对称 → 解决：

    • 优先使用2.2.5节方法1：统一元素大小
    • 如果必须保持不同大小，使用方法2或方法3
    • 确保整体布局仍然对称

  • 问题：嵌套框内的元素不对称 → 解决：

    • 先确保子框在父框内对称（使用2.2.6节方法）
    • 再确保子框内元素相对于子框对称（使用2.2.2-2.2.4节方法）
    • 逐层验证，确保每层都满足对称性要求

八、版本控制

  • 2025-12-24 v1.5: 深度完善对称性规范和修复不一致问题

    • 修复strokeWidth不一致：统一所有示例代码为strokeWidth=1（之前框图示例错误使用strokeWidth=2）
    • 完善2.2.3节：明确水平排列元素必须同时满足左右对称和上下对称，补充完整示例
    • 完善2.2.3节：明确垂直排列元素必须同时满足上下对称和左右对称，补充完整示例
    • 完善2.2.4节网格布局：添加详细的计算步骤和完整示例（2行3列）
    • 新增2.2.5节：不同大小元素的对称布局方法（3种解决方案）
    • 新增2.2.6节：嵌套框的对称性规范（子框在父框内的对称，子框内元素的对称）
    • 完善2.2.7节（原2.2.5节）：澄清标题对齐规则（框外上方 vs 内容中线对齐）
    • 新增7.4节：对称性验证方法（9步验证流程和DrawIO检查工具）
    • 在常见问题中补充网格布局、不同大小元素、嵌套框的对称性问题解决方案
    • 在检查清单中补充线条宽度一致性检查

  • 2025-12-24 v1.4: 完善框内元素对称性和框线覆盖规范

    • 明确要求框内元素必须同时满足上下对称和左右对称（不能只满足其中一个）
    • 明确要求元素不能超出框线，必须完全在框内
    • 添加元素与框线之间的最小间距要求（至少10px）
    • 完善单个元素、多个元素、网格布局的对称性计算公式和示例
    • 添加元素边界验证公式，确保元素不覆盖框线
    • 在检查清单中补充对称性和框线覆盖的检查项
    • 在常见问题中补充对称性和框线覆盖问题的解决方案

  • 2025-12-24 v1.3: 新增连线避免穿越元素的规范

    • 添加连线不能穿越长方形元素的要求
    • 添加计算元素边界和保持安全间距的方法
    • 更新示例代码展示如何同时避开框线和元素
    • 在检查清单和常见问题中补充穿越元素问题的检查

  • 2025-12-24 v1.2: 新增连线避免与框线重叠的规范

    • 添加跨区域连线使用折线路径绕过框线的要求
    • 添加避免框线重叠的示例代码和检查项
    • 在常见问题中补充框线重叠问题的解决方案

  • 2025-12-24 v1.1: 新增连线连接点规范，优化连线美观性要求

    • 添加水平连接和垂直连接的规范
    • 添加连线连接点示例代码
    • 在检查清单和常见问题中补充连线美观性检查
  • 2025-12-23 v1.0: 初始版本，基于字节跳动K8s架构图总结
最后修改：2025 年 12 月 24 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏