本文主要是介绍Mermaid使用教程（绘制各种图），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Mermaid使用教程（绘制各种图）
文章目录
- Mermaid使用教程（绘制各种图）
- 简介
- 饼状图
- 简单的例子
- 应用案例
- 序列图
- 简单案例
- 应用案例
- 另一个应用案例
- 甘特图
- 简单案例
- 应用案例
- 一个更为复杂的应用案例
- Git图
- 简单案例
- 总结
简介
本文将主要介绍使用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 提交历史图等。
-
流程图：使用
graph关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。 -
序列图：也使用
graph关键字，但通常指定方向（如LR表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。 -
甘特图：虽然 Mermaid 本身不直接支持甘特图，但可以通过一些变通的方法（如使用流程图）来模拟甘特图的效果。然而，标准的 Mermaid 语法不包括专门用于甘特图的指令。
-
Git 提交历史图：关于这一点，上面的回答可能有误导之嫌。实际上，Mermaid 本身不直接支持 Git 提交历史图的生成。Git 提交历史图通常使用其他工具（如 GitGraph.js）来生成。Mermaid 更专注于流程图和序列图等通用图表的绘制。
总结来说，Mermaid 是一个强大的工具，用于在 Markdown 文档中创建各种类型的图表。
然而，需要注意的是，它可能不支持所有类型的图表，特别是像甘特图和 Git 提交历史图这样的专门用途的图表。对于这些特定需求，可能需要寻找其他专门的工具或库。
这篇关于Mermaid使用教程（绘制各种图）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
