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`

选择逻辑：

视觉风格决定颜色、字体、箭头样式等视觉语言，与类型正交，可任意搭配。

风格	描述	参考文档
anthropic-flat	Anthropic/Claude 官方文档视觉语言；低饱和度色块，flat 无阴影，细边框	`styles/anthropic-flat.md`

默认风格：未指定时使用 anthropic-flat。

添加新类型：在 types/ 下新建 .md，在上方类型表中登记。
添加新风格：在 styles/ 下新建 .md，在上方风格表中登记。