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

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

简介

本文将主要介绍使用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

效果：