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);
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
