Mermaid 速查表
Mermaid 语言的核心，一次一条规则——源码摆在它画出来的图旁边。34 种图表族，真正会用到的那些语法。
这个站点上的每一张图都由
Mernyx——macOS 上的原生 Mermaid 编辑器绘制。不是浏览器里跑的 Mermaid.js，而是 App 画布用的同一个渲染器。
多数图表都会用到的四样东西
方向、箭头、节点形状和样式——这里用流程图的语法来展示。不管你画什么，这四样都是最先碰到的，而且在大多数族里写法相同。
第一行决定流向：TD 和 TB 一样，LR 和 RL 是横着走。
flowchart LR
A[Start] --> B[Middle] --> C[End]
放大图表连接两个节点有四种写法：实线、虚线、开放线和粗线。
flowchart LR
A[Solid] --> B[Target]
A -.-> C[Dotted]
A --- D[Open]
A ==> E[Thick]
放大图表你敲的方括号就是你会得到的形状。这五种是 Mernyx 画成日常方框的。
flowchart LR
A[Rectangle] --> B(Rounded)
B --> C([Stadium])
C --> D[[Subroutine]]
D --> E[(Database)]
放大图表style 改一个节点；classDef 给样式起名，好反复用。
flowchart LR
A[Normal] --> B[Highlighted]
style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
classDef quiet fill:#f0f0f3,stroke:#d4d4d8
class A quiet
放大图表这些图表族
每一族都有自己的页面、自己的语法和自己的规则。
34 个图表族
- Flowchart11 条规则方框、箭头和分支——大多数人说到 Mermaid 时指的那种图。打开速查表
- Sequence diagram8 条规则参与者之间的消息，按先后排在时间上。打开速查表
- Class diagram6 条规则类型、它们的成员，以及它们之间的关系。打开速查表
- State diagram7 条规则状态、状态之间的迁移，以及中间的分支。打开速查表
- ER diagram4 条规则实体、它们的字段，以及它们之间的基数。打开速查表
- Mindmap4 条规则一份会变成树的文本大纲，不用写一根箭头。打开速查表
- Architecture diagram4 条规则服务、它们所属的分组，以及它们之间的边。打开速查表
- Requirement diagram4 条规则需求、需求的种类，以及满足它们的东西。打开速查表
- Block diagram4 条规则一堵块，从左往右读。打开速查表
- Swimlane diagram4 条规则一个流程按负责人分成几条泳道。打开速查表
- Agent flow diagram4 条规则一个智能体的步骤，以及每一步属于哪一类。打开速查表
- Use case diagram4 条规则参与者、用例，以及拥有它们的系统。打开速查表
- Pie chart3 条规则一份带标签的数值清单，画成若干扇形。打开速查表
- Gantt chart4 条规则任务、阶段和日期，沿着时间轴排开。打开速查表
- Quadrant chart4 条规则两条轴、四个象限，以及画在上面的点。打开速查表
- Radar chart4 条规则每个度量一条轴，每样被比较的东西一条曲线。打开速查表
- Treemap3 条规则层层嵌套的矩形，面积就是数值。打开速查表
- Kanban diagram3 条规则一列列卡片，一列对应工作中的一个阶段。打开速查表
- Packet diagram2 条规则一个网络包的比特，一段一段看。打开速查表
- Info diagram1 条规则Mermaid 的版本横幅——Mernyx 认得它，但还画不出来。打开速查表
- Timeline3 条规则一侧是时期，旁边是事件。打开速查表
- Sankey diagram3 条规则一股流量，每行写成三个字段。打开速查表
- User journey3 条规则一条路径，每一步都带一个分数。打开速查表
- Venn diagram3 条规则互相重叠的集合，以及它们共有的区域。打开速查表
- C4 diagram3 条规则架构视图，三个缩放层级。打开速查表
- Cynefin diagram3 条规则五个域，每个域有自己的决策方式。打开速查表
- Git graph4 条规则把分支历史画出来。打开速查表
- XY chart4 条规则两条轴上的折线图或柱状图。打开速查表
- Wardley map3 条规则一个组件在可见性和演进度上处于什么位置。打开速查表
- Railroad diagram4 条规则一条文法规则，画出来。打开速查表
- ZenUML diagram2 条规则一张为方法调用而写的时序图。打开速查表
- Event modeling diagram4 条规则信息是怎么随时间变化的。打开速查表
- Ishikawa diagram2 条规则一个问题，和它下面的原因。打开速查表
- Tree view3 条规则一份目录列表，画出来。打开速查表
没有匹配的图表族。
Mernyx 总共能渲染 34 种图表族。这张表覆盖了 34 种里的全部。
常见问题
这就是 Mermaid 的官方文档吗？
不是。官方 Mermaid 文档是穷尽式的——单是流程图那一页就有好几百种形状。这是一张核心语法的浓缩速查表，是你画图时翻的那部分。官方文档往深处钻的地方，这个页面直接给规则。
为什么这里的图和 mermaid.live 长得不一样？
因为它们不是 Mermaid.js 画的。这里的每一张图都由 Mernyx 自己的引擎渲染——就是 App 画布用的那个原生渲染器。配色、间距和字体都是 Mernyx 的，所以你在网页上看到的就是 App 画出来的。
这些代码片段能粘进任何 Mermaid 工具吗？
能。每个标题下面的源码都是普通 Mermaid，在哪儿都能用。旁边的图是 Mernyx 对这段源码的渲染结果——它是一幅插图，不是什么特殊格式。
这里覆盖了哪些图表族？
这张表覆盖 Mernyx 能渲染的 34 种图表族——每族一页，都从上面的清单里链过去。
Mernyx 支持 Mermaid 的全部功能吗？
还不支持，而且这个站点不会假装支持。1.0 之后覆盖范围一直在扩大；能力矩阵列出了 34 个族各自能做什么——某个族做不到的事，App 里压根不摆出来，而不是悄悄失败。