# Mermaid 速查表

Mermaid 语言的核心，一次一条规则——源码摆在它画出来的图旁边。34 种图表族，真正会用到的那些语法。

## 多数图表都会用到的四样东西

方向、箭头、节点形状和样式——这里用流程图的语法来展示。不管你画什么，这四样都是最先碰到的，而且在大多数族里写法相同。

### 方向

第一行决定流向：TD 和 TB 一样，LR 和 RL 是横着走。

```mermaid
flowchart LR
  A[Start] --> B[Middle] --> C[End]
```

![一张从左到右的流程图，三个分别标着 Start、Middle 和 End 的方框由箭头相连。](/diagrams/flowchart/direction.svg)

### 箭头类型

连接两个节点有四种写法：实线、虚线、开放线和粗线。

```mermaid
flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]
```

![左边一个节点用实线箭头、虚线箭头、开放线和粗箭头分别连到右边四个节点。](/diagrams/flowchart/edges.svg)

### 节点形状

你敲的方括号就是你会得到的形状。这五种是 Mernyx 画成日常方框的。

```mermaid
flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]
```

![一张五个节点相连的流程图，每个形状都不同：矩形、圆角框、跑道形、子程序和数据库圆柱。](/diagrams/flowchart/shapes.svg)

### 给节点上样式

style 改一个节点；classDef 给样式起名，好反复用。

```mermaid
flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet
```

![两个方框由箭头相连。右边的框填成珊瑚色，左边的框填成浅灰。](/diagrams/flowchart/styling.svg)

## 这些图表族

每一族都有自己的页面、自己的语法和自己的规则。

- [Flowchart](/zh/cheat-sheet/flowchart/index.md): 方框、箭头和分支——大多数人说到 Mermaid 时指的那种图。
- [Sequence diagram](/zh/cheat-sheet/sequence/index.md): 参与者之间的消息，按先后排在时间上。
- [Class diagram](/zh/cheat-sheet/class/index.md): 类型、它们的成员，以及它们之间的关系。
- [State diagram](/zh/cheat-sheet/state/index.md): 状态、状态之间的迁移，以及中间的分支。
- [ER diagram](/zh/cheat-sheet/er/index.md): 实体、它们的字段，以及它们之间的基数。
- [Mindmap](/zh/cheat-sheet/mindmap/index.md): 一份会变成树的文本大纲，不用写一根箭头。
- [Architecture diagram](/zh/cheat-sheet/architecture/index.md): 服务、它们所属的分组，以及它们之间的边。
- [Requirement diagram](/zh/cheat-sheet/requirement/index.md): 需求、需求的种类，以及满足它们的东西。
- [Block diagram](/zh/cheat-sheet/block/index.md): 一堵块，从左往右读。
- [Swimlane diagram](/zh/cheat-sheet/swimlane/index.md): 一个流程按负责人分成几条泳道。
- [Agent flow diagram](/zh/cheat-sheet/agentflow/index.md): 一个智能体的步骤，以及每一步属于哪一类。
- [Use case diagram](/zh/cheat-sheet/usecase/index.md): 参与者、用例，以及拥有它们的系统。
- [Pie chart](/zh/cheat-sheet/pie/index.md): 一份带标签的数值清单，画成若干扇形。
- [Gantt chart](/zh/cheat-sheet/gantt/index.md): 任务、阶段和日期，沿着时间轴排开。
- [Quadrant chart](/zh/cheat-sheet/quadrant/index.md): 两条轴、四个象限，以及画在上面的点。
- [Radar chart](/zh/cheat-sheet/radar/index.md): 每个度量一条轴，每样被比较的东西一条曲线。
- [Treemap](/zh/cheat-sheet/treemap/index.md): 层层嵌套的矩形，面积就是数值。
- [Kanban diagram](/zh/cheat-sheet/kanban/index.md): 一列列卡片，一列对应工作中的一个阶段。
- [Packet diagram](/zh/cheat-sheet/packet/index.md): 一个网络包的比特，一段一段看。
- [Info diagram](/zh/cheat-sheet/info/index.md): Mermaid 的版本横幅——Mernyx 认得它，但还画不出来。
- [Timeline](/zh/cheat-sheet/timeline/index.md): 一侧是时期，旁边是事件。
- [Sankey diagram](/zh/cheat-sheet/sankey/index.md): 一股流量，每行写成三个字段。
- [User journey](/zh/cheat-sheet/journey/index.md): 一条路径，每一步都带一个分数。
- [Venn diagram](/zh/cheat-sheet/venn/index.md): 互相重叠的集合，以及它们共有的区域。
- [C4 diagram](/zh/cheat-sheet/c4/index.md): 架构视图，三个缩放层级。
- [Cynefin diagram](/zh/cheat-sheet/cynefin/index.md): 五个域，每个域有自己的决策方式。
- [Git graph](/zh/cheat-sheet/gitgraph/index.md): 把分支历史画出来。
- [XY chart](/zh/cheat-sheet/xychart/index.md): 两条轴上的折线图或柱状图。
- [Wardley map](/zh/cheat-sheet/wardley/index.md): 一个组件在可见性和演进度上处于什么位置。
- [Railroad diagram](/zh/cheat-sheet/railroad/index.md): 一条文法规则，画出来。
- [ZenUML diagram](/zh/cheat-sheet/zenuml/index.md): 一张为方法调用而写的时序图。
- [Event modeling diagram](/zh/cheat-sheet/eventmodeling/index.md): 信息是怎么随时间变化的。
- [Ishikawa diagram](/zh/cheat-sheet/ishikawa/index.md): 一个问题，和它下面的原因。
- [Tree view](/zh/cheat-sheet/treeview/index.md): 一份目录列表，画出来。

Mernyx 总共能渲染 34 种图表族。这张表覆盖了 34 种里的全部。

## 常见问题

### 这就是 Mermaid 的官方文档吗？

不是。官方 Mermaid 文档是穷尽式的——单是流程图那一页就有好几百种形状。这是一张核心语法的浓缩速查表，是你画图时翻的那部分。官方文档往深处钻的地方，这个页面直接给规则。

### 为什么这里的图和 mermaid.live 长得不一样？

因为它们不是 Mermaid.js 画的。这里的每一张图都由 Mernyx 自己的引擎渲染——就是 App 画布用的那个原生渲染器。配色、间距和字体都是 Mernyx 的，所以你在网页上看到的就是 App 画出来的。

### 这些代码片段能粘进任何 Mermaid 工具吗？

能。每个标题下面的源码都是普通 Mermaid，在哪儿都能用。旁边的图是 Mernyx 对这段源码的渲染结果——它是一幅插图，不是什么特殊格式。

### 这里覆盖了哪些图表族？

这张表覆盖 Mernyx 能渲染的 34 种图表族——每族一页，都从上面的清单里链过去。

### Mernyx 支持 Mermaid 的全部功能吗？

还不支持，而且这个站点不会假装支持。1.0 之后覆盖范围一直在扩大；能力矩阵列出了 34 个族各自能做什么——某个族做不到的事，App 里压根不摆出来，而不是悄悄失败。

## 在 Mernyx 里打开一个

从这个页面随便挑一段，粘进 Mernyx，然后在画布上挪一个节点。源码跟着走。