Loading... # 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 节点元素 ```xml <!-- 带颜色的节点（无边框） --> <mxCell id="xxx" value="标题
说明" 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 框图元素 ```xml <!-- 虚线框 --> <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 文本标题 ```xml <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 连线元素 ```xml <!-- 水平连接（元素在同一水平线） --> <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 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏