Mermaid 简明教程

参考资料

  1. Mermaid 官方文档:mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
  2. Github:Mermaid 中文说明文档
  3. Mermaid 在线编辑 Github:mermaid-live-editor
  4. VScode 插件:Markdown Preview Mermaid Support
  5. VScode 插件:Mermaid Markdown Syntax Highlighting

推荐阅读

  1. 个人博客:Mermaid 流程图 - Sherwood 的博客

流程图快速入门

案例 1:常规流程图

1
2
3
4
5
6
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
1
2
3
4
5
6
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
  • 第一行:TD(Top down)自上而下;
    除此之外,还有上 (Top) 下 (Bottom) 左 (Left) 右 (Right),可以两两组合来确定流程图的方向

  • 第二行:中括号表示图形中的矩形,圆括号为圆角矩形,两竖线之间的表示箭头上的文字
    除此之外,还有各种箭头和图形样式,这里不再列举,详细请查看官方文档和 Mermaid 流程图 - Sherwood 的博客

案例 2:带有子图的流程图

子图的基本语法为

1
2
3
subgraph title
graph definition
end

完整案例如下

1
2
3
4
5
6
7
8
9
10
11
flowchart RL
b1-->|"username = "zhangsan""|servlet1
servlet1-->|data|b1
    subgraph Browsers
    b1
    b2
    end
    subgraph servers
    servlet1
    servlet2
    end
1
2
3
4
5
6
7
8
9
10
11
flowchart RL
b1-->|"username = "zhangsan""|servlet1
servlet1-->|data|b1
    subgraph Browsers
    b1
    b2
    end
    subgraph servers
    servlet1
    servlet2
    end

特别注意:两竖线中的内容(也就是箭头上的文字)不能包含双引号,在 Mermaid 中算是特殊符号,请查阅 Mermaid 流程图 - Sherwood 的博客,需要额外进行处理。" 来表示双引号。所以,在箭头上还是尽量少用双引号吧😀

以下方式均会导致绘图出错

1
2
3
b1-->|1.username = '"zhangsan"'|servlet1
b1-->'|1.username = "zhangsan"|'servlet1
b1-->|'1.username = "zhangsan"'|servlet1

正确的处理方式

1
b1-->|"username = "zhangsan""|servlet1

基础表达形式

直线结构

1
A[Christmas] -->|Get money| B(Go shopping)

![[Pasted image 20240327083121.png]]

多分支结构

1
2
3
4
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]

![[Pasted image 20240327083210.png]]

多合一结构

1
2
3
A --> C
B --> C
D --> C

![[Pasted image 20240327083404.png]]

需求

比如说一个任务流程图,需要同时确认了 A 和 B,才能执行 C,那么流程图该怎么表达

参考案例 1:

1
2
3
4
5
6
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]

参考案例 2:

1
2
3
4
graph TD
A[First node] --> C
B --> C
D --> C

根据案例 2,如何给 A,B 添加样式,以区别显示呢:

1
2
3
4
5
6
7
8
graph TD
style A fill:#9f9,stroke:#333,stroke-width:2px;
style B fill:red;
style D fill:cyan,stroke:dark gray;
style C fill:yellow;
A --> C
B --> C
D --> C