Mermaid 是一种基于 Javascript 的绘图工具，使用类似于 Markdown 的语法，使用户可以方便快捷地通过代码创建图表。Typora 支持渲染 Mermaid。

1. 介绍

1.1 Mermaid 能绘制哪些图？

饼状图：使用 pie 关键字，具体用法后文将详细介绍
流程图：使用 graph 关键字，具体用法后文将详细介绍
序列图：使用 sequenceDiagram 关键字
甘特图：使用 gantt 关键字
类图：使用 classDiagram 关键字
状态图：使用 stateDiagram 关键字
用户旅程图：使用 journey 关键字

2. 流程图

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

2.1 方向和节点

方向描述

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

节点定义

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

graph TB
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D((keep))
C --> E[Edit Definition]
E --> B
D --> F>Save Image and Code]
F --- B

graph TB
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D((keep))
C --> E[Edit Definition]
E --> B
D --> F>Save Image and Code]
F --- B

2.2 连线和文字

节点间的连线

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

graph TB

A--> |哈哈| B
B-.-> C
C--- D
D==> F
F-.-> |哈哈|G

graph TB

A--> |哈哈| B
B-.-> C
C--- D
D==> F
F-.-> |哈哈|G

3. 序列图

3.1 声明

如果不显示声明，参与者将根据第一次出现的顺序排列。

1
2
3

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

主动声明以定义顺序

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

3.2 箭头和消息

有一个-是实线，两个-是虚线。

sequenceDiagram
    A->B: 无箭头实线
    A-->B: 无箭头虚线(点线)
    A->>B: 有箭头实线
    A-->>B: 有箭头实线
    A-x B: 有箭头实线，加上叉
    A--x B: 有箭头虚线，加上叉

sequenceDiagram
    A->B: 无箭头实线
    A-->B: 无箭头虚线(点线)
    A->>B: 有箭头实线
    A-->>B: 有箭头实线
    A-x B: 有箭头实线，加上叉
    A--x B: 有箭头虚线，加上叉

3.3 活动期

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John

sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% activate 角色名 表示激活控制焦点
    activate John
    John-->>Alice: Great!
    %% deactivate 角色名 表示控制焦点结束
    deactivate John

使用 +/- 的更方便的写法：

1
2
3

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

3.4 备注

语法：Note [ right of | left of | over ] [Actor]。

表述	含义
right of	右侧
left of	左侧
over	在当中，可以横跨多个参与者

1
2
3

sequenceDiagram
    participant John
    Note right of John: Text in note

sequenceDiagram
    participant John
    Note right of John: Text in note

3.5 实战

sequenceDiagram
participant L
actor A
participant A的链接 as A的专属链接
actor B
participant B的链接 as B的专属链接
participant R


L-->R: case 1 正常流程
A->>+A的链接: 绑定
A的链接-->>-A: 绑定成功
A->>A的链接: 点击链接
A的链接-->>A: 当前微信已被【A的APPid】绑定账号（文案1）
A->>B的链接: 点击链接
B的链接-->>A: 当前【A的APPid】已被别的微信绑定（文案2）
B->>A的链接: 点击链接
A的链接-->>B: 当前微信【A的微信id】已被别的账号绑定（文案3）
B->>B的链接: 点击链接
B的链接-->>B: 进入绑定页面

R-->R: 
R-->R: 
L-->R: case 2 误绑流程
A->>+B的链接: 绑定
B的链接-->>-A: 绑定成功
A->>A的链接: 点击链接
A的链接-->>A: 当前【A的APPid】已被别的微信绑定（文案2）
A->>B的链接: 点击链接
B的链接-->>A: 当前微信已被【A的APPid】绑定账号（文案1）
B->>A的链接: 点击链接
A的链接-->>B: 进入绑定页面
B->>B的链接: 点击链接
B的链接-->>B: 当前微信【B的微信id】已被别的账号绑定（文案3）

sequenceDiagram
participant L
actor A
participant A的链接 as A的专属链接
actor B
participant B的链接 as B的专属链接
participant R


L-->R: case 1 正常流程
A->>+A的链接: 绑定
A的链接-->>-A: 绑定成功
A->>A的链接: 点击链接
A的链接-->>A: 当前微信已被【A的APPid】绑定账号（文案1）
A->>B的链接: 点击链接
B的链接-->>A: 当前【A的APPid】已被别的微信绑定（文案2）
B->>A的链接: 点击链接
A的链接-->>B: 当前微信【A的微信id】已被别的账号绑定（文案3）
B->>B的链接: 点击链接
B的链接-->>B: 进入绑定页面

R-->R: 
R-->R: 
L-->R: case 2 误绑流程
A->>+B的链接: 绑定
B的链接-->>-A: 绑定成功
A->>A的链接: 点击链接
A的链接-->>A: 当前【A的APPid】已被别的微信绑定（文案2）
A->>B的链接: 点击链接
B的链接-->>A: 当前微信已被【A的APPid】绑定账号（文案1）
B->>A的链接: 点击链接
A的链接-->>B: 进入绑定页面
B->>B的链接: 点击链接
B的链接-->>B: 当前微信【B的微信id】已被别的账号绑定（文案3）

Levon's Blog

mermaid绘图教程