流程图设计标准 v4.0

范围：流程图的布局、美学和视觉设计原则。 符号形状、颜色、边类型 → 参见 std-flowchart-symbols-v1（唯一真理源）。

核心哲学：美化是手段，传递信息才是目的。 任何让读者无法在 3 秒内叙述主流程的装饰都是有害的。

1. 设计公理

流程图是信息传递的视觉语言。 每个设计决策只需回答一个问题：这是否帮助读者更快理解逻辑？ 如果不是，删除它。

2. 颜色原则

2.1 统一性

• 相同语义类型→相同颜色。 所有 Process 节点都是蓝色。所有 Decision 节点都是琥珀色。无例外。
• 调色板按符号类型固定（参见符号标准的颜色表）。禁止发明新色相。
• 如果节点不属于任何标准类型，默认使用 process（蓝色）。

2.2 对比度

• 填充 vs 描边：每个节点使用浅填充 + 饱和描边。描边承载身份；填充提供面积。
• 文字 vs 背景：最小亮度差 > 30%。使用标准中指定的 font-color。
• 主要 vs 次要边：主流程为 3px 黑色（透明度 0.85），其他边更细、更浅或虚线。视觉差距必须明显。

2.3 精简性

• 任何单个图表最多 3 个主色调。 其余为点缀色。
• 如果图表使用 6+ 种符号类型，调色板自然扩展——但读者仍然感知"蓝色=动作，琥珀色=决策"，因为形状强化了颜色。
• 禁止用颜色编码第二维度（如"蓝色=过程且蓝色=确定性"）。颜色仅编码符号类型。

2.4 场景适配

3. 节点设计原则

3.1 尺寸标准化

• 同类型节点必须尺寸相同。 两个并排的 Process 节点大小完全一致。
• Decision 菱形因形状自然更高——保持文字区域紧凑。

3.2 内容密度

每个节点最多 3 个内容区域：

┌──────────────────────┐
│  标题               │  ← 动词+宾语，≤ 24字符
│  副标题             │  ← 结果/产物，≤ 36字符
│  [标签] [标签] [+N] │  ← 产物名称，≤ 3个标签
└──────────────────────┘

• 字体：仅无衬线字体（节点文字禁用衬线体和等宽体）。
• 对齐：居中。标题禁止换行到2+行——宁可缩短。
• 节点内无图标，除非完全替代文字（每节点最多1个图标）。

4. 边设计原则

4.1 视觉层级

读者应瞬间识别哪条线是"主干道"：

• 如果所有边看起来同等重要，图表就坏了。主流程必须主导。

4.2 直线规则（不可协商）

如果一条线能直，它就必须直。 对齐节点之间的弯曲线始终是bug。

4.3 路由规则

5. 布局原则

5.1 主干优先

每个流程图必须有恰好一条主干（脊柱）。所有其他信息作为侧边栏、标签或详细视图挂在脊柱上。

5.2 方向规则

5.3 换行规则（硬性规定）

• 每行最多5个节点。 超过5个就换行。
• 10个节点 = 2行 × 5列（标准总览布局）。

5.4 对齐（不可协商）

5.5 间距

6. 总览设计（L0）

6.1 硬性限制

6.2 侧边栏模式

产物、配置和数据产品不应是主干节点：

• 作为标签附在产生节点上（最多3个可见，溢出 +N）
• 或使用单个侧边注释框
• 侧边栏不计入10节点限制

7. 详细设计（L1+）

8. 交互原则

• 锁定布局——节点默认不可拖动。这是展示，不是白板。
• 自动 fitView——加载时、展开/折叠时、导航时。
• 渐进式揭示——总览从步骤1可见开始，点击"下一步"逐步显示。

9. 图例（必需）

每个图表必须包含图例：

1. 本图中使用的符号形状（24种标准类型的子集）
2. 本图中使用的边类型（6种标准类型的子集）

10. 反面模式

11. 验收清单（8项测试）

参考

• 符号标准: std-flowchart-symbols-v1 — 形状、颜色、边类型（唯一真理源）
• D2类定义: std-flowchart-d2-v1 — D2 class 代码块