图表工作流方法

先纠正一个常见的顺序错误

画架构文档的人通常这样开始：打开绘图工具，拖一个框，再补一条线。结果节点数量跟着当时觉得「有用」的装饰元素一起膨胀，连线最后分不清调用和依赖，等到评审时才发现图上画的是工具的默认样式，不是系统的真实结构。

这套方法把顺序反过来。图表本质是信息结构的视觉编码：节点承载一个信息实体，连线承载一种实体关系，容器承载一层逻辑边界。先把这三件事确认清楚，再决定用 SVG 还是 Mermaid 渲染。

三步法

第一步：分析信息结构

• 识别实体、关系、层次三要素
• 实体判定准则：去掉后信息不完整的才是实体，去掉后仍然完整的是装饰
• 数量控制：单图实体 ≤ 20，超出时拆成概览图 + 细节图

第二步：选择图表类型与编码方案

• 有层次用架构图，有顺序用流程图，有交互用时序图，有状态转换用状态机图
• 编码全图统一：矩形 = 组件、菱形 = 决策、圆柱 = 数据库
• 线型区分语义：实线 = 调用、虚线 = 依赖、粗线 = 主要路径

第三步：布局计算与渲染输出

• 同层节点对齐，跨层连线不交叉
• 产出可直接渲染的 SVG，或嵌入文档时用 Mermaid 代码块

内置的领域约定

方法自带 8 类图的必选组件与组装顺序（D0-01 到 D0-08）。系统架构图要求先确认系统边界，再划分层次，然后标注组件与接口关系；时序图要求同步消息用实线箭头、异步消息用开放箭头；状态机图要求初始状态用实心圆、终态用双圆。每类图都配有布局约束和输出格式约定。

适用边界

• 实体必须来自信息结构本身，不可凭空添加
• 图表类型由信息结构决定，不按「好不好看」选择
• SVG 输出必须经过可渲染验证：markerWidth/markerHeight 要与 viewBox 匹配，marker 路径尖端必须朝 +x 方向，否则箭头会朝左或被裁切
• 涉及敏感信息的图表需要标注脱敏要求
• 产出的图表只是起点，布局、颜色、实体选取由用户决定