Mermaid使用教程（绘制各种图）

简介

本文将主要介绍使用Mermaid绘制各种各样的常用的图，例如：饼状图、序列图、甘特图等等，当然Mermaid也可以用来绘制流程图，可以参见我的另一篇文章：

https://blog.csdn.net/m0_54218263/article/details/135684176

饼状图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中绘制饼状图，可以使用以下语法：

graph TDA[饼状图] --> 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 TDA[饼状图] --> 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的代码如下所示：

pietitle Example Pie Chart"First slice": 30"Second slice": 20"Third slice": 50

生成的效果：

应用案例

mermaid的代码如下所示：

%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showDatatitle Key elements in Product X"Calcium" : 42.96"Potassium" : 50.05"Magnesium" : 10.01"Iron" :  5

生成的效果：

序列图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成序列图，可以使用以下语法：

graph LRA[开始] --> B[步骤1]B --> C[步骤2]C --> D[步骤3]D --> E[结束]

在上面的代码中，A 是序列图的起点，E 是终点，B、C 和 D 是序列图中的各个步骤。使用箭头 (-->) 表示各步骤之间的依赖关系。

您可以在代码中添加样式和注释以自定义序列图的外观和描述。例如，您可以使用以下语法为每个步骤添加样式和注释：

graph LRA[开始] --> B[步骤1 : 这是一个注释]B --> C[步骤2 : 这是另一个注释]C --> D[步骤3]D --> E[结束]

在上面的代码中，: 这是一个注释 和 : 这是另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。

简单案例

mermaid代码：

sequenceDiagramA->>B: Message 1B-->>A: Message 2

效果：

应用案例

代码：

sequenceDiagramparticipant Aliceparticipant BobAlice->>John: Hello John, how are you?loop HealthcheckJohn->>John: Fight against hypochondriaendNote right of John: Rational thoughts <br/>prevail!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!

效果：

另一个应用案例

代码：

sequenceDiagramparticipant Aliceparticipant Johnrect 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!endJohn-->>-Alice: I feel great!endAlice ->>+ John: Did you want to go to the game tonight?John -->>- Alice: Yeah! See you there.

效果：

甘特图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成甘特图，可以使用以下语法：

graph TDA[项目开始] --> B[任务1]B --> C[任务2]C --> D[任务3]D --> E[项目结束]B --> F[任务4]F --> E

在上面的代码中，A 是项目的起点，E 是终点，B、C、D 和 F 是项目中的各个任务。使用箭头 (-->) 表示任务之间的依赖关系。

您可以在代码中添加样式和注释以自定义甘特图的外观和描述。例如，您可以使用以下语法为每个任务添加样式和注释：

graph TDA[项目开始] --> B[任务1 : 这是一个注释]B --> C[任务2 : 这是另一个注释]C --> D[任务3]D --> E[项目结束]B --> F[任务4 : 还有一个注释]F --> E

在上面的代码中，: 这是一个注释、: 这是另一个注释 和 : 还有一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。

简单案例

代码：

gantttitle Example Gantt ChartdateFormat  YYYY-MM-DDsection Sectiontask 1: 2019-01-01, 30dtask 2: 2019-02-01, 14dtask 3: 2019-03-01, 7d

效果：

应用案例

代码：

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10section 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

效果：

一个更为复杂的应用案例

代码：

ganttdateFormat  YYYY-MM-DDtitle       Adding GANTT diagram functionality to mermaidexcludes    weekends%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)section A sectionCompleted task            :done,    des1, 2014-01-06,2014-01-08Active task               :active,  des2, 2014-01-09, 3dFuture task               :         des3, after des2, 5dFuture task2              :         des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison          :crit, done, after des1, 2dCreate tests for parser             :crit, active, 3dFuture task in critical line        :crit, 5dCreate tests for renderer           :2dAdd to mermaid                      :1dFunctionality added                 :milestone, 2014-01-25, 0dsection DocumentationDescribe gantt syntax               :active, a1, after des1, 3dAdd gantt diagram to demo page      :after a1  , 20hAdd another diagram to demo page    :doc1, after a1  , 48hsection Last sectionDescribe gantt syntax               :after doc1, 3dAdd gantt diagram to demo page      :20hAdd another diagram to demo page    :48h

效果：

Git图

Mermaid 是一个用于生成图表和流程图的 JavaScript 库，它使用 Markdown 语法进行绘图。要在 Mermaid 中生成 Git 提交历史图，可以使用以下语法：

graph TDA[提交历史]B[提交1] --> C[提交2]C --> D[提交3]D --> E[提交4]

在上面的代码中，A 是 Git 提交历史的起点，B、C、D 和 E 是各个提交。使用箭头 (-->) 表示提交之间的依赖关系。

您可以在代码中添加样式和注释以自定义 Git 提交历史图的外观和描述。例如，您可以使用以下语法为每个提交添加样式和注释：

graph TDA[提交历史]B[提交1 : 这是一个注释] --> C[提交2 : 这是另一个注释]C --> D[提交3 : 还有另一个注释]D --> E[提交4]

在上面的代码中，: 这是一个注释、: 这是另一个注释 和 : 还有另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。

简单案例

代码：

gitGraphcommitcommitbranch developcommitcommitcommitcheckout maincommitcommitmerge developcommitcommit

效果：

总结

接下来，做一个小小的总结：

我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。

1. 流程图：使用 graph 关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。

2. 序列图：也使用 graph 关键字，但通常指定方向（如 LR 表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。

3. 甘特图：虽然 Mermaid 本身不直接支持甘特图，但可以通过一些变通的方法（如使用流程图）来模拟甘特图的效果。然而，标准的 Mermaid 语法不包括专门用于甘特图的指令。

4. Git 提交历史图：关于这一点，上面的回答可能有误导之嫌。实际上，Mermaid 本身不直接支持 Git 提交历史图的生成。Git 提交历史图通常使用其他工具（如 GitGraph.js）来生成。Mermaid 更专注于流程图和序列图等通用图表的绘制。

总结来说，Mermaid 是一个强大的工具，用于在 Markdown 文档中创建各种类型的图表。

然而，需要注意的是，它可能不支持所有类型的图表，特别是像甘特图和 Git 提交历史图这样的专门用途的图表。对于这些特定需求，可能需要寻找其他专门的工具或库。