架构图与流程图绘制方法

问题：图表不是“画”出来的

架构图、流程图、时序图看似只是把元素摆上画布，但实际难点在于先把信息结构讲清楚：哪些组件是必须保留的实体，哪些调用、依赖、状态转换是真实关系，哪些分层只是表达边界。直接让模型“画一张图”，容易出现实体漏项、连线语义错位、图表类型选错，以及 SVG 箭头方向异常、Mermaid 语法无法渲染等问题。

方法：按信息结构生成 SVG / Mermaid

该技能把绘制过程拆成三步：先分析信息结构，识别实体、关系与层次，并用“去掉后信息是否完整”判断实体；再选择图表类型与编码方案，根据组件层次、流程分支、消息时序、状态转换等特征匹配架构图、流程图、时序图、状态机图、ER 图等；最后进行布局计算与渲染输出，生成可内联的 SVG 或文档中的 Mermaid 代码块。

它还提供可执行约束：单图实体控制在 20 个以内，超出时拆成概览图与细节图；颜色、形状、线型编码全图统一；SVG 箭头 marker 需保持路径朝右、refX/refY 对齐，避免箭头反向或被裁切。完成后用完整性、类型匹配、层次清晰、关系准确、可读性、编码一致、可渲染等七项检查验证。

边界与注意点

这个技能适合系统架构、业务流程、数据模型、网络拓扑、协议交互等有明确实体和关系的可视化任务。它不是视觉设计工具，不追求“好看”，而优先保证信息表达准确。涉及敏感信息时，应在图中显式标注脱敏要求；AI 生成的图表可作为起点，布局、实体取舍和配色仍需使用者按上下文调整。