Mermaid使用说明与案例

Mermaid 是一个基于 JavaScript 的图表库，通过简单的文本描述语法可以生成多种类型的图表。它能够直接在浏览器中渲染图表，也可以集成到 Markdown、HTML 等文档中。主要特点包括：

• 支持多种类型的图表，如流程图、序列图、甘特图等。
• 使用简单的文本语法描述，易于学习和使用。
• 支持在各种环境中集成和定制，满足不同需求。

在本篇博客中，我们将涵盖以下内容：

1. 安装和集成 Mermaid
2. 基本图表类型和语法
   • 流程图
   • 序列图
   • 甘特图
3. 高级用法和定制
   • 类图
   • 状态图
   • Pie 图
   • Entity-Relationship 图
4. 在不同环境中使用 Mermaid
   • 在网页中使用
   • 在 Markdown 中使用
5. 实际示例和应用场景

让我们开始探索如何利用 Mermaid 创建和定制您的图表！

---

1. 安装和集成 Mermaid

在网页中使用 Mermaid

要在网页中使用 Mermaid，您需要在 HTML 文件中引入 Mermaid 的 JavaScript 库文件。可以通过 CDN 加载最新版本：

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>

以上代码将 Mermaid 初始化并启动，使得所有带有 .mermaid 类的 <div> 元素中的 Mermaid 语法都会被渲染成图表。

在 Markdown 中使用 Mermaid

许多支持 Mermaid 的 Markdown 编辑器（如 Typora）可以直接渲染 Mermaid 语法。例如，在 Markdown 文件中使用如下语法：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

这将会在渲染时生成一个简单的流程图。

---

2. 基本图表类型和语法

2.1 流程图（Flowchart）

流程图是 Mermaid 中最基本的图表类型，用于展示过程和流程的关系。
例如，下面的mermaid流程图:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

渲染之后的结果如下:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

2.2 序列图（Sequence Diagram）

序列图用于展示参与者之间交互的顺序和消息流。

例如，下面的mermaid代码片段:

sequenceDiagram
    participant A
    participant B
    A->>B: 请求
    B-->>A: 响应

渲染之后的结果如下:

sequenceDiagram
    participant A
    participant B
    A->>B: 请求
    B-->>A: 响应

2.3 甘特图（Gantt Chart）

甘特图用于展示项目的计划和进度，包括任务和时间轴的安排。

gantt
    title 项目计划
    section 设计
    需求调研     :done, des1, 2022-06-01,2022-06-10
    概要设计     :done, des2, 2022-06-11,2022-06-20
    详细设计     :des3, 2022-06-21,2022-06-30

    section 开发
    编码         :crit, coding1, 2022-07-01, 20d
    自测         :crit, coding2, after coding1, 10d

    section 测试
    功能测试     :testing1, after coding2, 5d
    回归测试     :testing2, after testing1, 5d

    section 发布
    部署         :deploy1, after testing2, 3d
    发布         :deploy2, after deploy1, 2d

    section 支持
    运维支持     :support1, after deploy2, 30d

渲染之后的结果：

gantt
    title 项目计划
    section 设计
    需求调研     :done, des1, 2022-06-01,2022-06-10
    概要设计     :done, des2, 2022-06-11,2022-06-20
    详细设计     :des3, 2022-06-21,2022-06-30

    section 开发
    编码         :crit, coding1, 2022-07-01, 20d
    自测         :crit, coding2, after coding1, 10d

    section 测试
    功能测试     :testing1, after coding2, 5d
    回归测试     :testing2, after testing1, 5d

    section 发布
    部署         :deploy1, after testing2, 3d
    发布         :deploy2, after deploy1, 2d

    section 支持
    运维支持     :support1, after deploy2, 30d

---

3. 高级用法和定制

除了基本的流程图、序列图和甘特图外，Mermaid 还支持更多高级用法和定制选项。

3.1 类图（Class Diagram）

类图用于展示类和它们之间的关系。

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

渲染之后的结果：

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

3.2 状态图（State Diagram）

状态图用于展示对象在不同状态下的行为。

stateDiagram
    [*] --> Active

    state Active {
        [*] --> State1
        State1 --> State2
        State2 --> State1
        State2 --> [*]
    }

渲染之后的结果：

stateDiagram
    [*] --> Active

    state Active {
        [*] --> State1
        State1 --> State2
        State2 --> State1
        State2 --> [*]
    }

3.3 Pie 图（Pie Chart）

Pie 图用于展示数据的比例和分布。

pie
    title 浏览器使用分布
    "Chrome" : 62.74
    "Firefox" : 22.85
    "IE" : 11.84
    "其他" : 2.57

渲染之后的结果：

pie
    title 浏览器使用分布
    "Chrome" : 62.74
    "Firefox" : 22.85
    "IE" : 11.84
    "其他" : 2.57

3.4 Entity-Relationship 图

ER 图用于展示实体之间的关系和属性。

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

渲染之后的结果：

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

---

4. 在不同环境中使用 Mermaid

Mermaid 可以轻松集成到不同的环境中，包括：

• 网页：直接在 HTML 中使用 Mermaid 的 JavaScript 库。
• Markdown：在支持 Mermaid 渲染的 Markdown 编辑器中使用。

在网页中使用

在 HTML 文件中引入 Mermaid 的 JavaScript 库，初始化并在 <div class="mermaid"> 中添加 Mermaid 语法。

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
    mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

在 Markdown 中使用

在 Markdown 编辑器中直接使用 Mermaid 语法即可，如：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

---

5. 实际示例和应用场景

Mermaid 可以用于各种应用场景，例如：

• 技术文档和博客的流程图和序列图展示。
• 项目管理和计划的甘特图和时间轴展示。
• 数据分析和报告的 Pie 图和类图展示。

通过使用 Mermaid，您可以将复杂的信息和数据转化为直观、易于理解的图表，提升文档和报告的可视化效果和表达能力。

---