Mermaid 图表画廊
本站的 Mermaid 渲染管线基于 Mermaid.js v11，采用双主题预渲染（同时生成 light 和 dark 两份 SVG，切换主题时零重渲染）。本页把博客里常用的图表类型集中演示一遍，每个图表都可以直接复制源码到自己的文章中使用。
使用须知
- 引号规则：节点/边/标签只要含括号、斜杠、箭头、冒号、逗号、中英文混排，就必须加引号。
- 换行：节点内换行统一用
<br/>，不要写真实换行。 - 不写 LaTeX：Mermaid 不支持公式，公式名用普通文本（如
H(z)）放进引号标签。
最常用的图表，画算法流程、模块关系、决策树。下面顺带演示 classDef 节点着色和 subgraph 方向控制。
flowchart TB
A["输入数据"] --> B["预处理"]
subgraph 训练["训练阶段"]
direction LR
T1["前向传播"] --> T2["反向传播"] --> T3["参数更新"]
end
B --> 训练
训练 --> C["推理阶段"]
C --> D["输出结果"]
classDef hot fill:#f5e6c0,stroke:#8b7355;
class T1,T2,T3 hot;
图 1：含子图方向控制（训练阶段内部 LR 排布）与 classDef 着色的流程图。
把一个主题发散成多层结构，适合梳理「失败空间」「知识地图」「方案分类」。层级靠缩进表达，不用箭头。
mindmap
root(("整帧/全身
失败空间"))
身份
"1 分钟后身份漂移"
"脸部细节变化"
动作
"手指变形"
"手势与语义不符"
场景
"背景闪烁/漂移"
"衣服纹理抖动"
长时序
"累积误差"
"时序一致性下降"
图 2：思维导图。根节点用 root(("...")) 包裹，特殊字符必须加引号。
把多个方案放进两个维度构成的四象限里做定位与权衡。注意坐标是 0~1 归一化值，象限编号逆时针。
quadrantChart title 全身生成底座架构的成本-稳定性定位 x-axis "训练/推理成本低" --> "训练/推理成本高" y-axis "长时序稳定性差" --> "长时序稳定性好" quadrant-1 "高成本高稳定" quadrant-2 "低成本高稳定" quadrant-3 "低成本低稳定" quadrant-4 "高成本低稳定" "GAN": [0.2, 0.2] "UNet + Diffusion": [0.5, 0.55] "DiT": [0.85, 0.85]
图 3：象限图。数据点写成 "名称": [x, y]，取值范围 0~1。
技术演进史、发展脉络、项目里程碑，比 gantt 轻量，不需要真实日期。
timeline title 视觉 Tokenizer 演进 2021 : VQ-GAN 2022 : MaskGIT 2023 : "TiTok（1D tokenizer）" 2024 : "TokenFlow / 双码本统一"
图 4：时间线。每行格式为「时间段 : 事件」。
状态机、生命周期、训练/推理阶段流转。[*] 表示起始/终止伪状态。
stateDiagram-v2 [*] --> 空闲 空闲 --> 预填充: 收到请求 预填充 --> 解码: prefill 完成 解码 --> 解码: 逐 token 生成 解码 --> 空闲: 输出 EOS 解码 --> [*]: 超时中断
图 5：状态图。转移写成「A --> B: 触发条件」。
协议交互、推理调用链，支持 loop / alt / opt / par 等交互逻辑块。
sequenceDiagram
participant C as 客户端
participant S as 推理引擎
participant K as KV Cache
C->>S: 发送 prompt
activate S
S->>K: 写入 prefill KV
loop 每个生成步
S->>K: 读取历史 KV
S-->>C: 流式返回 token
end
alt 命中缓存
S->>K: 复用前缀 KV
else 未命中
S->>K: 重新计算
end
deactivate S
图 6：时序图。participant 定义参与者，loop/alt 包裹交互逻辑。
讲分支策略、版本演进、发布流程。id 和 tag 的值用引号包裹。
gitGraph commit id: "init" branch dev checkout dev commit id: "feat A" commit id: "feat B" checkout main merge dev tag: "v1.0"
图 7：分支图。核心指令 commit / branch / checkout / merge。
v11 新增的轻量趋势图。注意它是 beta 特性，仅用于简单示意，复杂数据图请用 JSXGraph。
xychart-beta title "推理吞吐随 batch size 变化" x-axis [1, 2, 4, 8, 16] y-axis "吞吐 (token/s)" 0 --> 4000 line [320, 600, 1100, 2100, 3600]
图 8：折线图。x-axis 为离散刻度，y-axis 含上下限。