SVG 信息图
绘图由图表类型和视觉风格两个维度独立决定，两两可自由组合。
第一步：选择图表类型
图表类型决定布局结构（节点排列方式、箭头走向、层次关系）。
| 类型 | 适用场景 | 参考文档 |
|---|---|---|
| layered-flow | 垂直分层流程：Session 初始化 → 循环执行 → 结果；单条主线，强调阶段递进 | types/layered-flow.md |
| column-layer | 水平多列架构：N 个垂直列并排，每列代表一个系统层；列间有箭头流转；底部可有共享平面 | types/column-layer.md |
| swimlane | 泳道图：多个横向参与者各占一行，消息/箭头在泳道间流动；适合协议交互、多方协作 | types/swimlane.md |
| pattern-grid | 模式对比网格：多列并排展示不同模式/方案，每列独立纵向流程，底部有文字说明 | types/pattern-grid.md |
| side-by-side | 左右对比：两个方案/模式各占半幅，中间虚线分隔，适合"旧 vs 新"、"A 方案 vs B 方案" | types/side-by-side.md |
| nested-layer | 水平分层嵌套架构：3–4 个横向大层（如"应用层 → 生产层 → 数据层"），每层内部有子区块嵌套，左侧可附管控面板 | types/nested-layer.md |
选择逻辑：
- 用户说"分层"、"阶段"、"流程" →
layered-flow - 用户说"架构"、"系统层"、"组件" →
column-layer - 用户说"交互"、"协议"、"多方" →
swimlane - 用户说"对比多种方案/模式" →
pattern-grid或side-by-side - 只有两个方案对比 →
side-by-side；三个及以上 →pattern-grid - 用户说"分层架构"且每层内有子模块嵌套、有上下层数据流 →
nested-layer
第二步：选择视觉风格
视觉风格决定颜色、字体、箭头样式等视觉语言，与类型正交，可任意搭配。
| 风格 | 描述 | 参考文档 |
|---|---|---|
| anthropic-flat | Anthropic/Claude 官方文档视觉语言；低饱和度色块，flat 无阴影，细边框 | styles/anthropic-flat.md |
默认风格：未指定时使用 anthropic-flat。
第三步：生成 SVG
- 读取类型文档 → 了解布局结构、坐标规范、节点形状
- 读取风格文档 → 了解颜色系统、字体、箭头定义
- 按类型文档的布局规范，套用风格文档的颜色，生成完整 SVG
- 直接输出 SVG 代码，无需额外说明
添加新类型：在types/下新建.md，在上方类型表中登记。 添加新风格：在styles/下新建.md，在上方风格表中登记。