使用教程：从入门到精通
Mermaid 是一种使用文本生成流程图、饼状图、甘特图等图表的描述语言，它可以帮助用户以简单、直观的方式创建各种类型的图表，包括流程图、时序图、甘特图等。

1 如何使用 Mermaid？

  • 在 HTML 或 Markdown 文件中引用 Mermaid 库和 Mermaid CSS 样式表。
  • 使用 Mermaid 的 CLI 工具在命令行中生成图表，或使用 Mermaid 的 API 在自己的应用程序中生成图表。

具体而言，

  • 如果只是轻量级、偶尔使用，推荐 Mermaid 在线渲染编辑器——Mermaid Live Editor
  • 推荐使用 Markdown 编辑器，比如 Typora，Joplin.
  • 一些兼容 Markdown 语法，支持 Mermaid Code 的现代编辑器，比如 FlowUs 息流.
  • 流程图工具均支持 Mermaid 语法进行程序绘图。比如，VisionOn.
  • 更多内容，推荐阅读 Mermaid 官方文档。

2 Mermaid 支持哪些类型的图表？

  1. 流程图（Flowchart）：展示过程、决策和操作流程。
  2. 序列图（Sequence Diagram）：展示对象之间的交互顺序。
  3. 甘特图（Gantt Chart）：展示项目计划和进度。
  4. 类图（Class Diagram）：展示类的结构和关系。
  5. 饼图（Pie Chart）：展示数据占比。
  6. 旅程图（Journey）：展示用户如何与应用程序交互。

除此之外，Mermaid 还支持其他类型的图表；

3 Mermaid 语法

3.1 Flow Chart

3.1.1 连线类型

3.1.2 形状颜色

1
2
3
4
5
6
7
8
9
10
11
graph TD
	subgraph Subgraph A
		A --> B -.-> C <---> D
		A ==> C1
		C1 ----o D1
		C1 ----x E1
	end
	style A fill:#f9c;
  style B stroke:#333,stroke-width:4px;
  style C fill:#f96,stroke:#333,stroke-width:2px;
  style D fill:#fc9,stroke:#f63,stroke-width:4px,stroke-dasharray: 5 5;

1
2
3
4
5
6
7
flowchart LR
		A[Hard edge] -->|Link text| B(Round edge)
		B --> C{Decision}
		C -->|One| D[Result one]
		C -->|Two| E[Result two]
		style A fill:#f9f,stroke:#333,stroke-width:4px
		style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5

3.2 Sequence Diagram

1
2
3
4
5
6
7
8
9
10
11
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
sequenceDiagram
    participant Alice
    participant John

    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.

3.3 Gantt Chart

1
2
3
4
5
6
7
8
9
10
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

3.4 Pie Chart

1
2
3
4
5
6
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.06
    "Magnesium" : 10.01
    "Iron" :  5

3.5 Class diagram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

1
2
3
4
5
6
7
8
9
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

3.6 Journey Diagram

1
2
3
4
5
6
7
8
9
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

3.7 Requirement Diagram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
requirementDiagram

    requirement test_req {
				id: 1
				text: the test text.
				risk: high
				verifymethod: test
    }

    element test_entity {
				type: simulation
    }

    test_entity - satisfies -> test_req

3.8 Git graph

1
2
3
4
5
6
7
8
9
10
11
gitGraph
   commit
   commit
   branch develop
   commit
   checkout main
   commit
   commit
   merge develop
   commit
   commit