Mermaid 实用教程

发表于 | 更新于 | 分类于
本文字数： 28k | 阅读时长 ≈ 25 分钟

相关文档

官方文档

Github地址

语句末尾分号是可选的。%% 行注释。

流程图

语法说明

图表方向

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

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

其中“方向描述”为

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

节点定义

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

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

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

节点间的连线

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

子图表

使用以下语法添加子图表

1
2
3
subgraph 子图表名称
    子图表中的描述语句...
end123

对 font awesome 的支持

使用 fa: #图表名称# 的语法添加 fontawesome。

1
2
3
4
5
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

img

方向

  • TB/TD - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
1
2
graph TB
    Start --> Stop

img

节点

1
2
graph LR
    id

img

1
2
graph LR
    id[带文字节点]

img

1
2
graph LR
    id(圆角节点)

img

1
2
graph LR
    id((圆形节点))

img

1
2
graph LR
    id>不对称节点]

img

1
2
graph LR
    id{菱形节点}

img

连接线

实线，箭头，无文字

1
2
graph LR
    A-->B

img

实线，无箭头，无文字

1
2
graph LR
    A---B

img

实线，无箭头，文字

前面两个 -，后面三个 -

1
2
graph LR
    A-- 文字 ---B

或

1
2
graph LR
    A--- |文字| B

img

实线，箭头，文字

1
2
graph LR
    A-- 文字 -->B

或

1
2
graph LR
    A--> |文字| B

img

虚线，箭头，无文字

1
2
graph LR;
   A-.->B;

img

虚线，箭头，文字

1
2
graph LR
   A-. text .-> B

img

大箭头，无文字

1
2
graph LR
   A ==> B

img

大箭头，文字

1
2
graph LR
   A == text ==> B

img

特殊语法

引号

文字里用引号避免一些特殊字符的错误。比如矩形节点里有 () 时就无法渲染，所以加上引号。

1
2
graph LR
    id1["This is the (text) in the box"]

img

实体字符

可以使用 HTML 中的实体字符。

1
2
graph LR
     A["A double quote:#quot;"] -->B["A dec char:#9829;"]

img

子图

1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

img

样式

linkStyle 后面的数字表示第几根线，从 0 开始。可以指定颜色和粗细。

1
2
3
4
5
6
7
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
    linkStyle 0 stroke:#0ff,stroke-width:2px;
    linkStyle 3 stroke:#ff3,stroke-width:4px;

img

可以设置节点背景，边框颜色，粗细，实线还是虚线

1
2
3
4
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

img

样式类

1
2
3
4
5
6
7
8
graph LR
    A-->B

    %% 定义样式类
    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

    %% 应用样式类，markdown里没效果
    class A className

img

1
classDef default fill:#f9f,stroke:#333,stroke-width:4px;

定义一个名为 default 的类，节点没有指定特定样式类时，将都会应用这个样式类。

图标

可以使用 Font Awesome 图标。语法 fa:icon class name。

1
2
3
4
5
graph TD
   B["fa:fa-twitter for peace"]
   B-->C[fa:fa-ban forbidden]
   B-->D(fa:fa-spinner);
   B-->E(A fa:fa-camera-retro perhaps?);

img

时序图

1
2
3
4
5
6
7
8
9
10
11
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!

img

参与者

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

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

img

第一条语句出现了两个参与者角色，而在这条语句中，Alice 在 John 之前，所以图中也是这个顺序。如果不想根据第一次出现的顺序来排，可以主动声明以定义顺序：

1
2
3
4
5
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

img

别名

可以给角色写一个简短的别名以方便书写。

1
2
3
4
5
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

img

消息

消息连线有六种样式。

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

1
2
3
4
5
6
7
sequenceDiagram
    A->B: 无箭头实线
    A-->B: 无箭头虚线(点线)
    A->>B: 有箭头实线
    A-->>B: 有箭头实线
    A-x B: 有箭头实线，加上叉
    A--x B: 有箭头虚线，加上叉

img

活动期

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

img

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

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

img

可以嵌套：

1
2
3
4
5
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

img

备注

语法：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

img

over 可用于单独一个角色上，也可以用于相邻两个角色间：

1
2
3
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

img

循环

语法：

1
2
3
4
5
6
7
8
9
10
loop Loop text
... statements ...
end
sequenceDiagram
    Alice->John: Hello John, how are you?
    %% loop 后跟循环体说明文字
    loop Every minute
        John-->Alice: Great!
    %% 标记循环结束
    end

img

选择

语法：

1
2
3
4
5
alt Describing text
... statements ...
else
... statements ...
end

可选条件，比如在没有 else 分支的情况下使用，有点类似 java 中的 switch 的 default 分支，代表剩下所有情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
opt Describing text
... statements ...
end
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

img