Mermaid

这是一个画图的东西,他可以画有向图、无向图、流程图、时序图、类图、状态图等等,官网在这
有一个坑,就是md文件第一非空行不可以是#mermaid, 否则渲染失败,所以我这用了Mermaid作为开头,

why this blog

简单介绍一下用法,避免每次都去官网找半天

基础用法

参数 备注
TB top bottom
BT bottom top
RL right left
LR left right
TD same as TB

节点形状

1
2
3
4
5
6
graph TB
id1[id1]
id2(id2)
id3([id3])
id4[(id4)]
id5((id5))
1
2
3
4
5
6
graph TB
id1[id1]
id2(id2)
id3([id3])
id4[(id4)]
id5((id5))

有向边无向边

1
2
3
4
graph LR
A-->B---C--hello-->D--word---E
A-.->F==>G-.hello.->H==word==>I
E & I-->1 & 2-->End
1
2
3
4
graph LR
A-->B---C--hello-->D--word---E
A-.->F==>G-.hello.->H==word==>I
E & I-->1 & 2-->End

子图

1
2
3
4
5
6
7
8
9
graph LR
a1-->b2
b1-->a2
subgraph A
a1-->a2
end
subgraph B
b1-->b2
end
1
2
3
4
5
6
7
8
9
graph LR
a1-->b2
b1-->a2
subgraph A
a1-->a2
end
subgraph B
b1-->b2
end

文字

1
2
graph LR
A[我是文字]
1
2
graph LR
A[我是文字]

颜色

1
2
3
graph LR
A[红色]
style A fill: yellow
1
2
3
graph LR
A[红色]
style A fill: yellow

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
graph LR
%% style
classDef green fill:#a3e4d7,stroke:#333,stroke-width:1px
classDef blue fill:#d6eaf8,stroke:#333,stroke-width:1px
classDef brown fill:#edbb99,stroke:#333,stroke-width:1px
classDef grey fill:#f2f3f4,stroke:#333,stroke-width:1px

%% point
start((数据源)):::green
op1(算子1):::blue
op2(算子1):::blue
op3(算子1):::blue
op4(算子2):::blue
op5(算子2):::blue
op6(算子2):::blue
output((输出)):::brown
shuffle((shuffle)):::grey

%% edge
start --> op1 & op2 & op3 --- shuffle --> op4 & op5 & op6 --> output

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

参考

mermaid 给你的文档加层滤镜