1. 关于Mermaid

最近在使用Markdown写文章过程中，遇到了画流程图的问题，最后发现可以用 mermaid 完美实现，于是记录下学习笔记。

Mermaid 允许使用文本和代码创建图表和可视化。

官网：https://mermaidjs.github.io/
Github 项目地址：https://github.com/knsv/mermaid

它是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。

如果你熟悉 Markdown，那么学习 Mermaid 的语法应该没有问题。

图表和文档会耗费开发者宝贵的时间，并且很快就会过时。但是，没有图表或文档会破坏生产力并损害组织学习。

Mermaid 通过使用户能够创建易于修改的图表来解决这个问题，它也可以成为生产脚本（和其他代码片段）的一部分。

Mermaid 甚至可以让非程序员通过 Mermaid 在线编辑器轻松创建详细图和图表。教程有视频教程。

将 Mermaid 与你最喜欢的应用一起使用，查看社区集成的列表。

有关 Mermaid 及其一些更基本用途的更详细介绍，请参阅初学者指南和用法。

2. 实用教程

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。

2.1 流程图的参数

图表方向

mermaid 支持多种图表的方向，语法如下：

1 2	graph 方向描述图表中的其他语句...

其中“方向描述”为

用词	含义
`TB`	从上到下
`BT`	从下到上
`RL`	从右到左
`LR`	从左到右

节点定义

即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。

表述	说明
`id[文字]`	矩形节点
`id(文字)`	圆角矩形节点
`id((文字))`	圆形节点
`id>文字]`	右向旗帜状节点
`id{文字}`	菱形节点

Note：如果节点的文字中包含标点符号，需要时用双引号包裹起来。另外如果希望在文字中使用换行，请使用<br>替换换行

节点连线

表述	说明
`>`	添加尾部箭头
`-`	不添加尾部箭头
`--`	单线
`--text--`	单线上加文字
`==`	粗线
`==text==`	粗线加文字
`-.-`	虚线
`-.text.-`	虚线加文字

2.2 复杂案列

线形的思维导图 mindmap:

graph LR
A[判定三角形全等] --> B2[已知一边一角];
B2 --> B21>边为角的对边];
B21 --> B211>找任意一角 AAS];
B2 --> B22[边为角的邻边];
B22 --> B221>找角的另一邻边 SAS];
B22 --> B222>找边的另一邻角 ASA];
B22 --> B223>找边的对角 AAS];
A --> B3[已知两角];
B3 --> B31>找夹边 ASA];
B3 --> B32>找角的对边 AAS];

Results:

graph LR
A[判定三角形全等] --> B2[已知一边一角];
B2 --> B21>边为角的对边];
B21 --> B211>找任意一角 AAS];
B2 --> B22[边为角的邻边];
B22 --> B221>找角的另一邻边 SAS];
B22 --> B222>找边的另一邻角 ASA];
B22 --> B223>找边的对角 AAS];
A --> B3[已知两角];
B3 --> B31>找夹边 ASA];
B3 --> B32>找角的对边 AAS];

流程图：

graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

Results:

graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

3. 图表类型

Mermaid 在 Markdown 中的使用也颇为简单，只需要在代码块中使用 mermaid 即可渲染。

3.1 流程图

代码:

<pre class="mermaid">  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;</pre>

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

3.2 时序图

代码:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Results:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

3.3 甘特图

代码:

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

Reesult:

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

3.4 类图

代码:

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Results:

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

3.5实体关系图 - ❗实验

代码:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Results:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

3.6 用户旅程图

代码:

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Results:

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me