Mermaid

基本介绍

Mermaid 是一个基于 JavaScript 的图表和图表工具，它使用受 Markdown 启发的文本定义和渲染器来创建和修改复杂的图表。

Mermaid 的主要目的是帮助文档跟上发展的步伐。

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

流程图

所有流程图都由节点、几何形状和边缘、箭头或线条组成。Mermaid代码定义了这些节点和边的制作和交互方式。

普通结点

1
2
flowchart LR
    节点
1
2
flowchart LR
    节点

带文本的节点

还可以在框中设置与 id 不同的文本。如果多次执行此操作，则为将使用的节点找到的最后一个文本。此外，如果稍后为节点定义边，则可以省略文本定义。在呈现框时将使用先前定义的那个。

1
2
flowchart LR
    id[结点文本]
1
2
flowchart LR
    id[结点文本]

图表

该语句声明了流程图的方向。

流程图从上到下TD 或 TB

1
2
flowchart TD
    开始 --> 结束
1
2
flowchart TD
    开始 --> 结束

流程图从左到右LR

1
2
flowchart LR
    开始 --> 结束
1
2
flowchart LR
    开始 --> 结束
可选的方向
  • TB - 从上到下
  • TD - 自上而下/与从上到下相同
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右

节点形状

具有圆边的节点

1
2
flowchart LR
    id(节点文本)
1
2
flowchart LR
    id(节点文本)

体育场形状的节点

1
2
flowchart LR
    id([节点文本])
1
2
flowchart LR
    id([节点文本])

子例程形状中的节点

1
2
flowchart LR
    id[[节点文本]]
1
2
flowchart LR
    id[[节点文本]]

圆柱形节点

1
2
flowchart LR
    id[(节点文本)]
1
2
flowchart LR
    id[(节点文本)]

圆形的节点

1
2
flowchart LR
    id((节点文本))
1
2
flowchart LR
    id((节点文本))

不对称形状的节点

1
2
flowchart LR
    id>节点文本]
1
2
flowchart LR
    id>节点文本]

菱形节点

1
2
flowchart LR
    id{节点文本}
1
2
flowchart LR
    id{节点文本}

六边形节点

1
2
flowchart LR
    id{{节点文本}}
1
2
flowchart LR
    id{{节点文本}}

平行四边形节点

1
2
flowchart TD
    id[/节点文本/]
1
2
flowchart TD
    id[/节点文本/]

反向平行四边形节点

1
2
flowchart TD
    id[\节点文本\]
1
2
flowchart TD
    id[\节点文本\]

梯形节点

1
2
flowchart TD
    id[/节点文本\]
1
2
flowchart TD
    id[/节点文本\]

反向梯形节点

1
2
flowchart TD
    id[\节点文本/]
1
2
flowchart TD
    id[\节点文本/]

连接线

带箭头的连接线

1
2
flowchart LR
    A-->B
1
2
flowchart LR
    A-->B

无箭头的连接线

1
2
flowchart LR
    A --- B
1
2
flowchart LR
    A --- B

带文本的连接线

1
2
flowchart LR
    A-- 文本描述 ---B
1
2
flowchart LR
    A-- 文本描述 ---B

虚线连接线

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

加粗连接线

1
2
flowchart LR
   A ==> B
1
2
flowchart LR
   A ==> B

链式连接

1
2
flowchart LR
   a --> b & c--> d
1
2
flowchart LR
   a --> b & c--> d
1
2
flowchart TB
    A & B--> C & D
1
2
flowchart TB
    A & B--> C & D

其他连接

1
2
3
4
flowchart TD
    A o--o B
    C <--> D
    E x--x F
1
2
3
4
flowchart TD
    A o--o B
    C <--> D
    E x--x F

子图

1
2
3
subgraph title
    graph definition
end

示例

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

子图的连接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

交互

可以将单击事件绑定到节点，单击可以导致JavaScript回调或打开一个想新标签页。

1
2
click nodeId callback
click nodeId call callback()

注释

可以在流程图中输入注释，解析器将忽略这些注释。注释需要单独一行，并且必须以 %%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何流语法。

样式

连接的样式

可以设置链接的样式。例如，您可能希望设置在流程中向后移动的链接的样式。由于链接没有与节点相同的ID，因此需要一些其他方法来决定链接应附加到的样式。而不是 id，而是使用在图形中定义链接的顺序号，或使用默认值应用于所有链接。在下面的示例中，link Style 语句中定义的样式将属于图形中的第四个链接：

1
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
节点的样式

可以将特定样式（如较粗的边框或不同的背景色）应用于节点。

1
2
3
4
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
1
2
3
4
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
类

比每次都定义样式更方便的是定义一类样式并将此类附加到应具有不同外观的节点。

定义类

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

使用类

1
class nodeId1,nodeId2 className;

示例

1
2
3
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;
1
2
3
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

图标

可以从font awesome添加图标。

1
2
3
4
5
flowchart 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?)
1
2
3
4
5
flowchart 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?)

时序图

语法

参与者

可以隐式定义参与者。参与者或参与者按在图表源文本中的出现顺序呈现。有时，您可能希望以与参与者在第一条消息中的显示顺序不同的顺序显示参与者。

1
2
3
4
5
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
1
2
3
4
5
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
角色

如果您特别希望使用 actor 符号而不是带有文本的矩形，则可以通过使用 actor 语句来实现，如下所示。

1
2
3
4
5
sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
1
2
3
4
5
sequenceDiagram
    actor Alice
    actor Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
别名
1
2
3
4
5
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
1
2
3
4
5
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
消息

消息可以是两个，可以实心显示或用虚线显示。

1
[Actor][Arrow][Actor]:Message text
类型 描述
-> 不带箭头的实线
–> 不带箭头的虚线
->> 带箭头的实线
–>> 带箭头的虚线
-x 末端有十字的实线
–x 虚线末端带有十字
-) 末端有一个打开箭头的实线（异步）
–) 末尾带有打开箭头的虚线（异步）
注释

可以向串行图添加注释。这是通过注解[ right of | left of | over ] [Actor]: Text in note content来完成的

1
2
3
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
1
2
3
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
循环
1
2
3
loop Loop text
... statements ...
end

示例

1
2
3
4
5
sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end
1
2
3
4
5
sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end
并行

可以显示并行发生的动作。

1
2
3
4
5
6
7
par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

示例

1
2
3
4
5
6
7
8
sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!
1
2
3
4
5
6
7
8
sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!