Mermaid 让你用缩进和箭头描述图，而不是用鼠标拖方块。写出来的东西是纯文本，能进 git，能 diff，能跟着文章一起改。
支持的图类型
| 类型 | 关键字 | 适合画 |
|---|---|---|
| 流程图 | flowchart | 步骤、判断分支 |
| 时序图 | sequenceDiagram | 谁先调谁、消息来回 |
| 状态图 | stateDiagram-v2 | 状态机、生命周期 |
| 甘特图 | gantt | 排期 |
| 类图 | classDiagram | 类之间的关系 |
| 饼图 | pie | 占比 |
一个流程图的例子
flowchart TB
A[读到一篇长文] --> B{有不懂的词?}
B -- 有 --> C[看它有没有词条]
C -- 有 --> D[点过去，读词条]
C -- 没有 --> E[记下来，之后补一个]
B -- 没有 --> F[读完，记一笔]
语法只有几个要点
- 第一行声明图类型，比如
flowchart LR。LR 是从左到右，TB 是从上到下。 - 节点用方括号命名显示文字，
A[原始数据]里的A是内部 id，方括号里才是显示的字。 - 箭头用
-->，上面带文字写成-->|文字|或-- 文字 -->。 - 判断节点用花括号：
B{缺失值?}。 - 缩进不重要，Mermaid 按行解析，不是按缩进。
为什么这个站不把它装成依赖
Mermaid 依赖的语法解析器拖进来一串间接依赖，审计报了高危漏洞。所以改成浏览器按需从 CDN 加载，具体过程写在那篇博客里。
后果是：页面里没有图表时，一个字节都不下载；有图表时要联网才能渲染。
图里别放敏感内容
按需加载走的是公开 CDN，图表源码会经过第三方。图和文章一样，默认是公开的。