mermaid简介

mermaid简介

• 请使用亮色主题观看
• 举个例子

graph LR; s-->|23333333|1 1-->|23333333|t 1-->|1|2 2-->|23333333|t s-->|23333333|2

Graph

• 关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如

 graph LR
  A --- B

• 是这个样子的

graph LR A --- B

• 各种方向

TB（top bottom）: 从上到下
BT（bottom top）: 从下到上
RL（right left）: 从右到左
LR（left right）: 从左到右
TD 与 TB 一样表示从上到下

节点

• 有以下几种节点和形状：

默认节点 A
文本节点 B[bname]
圆角节点 C(cname)
圆形节点 D((dname))
非对称节点 E>ename]
菱形节点 F{fname}

• 注意中间是不能有空格的
• 以上大写字母表示节点，name表示它的名字，如下图。默认节点的A同时表示该节点和它的名字，例如上图的A和B。
• 举个例子

源代码

graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{fname}

graph TB A B[bname] C(cname) D((dname)) E>ename] F{fname}

连线

• 节点间的连接线有多种形状，而且可以在连接线中加入标签：

箭头连接 A1 --> B1
开放连接 A2 --- B2
标签连接 A3 --text--- B3 或者 A3 ---|text|B3
箭头标签连接 A4 --text--> B4 或者 A4 -->|text| B4
虚线开放连接 A5 .- B5 或者 A5 -.- B5 或者 A5 ..- B5
虚线箭头连接 A6 .-> B6 或者 A6 -.-> B6 或者 A6 ..-> B6
标签虚线连接 A7 -.text.- B7
标签虚线箭头连接 A8 -.text.-> B8
粗线开放连接 A9 === B9
粗线箭头连接 A10 ==> B10
标签粗线开放连接 A11 ==text=== B11
标签粗线箭头连接 A12 ==text==> B12

• 同时对于线的长短也是可以调整的，只需要多加几个-就行了，但是不能再少了。
• 举个例子

源代码

graph TB
    A1 --> B1
    A2 --- B2
    A3 --text--- B3
    %% A3 ---|text| B3
    A4 --text--> B4
    %% A4 -->|text| B4
    A5 .- B5
    %% A5 -.- B5
    %% A5 ..- B5
    A6 .-> B6
    %% A6 -.-> B6
    %% A6 ..-> B6
    A7 -.text.- B7
    A8 -.text.-> B8
    A9 === B9
    A10 ==> B10
    A11 ==text=== B11
    A12 ==text==> B12
    A13 ---> B13

graph TB A1 --> B1 A2 --- B2 A3 --text--- B3 %% A3 ---|text| B3 A4 --text--> B4 %% A4 -->|text| B4 A5 .- B5 %% A5 -.- B5 %% A5 ..- B5 A6 .-> B6 %% A6 -.-> B6 %% A6 ..-> B6 A7 -.text.- B7 A8 -.text.-> B8 A9 === B9 A10 ==> B10 A11 ==text=== B11 A12 ==text==> B12 A13 ---> B13

子图

• 使用subgraph建子图，必须以end为结尾。

源代码

graph TB
    subgraph one
        A1 --> B1
    end
    subgraph two
        A2 --> B2
    end
    subgraph three
        A3 --> B3
    end

graph TB subgraph one A1 --> B1 end subgraph two A2 --> B2 end subgraph three A3 --> B3 end

注释

• mermaid注释为%%

添加对font-awesome的图表字体支持

• css添加引用 @import url(https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css);
• 引用的语法为：++fa:#icon class name#++

源代码

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);

graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner);

- Fold Code

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);