Mermaid使用教程（绘制各种图）
文章目录
- Mermaid使用教程（绘制各种图）
- 简介
- 饼状图
- 简单的例子
- 应用案例
- 序列图
- 简单案例
- 应用案例
- 另一个应用案例
- 甘特图
- 简单案例
- 应用案例
- 一个更为复杂的应用案例
- Git图
- 简单案例
- 总结
简介
本文将主要介绍使用Mermaid绘制各种各样的常用的图，例如：饼状图、序列图、甘特图等等，当然Mermaid也可以用来绘制流程图，可以参见我的另一篇文章：
https://blog.csdn.net/m0_54218263/article/details/135684176
饼状图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中绘制饼状图，可以使用以下语法：
graph TD
A[饼状图] --> B[部分1]
A --> C[部分2]
A --> D[部分3]
B --> E[子部分1]
C --> F[子部分2]
D --> G[子部分3]
在上面的代码中，A 是整个饼状图的名称，B、C 和 D 是饼状图中的各个部分，E、F 和 G 是各部分下的子部分。使用箭头 (-->) 表示各部分之间的依赖关系。
您可以在代码中添加样式和颜色以自定义饼状图的外观。例如，您可以使用以下语法为每个部分添加不同的颜色：
graph TD
A[饼状图] --> B[部分1 : red]
A --> C[部分2 : green]
A --> D[部分3 : blue]
B --> E[子部分1 : red]
C --> F[子部分2 : green]
D --> G[子部分3 : blue]
在上面的代码中，: red、: green 和 : blue 是用于指定各部分颜色的样式。您可以根据需要自定义颜色和其他样式。
简单的例子
mermaid的代码如下所示：
pie
title Example Pie Chart
"First slice": 30
"Second slice": 20
"Third slice": 50
生成的效果：
应用案例
mermaid的代码如下所示：
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
生成的效果：
序列图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成序列图，可以使用以下语法：
graph LR
A[开始] --> B[步骤1]
B --> C[步骤2]
C --> D[步骤3]
D --> E[结束]
在上面的代码中，A 是序列图的起点，E 是终点，B、C 和 D 是序列图中的各个步骤。使用箭头 (-->) 表示各步骤之间的依赖关系。
您可以在代码中添加样式和注释以自定义序列图的外观和描述。例如，您可以使用以下语法为每个步骤添加样式和注释：
graph LR
A[开始] --> B[步骤1 : 这是一个注释]
B --> C[步骤2 : 这是另一个注释]
C --> D[步骤3]
D --> E[结束]
在上面的代码中，: 这是一个注释 和 : 这是另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。
简单案例
mermaid代码：
sequenceDiagram
A->>B: Message 1
B-->>A: Message 2
效果：
应用案例
代码：
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!
效果：
另一个应用案例
代码：
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.
效果：
甘特图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成甘特图，可以使用以下语法：
graph TD
A[项目开始] --> B[任务1]
B --> C[任务2]
C --> D[任务3]
D --> E[项目结束]
B --> F[任务4]
F --> E
在上面的代码中，A 是项目的起点，E 是终点，B、C、D 和 F 是项目中的各个任务。使用箭头 (-->) 表示任务之间的依赖关系。
您可以在代码中添加样式和注释以自定义甘特图的外观和描述。例如，您可以使用以下语法为每个任务添加样式和注释：
graph TD
A[项目开始] --> B[任务1 : 这是一个注释]
B --> C[任务2 : 这是另一个注释]
C --> D[任务3]
D --> E[项目结束]
B --> F[任务4 : 还有一个注释]
F --> E
在上面的代码中，: 这是一个注释、: 这是另一个注释 和 : 还有一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。
简单案例
代码：
gantt
title Example Gantt Chart
dateFormat YYYY-MM-DD
section Section
task 1: 2019-01-01, 30d
task 2: 2019-02-01, 14d
task 3: 2019-03-01, 7d
效果：
应用案例
代码：
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
效果：
一个更为复杂的应用案例
代码：
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
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
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Functionality added :milestone, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
效果：
Git图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成 Git 提交历史图，可以使用以下语法：
graph TD
A[提交历史]
B[提交1] --> C[提交2]
C --> D[提交3]
D --> E[提交4]
在上面的代码中，A 是 Git 提交历史的起点，B、C、D 和 E 是各个提交。使用箭头 (-->) 表示提交之间的依赖关系。
您可以在代码中添加样式和注释以自定义 Git 提交历史图的外观和描述。例如，您可以使用以下语法为每个提交添加样式和注释：
graph TD
A[提交历史]
B[提交1 : 这是一个注释] --> C[提交2 : 这是另一个注释]
C --> D[提交3 : 还有另一个注释]
D --> E[提交4]
在上面的代码中，: 这是一个注释、: 这是另一个注释 和 : 还有另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。
简单案例
代码：
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
效果：
总结
接下来，做一个小小的总结：
我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。
-
流程图：使用
graph关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。 -
序列图：也使用
graph关键字，但通常指定方向（如LR表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。 -
甘特图：虽然 Mermaid 本身不直接支持甘特图，但可以通过一些变通的方法（如使用流程图）来模拟甘特图的效果。然而，标准的 Mermaid 语法不包括专门用于甘特图的指令。
-
Git 提交历史图：关于这一点，上面的回答可能有误导之嫌。实际上，Mermaid 本身不直接支持 Git 提交历史图的生成。Git 提交历史图通常使用其他工具（如 GitGraph.js）来生成。Mermaid 更专注于流程图和序列图等通用图表的绘制。
总结来说，Mermaid 是一个强大的工具，用于在 Markdown 文档中创建各种类型的图表。
然而，需要注意的是，它可能不支持所有类型的图表，特别是像甘特图和 Git 提交历史图这样的专门用途的图表。对于这些特定需求，可能需要寻找其他专门的工具或库。
