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 给你的文档加层滤镜