架构图与流程图绘制方法
核心理念
任何图表的本质是信息结构的视觉化表达。图表中的每个节点承载一个信息实体，每条连线承载一种实体关系，每个容器承载一层逻辑边界。绘制图表不是"用工具画图"，而是先理解信息结构，再选择合适的视觉编码将其映射为可渲染的SVG或Mermaid。
图表类型由信息结构决定——有层次用架构图，有顺序用流程图，有交互用时序图，有状态转换用状态机图。选错类型会让信息表达失真。
适用范围广泛。 任何有实体和关系的信息结构（系统架构、业务流程、数据模型、网络拓扑、状态转换、时序交互）都可以用本方法可视化。
绘制三步法
第一步：分析信息结构
从用户描述中提取核心信息：
- 识别实体：找出所有独立的信息单元（组件、状态、角色、表、节点）
- 识别关系：找出实体间的连接（调用、依赖、包含、时序、数据流）
- 识别层次：找出实体的归属关系（哪个属于哪个模块/层/泳道）
实体判定准则：如果去掉某个元素后信息不完整，它就是实体；如果去掉后信息仍然完整，它就是装饰。
数量控制：单张图实体≤20个。超出时拆分为多张子图，用概览图+细节图的方式表达。
第二步：选择图表类型与编码方案
根据信息结构特征选择最匹配的图表类型：
| 信息特征 | 图表类型 | 典型场景 |
|---|---|---|
| 组件+层次+接口 | 系统架构图 | 微服务架构、云原生部署 |
| 步骤+分支+汇合 | 业务流程图 | 审批流、生产流程 |
| 角色+消息+时序 | 时序图 | API调用链、协议交互 |
| 状态+事件+转换 | 状态机图 | 订单状态、用户生命周期 |
| 实体+属性+关系 | ER图 | 数据库设计、领域模型 |
| 节点+链路+层级 | 网络拓扑图 | 网络架构、部署拓扑 |
| 数据源+处理+存储 | 数据流图 | ETL流水线、数据中台 |
| 类+属性+方法+继承 | 类图 | 面向对象设计、API契约 |
确定类型后，选定编码方案：
- 颜色编码：不同类型实体用不同颜色
- 形状编码：矩形=组件、菱形=决策、圆柱=数据库、椭圆=状态
- 线型编码：实线=调用、虚线=依赖、粗线=主要路径、细线=次要路径
第三步：布局计算与渲染输出
- 布局计算：根据层次关系确定节点位置，确保同层对齐、跨层连线不交叉
- SVG/Mermaid生成：按编码方案生成可渲染代码
- 可读性优化：调整间距、减少交叉、确保文字清晰
验证清单
绘制完成后逐项验证，七项全部通过才算完成：
| # | 验证项 | 说明 |
|---|---|---|
| 1 | ⬜ 信息完整性 | 覆盖全部核心实体和关键关系，无遗漏 |
| 2 | ⬜ 类型匹配 | 图表类型与信息结构特征匹配 |
| 3 | ⬜ 层次清晰 | 分层/分组反映信息的逻辑层次 |
| 4 | ⬜ 关系准确 | 连线/箭头准确表达实体间关系类型 |
| 5 | ⬜ 可读性 | 文字清晰、间距合理、箭头不交叉 |
| 6 | ⬜ 编码一致 | 颜色/形状/线型编码全图统一 |
| 7 | ⬜ 可渲染 | 输出为有效SVG/Mermaid，可直接渲染 |
领域要求清单
D0-01 系统架构图
- 必选组件: 系统名称、组件列表（名称+职责）、层次划分（前端/后端/数据层/基础设施）、组件间接口关系、外部系统边界
- 可选组件: 技术栈标注、部署环境标注、数据流向标注、安全边界标注
- 组装顺序: 系统边界确认→层次划分→组件识别→接口关系标注→技术栈标注→布局计算→渲染
- 约束: 同层组件水平对齐；跨层关系垂直连线；单张图≤20个节点
- 格式: SVG（show_widget渲染）或Mermaid代码块
D0-02 业务流程图
- 必选组件: 流程名称、步骤列表（名称+角色+输入+输出）、步骤顺序、决策分支、开始/结束节点
- 可选组件: 泳道划分、异常处理路径、并行分支、超时/重试逻辑
- 组装顺序: 流程边界确认→步骤识别→顺序排列→决策分支标注→泳道划分→布局计算→渲染
- 约束: 决策节点用菱形；是/否分支必须标注；循环必须有终止条件
- 格式: SVG或Mermaid flowchart
D0-03 时序图
- 必选组件: 参与者列表、消息序列（发送方→接收方+消息名）、时序顺序、返回消息
- 可选组件: 生命线激活区间、条件分支（alt/opt/loop）、自调用、创建/销毁标记
- 组装顺序: 参与者识别→消息序列排列→返回消息标注→条件分支标注→布局计算→渲染
- 约束: 时间轴从上到下；同步消息用实线箭头；异步消息用开放箭头
- 格式: SVG或Mermaid sequenceDiagram
D0-04 状态机图
- 必选组件: 状态列表（名称+是否终态）、转换关系（源状态+事件+目标状态）、初始状态标记
- 可选组件: 守卫条件、进入/退出动作、历史状态、嵌套子状态
- 组装顺序: 状态识别→转换关系排列→初始/终态标注→守卫条件标注→布局计算→渲染
- 约束: 初始状态用实心圆；终态用双圆；转换箭头标注事件名
- 格式: SVG或Mermaid stateDiagram-v2
D0-05 ER图
- 必选组件: 实体列表（名称+属性）、主键标注、关系类型（1:1/1:N/M:N）、关系连线
- 可选组件: 外键标注、属性类型、弱实体、复合属性
- 组装顺序: 实体识别→属性列举→主键标注→关系识别→基数标注→布局计算→渲染
- 约束: 实体用矩形；属性用椭圆；关系用菱形；基数必须标注
- 格式: SVG或Mermaid erDiagram
D0-06 网络拓扑图
- 必选组件: 节点列表（设备类型+名称+IP）、链路关系、网络层级（核心/汇聚/接入）
- 可选组件: 带宽标注、VLAN划分、安全区域、冗余链路
- 组装顺序: 网络层级确认→节点识别→链路关系标注→IP/带宽标注→布局计算→渲染
- 约束: 同层节点水平排列；层级间垂直连接；冗余链路用虚线
- 格式: SVG
D0-07 数据流图
- 必选组件: 数据源、处理节点、数据存储、数据流（方向+内容）、输出
- 可选组件: 转换规则、过滤条件、分支/合并、监控点
- 组装顺序: 数据源识别→处理步骤排列→存储节点标注→数据流方向标注→布局计算→渲染
- 约束: 数据源用矩形；处理用圆角矩形；存储用圆柱形；流向用箭头
- 格式: SVG或Mermaid flowchart
D0-08 类图
- 必选组件: 类列表（名称+属性+方法）、继承关系、关联关系
- 可选组件: 接口、抽象类、多重性标注、依赖关系、组合/聚合关系
- 组装顺序: 类识别→属性/方法列举→继承关系标注→关联关系标注→布局计算→渲染
- 约束: 类名用粗体；抽象类用斜体；接口用<>标注
- 格式: SVG或Mermaid classDiagram
领域范本
DF-01 图表绘制范本
对应任务: D0-01 ~ D0-08
适用场景: 任何需要将信息结构可视化为图表的场景
绘制范本:
## 图表绘制记录
### Step 1：分析信息结构（D0-0X）
**图表类型**：________（如：系统架构图/业务流程图/时序图/________）
**实体列表**：
| # | 实体名称 | 类型 | 属性/说明 | 所属层次 |
|---|----------|------|----------|---------|
| 1 | ________ | ________ | ________ | ________ |
| 2 | ________ | ________ | ________ | ________ |
| ... | ... | ... | ... | ... |
**关系列表**：
| # | 源实体 | 目标实体 | 关系类型 | 说明 |
|---|--------|---------|---------|------|
| 1 | ________ | ________ | ________ | ________ |
| 2 | ________ | ________ | ________ | ________ |
| ... | ... | ... | ... | ... |
**汇总**：___个实体 / ___个关系 / ___个层次
### Step 2：选择编码方案（D0-0X）
**颜色编码**：
| 实体类型 | 颜色 |
|---------|------|
| ________ | #______ |
| ________ | #______ |
**形状编码**：
| 元素类型 | 形状 |
|---------|------|
| 组件 | 矩形 |
| 决策 | 菱形 |
| 数据库 | 圆柱 |
| ... | ... |
**线型编码**：
| 关系类型 | 线型 | 箭头 |
|---------|------|------|
| 调用 | 实线 | 实心三角 |
| 依赖 | 虚线 | 开放三角 |
| ... | ... | ... |
### Step 3：布局与渲染（D0-0X）
**布局方案**：________（层次布局/网格布局/泳道布局）
| 实体 | X | Y | 宽 | 高 |
|------|---|---|----|----|
| ________ | ___ | ___ | ___ | ___ |
| ... | ... | ... | ... | ... |
### Step 4：验证（D0-0X）
| # | 验证项 | 通过？ |
|---|--------|-------|
| 1 | 信息完整性 | ⬜是/⬜否 |
| 2 | 类型匹配 | ⬜是/⬜否 |
| 3 | 层次清晰 | ⬜是/⬜否 |
| 4 | 关系准确 | ⬜是/⬜否 |
| 5 | 可读性 | ⬜是/⬜否 |
| 6 | 编码一致 | ⬜是/⬜否 |
| 7 | 可渲染 | ⬜是/⬜否 |
范本要点:
- 实体必须来自信息结构本身，不可凭空添加
- 编码方案必须全图一致，不可中途变换
- 验证七项必须全部通过
- 范本中
________为待用户提供的内容，不可AI编造
参考文件
references/diagram-types.md— 各类图表的SVG骨架与最佳实践references/svg-arrow-guide.md— SVG箭头marker完整定义规范references/layout-guide.md— 分层架构图布局完整指南references/mermaid-reference.md— Mermaid语法速查与示例模板
SVG渲染规范
箭头Marker规范
- marker路径必须朝右（+x方向），三角形尖端在x最大值处
markerWidth和markerHeight必须≥viewBox宽高refX放到路径尖端x坐标、refY放y中心
分层架构图布局规范
- 每层用
stroke-dasharray虚线圆角矩形包裹同层组件 - 层间箭头间距至少40px
- viewBox高度先计算所有内容底部坐标+图例高度+16px余量
设计规范
- 颜色：加载
read_me diagram后按CSS变量定义使用 - 字体：
font-family="sans-serif" - 间距：组件间距≥16px，文字与边框间距≥8px
- 图例：复杂图表右下角添加图例说明
使用规则
- 判断图表类型：根据信息特征选择最匹配的图表类型
- 按三步执行：分析信息结构→选择编码方案→布局渲染
- 产出交付：按领域要求清单逐项填充，或按DF-01范本结构替换实际内容
- 渲染输出：优先show_widget内联SVG；需嵌入文档时用Mermaid代码块
- 用户主权：AI产出的图表是起点，用户对布局、颜色、实体选取有调整权
事实纪律
- 图表类型选择必须基于信息结构特征，不得因"好看"选择不匹配的类型
- 实体数量必须控制在合理范围内（单图≤20），超出时拆分为多张子图
- SVG输出必须经过可渲染验证，不可输出无效标记
- 涉及敏感信息的图表必须标注脱敏要求