Mermaid 简明教程

发表于 更新于 本文字数： 2.3k 阅读时长 ≈ 2 分钟

参考资料

  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