infographic

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVG 信息图

SVG Infographics

绘图由图表类型和视觉风格两个维度独立决定，两两可自由组合。

The drawing is independently determined by two dimensions: chart type and visual style, which can be freely combined with each other.

第一步：选择图表类型

Step 1: Choose Chart Type

图表类型决定布局结构（节点排列方式、箭头走向、层次关系）。

类型	适用场景	参考文档
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
```

Chart type determines the layout structure (node arrangement, arrow direction, hierarchical relationship).

Type	Applicable Scenarios	Reference Document
layered-flow	Vertical layered process: Session initialization → Loop execution → Result; single main line, emphasizing stage progression	`types/layered-flow.md`
column-layer	Horizontal multi-column architecture: N vertical columns side by side, each column represents a system layer; arrows flow between columns; a shared plane can be at the bottom	`types/column-layer.md`
swimlane	Swimlane diagram: Multiple horizontal participants each occupy a row, messages/arrows flow between swimlanes; suitable for protocol interaction and multi-party collaboration	`types/swimlane.md`
pattern-grid	Pattern comparison grid: Multiple columns display different patterns/schemes side by side, each column has an independent vertical process, with text descriptions at the bottom	`types/pattern-grid.md`
side-by-side	Side-by-side comparison: Two schemes/patterns each occupy half the frame, separated by a dotted line in the middle; suitable for "old vs new", "Scheme A vs Scheme B"	`types/side-by-side.md`
nested-layer	Horizontal layered nested architecture: 3–4 large horizontal layers (e.g., "Application Layer → Production Layer → Data Layer"), each layer has nested sub-blocks, and a control panel can be attached on the left	`types/nested-layer.md`

Selection Logic:

If the user mentions "layered", "stage", "process" →
```
layered-flow
```
If the user mentions "architecture", "system layer", "component" →
```
column-layer
```
If the user mentions "interaction", "protocol", "multi-party" →
```
swimlane
```
If the user mentions "compare multiple schemes/patterns" →
```
pattern-grid
```
or
```
side-by-side
```
Only two schemes to compare →
```
side-by-side
```
; three or more →
```
pattern-grid
```
If the user mentions "layered architecture" with nested sub-modules in each layer and data flow between upper and lower layers →
```
nested-layer
```

第二步：选择视觉风格

Step 2: Choose Visual Style

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

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

默认风格：未指定时使用

anthropic-flat

。

Visual style determines visual languages such as colors, fonts, arrow styles, which is orthogonal to the type and can be freely combined.

Style	Description	Reference Document
anthropic-flat	Visual language of Anthropic/Claude official documents; low-saturation color blocks, flat without shadows, thin borders	`styles/anthropic-flat.md`

Default Style: Use

anthropic-flat

when not specified.

第三步：生成 SVG

Step 3: Generate SVG

读取类型文档 → 了解布局结构、坐标规范、节点形状
读取风格文档 → 了解颜色系统、字体、箭头定义
按类型文档的布局规范，套用风格文档的颜色，生成完整 SVG
直接输出 SVG 代码，无需额外说明

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

Read the type document → Understand the layout structure, coordinate specifications, node shapes
Read the style document → Understand the color system, fonts, arrow definitions
Follow the layout specifications of the type document, apply the colors from the style document, and generate a complete SVG
Output the SVG code directly without additional explanations

Adding new types: Create a new
.md
file under
types/
and register it in the type table above.
Adding new styles: Create a new
.md
file under
styles/
and register it in the style table above.