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

效果：

应用案例

代码：

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 提交历史图等。

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

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

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

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

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

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