Mermaid说明

Mermaid 是一个强大的图表工具，用简单的文本描述生成复杂的图表。为了让初学者更好地掌握 Mermaid 的使用，这里将详细介绍 Mermaid 的基本语法、高阶语法及使用技巧，并结合实际示例逐步讲解每一个符号和字母的意义。

一、Mermaid 基本语法详解

1. 流程图 (Flowchart)

流程图是 Mermaid 中最常用的图表类型之一，用于描述流程步骤及其关系。

是

否

开始

是否继续?

处理任务

结束

完成

详细解释：

• graph TD：定义图表类型和方向。

  • TD（Top Down）：表示图从上到下布局。
  • LR（Left to Right）：从左到右。
  • BT（Bottom to Top）：从下到上。
  • RL（Right to Left）：从右到左。

• A[开始]：定义一个普通矩形节点，ID 为 A，显示内容为“开始”。

  • [内容]：表示这是一个矩形节点。
  • A：节点的唯一标识符，可以是任何字母或名称。

• B{是否继续?}：定义一个菱形判断节点，ID 为 B，用于条件分支。

  • {内容}：表示这是一个判断节点，通常用于分支选择。

• -->：表示节点之间的连线方向，连接两个节点。

• |是|：连线标签，用于标注分支路径的条件。

2. 序列图 (Sequence Diagram)

序列图用来展示对象或角色之间的交互顺序。

用户 系统 发送请求 返回响应 用户 系统

详细解释：

• sequenceDiagram：定义图表类型为序列图。

• participant User as 用户：定义参与者 User，并将其显示为“用户”。

  • participant：定义图表中的参与者（角色或对象）。
  • User：参与者的 ID。
  • as 用户：显示名称，便于阅读理解。

• User->>System: 发送请求：表示 User 向 System 发送消息，使用 ->> 表示消息的传递方向。

• System-->>User: 返回响应：表示 System 向 User 发送消息，-->> 表示消息传递的方向。

3. 类图 (Class Diagram)

类图用于表示类及其之间的关系，适合面向对象编程的设计。

Animal

+String name

+int age

+makeSound()

Dog

+String breed

+bark()

详细解释：

• classDiagram：定义图表类型为类图。

• class Animal {...}：定义一个类 Animal，包含属性和方法。

  • +String name：公有属性 name，类型为 String。
  • +int age：公有属性 age，类型为 int。
  • +makeSound()：公有方法 makeSound()。

• Animal <|-- Dog：表示 Dog 类继承 Animal 类。

  • <|--：箭头符号，表示继承关系。

Mermaid 类图关系中的 "1" 和 "*" 解释

1. "1"：表示“一对一”关系。

   • 意思是：每个对象在关联的另一端只有一个实例。例如，Student "1" -- "1" ProgramEnrollment 表示一个学生只能有一个注册记录，而每个注册记录也只能对应一个学生。

2. "*"：表示“一对多”关系。

   • 意思是：每个对象在关联的另一端可以有多个实例。例如，Department "1" -- "*" Program 表示一个部门可以有多个课程，但一个课程只能属于一个部门。

3. "0..1"：表示零个或一个的关系，即对象的另一端可以没有关联或只有一个关联。

4. "1..*"：表示至少一个到多个的关系，意思是对象的另一端必须至少有一个关联实例。

这些符号是为了方便阅读，明确表示对象之间的关联数量，并不是 Mermaid 的语法规则，而是从 UML 类图中的概念借鉴而来。

示例解释：Mermaid 类图中的 "1" 和 "*"

1

*

1

*

1

1

1

1

1

*

1

1

1

*

1

1

1

1

1

1

Department

Program

Offer

Curriculum

Course

Student

ProgramEnrollment

CourseEnrollment

各个关系的详细含义：

1. Department "1" -- "*" Program：

   • 含义：一个 Department（部门）可以有多个 Program（课程），但一个课程只能由一个部门管理。

2. Department "1" -- "*" Offer：

   • 含义：一个 Department 可以提供多个 Offer（项目），但每个项目只能由一个部门提供。

3. Offer "1" -- "1" Program：

   • 含义：每个 Offer 对应一个 Program，反过来，每个 Program 也只能有一个 Offer。

4. Program "1" -- "1" Curriculum：

   • 含义：每个 Program（课程）都有一个 Curriculum（课程表），反之亦然。

5. Curriculum "1" -- "*" Course：

   • 含义：一个 Curriculum 包含多个 Course（课程），但一个课程只能属于一个课程表。

6. Student "1" -- "1" ProgramEnrollment：

   • 含义：每个 Student（学生）有一个 ProgramEnrollment（课程注册记录），而每个注册记录也只能有一个对应的学生。

7. ProgramEnrollment "1" -- "*" CourseEnrollment：

   • 含义：一个 ProgramEnrollment 包含多个 CourseEnrollment（课程选课），但一个选课记录只能属于一个课程注册。

8. Student "1" -- "1" Offer：

   • 含义：每个 Student 与一个 Offer 相关联，反之亦然。

9. ProgramEnrollment "1" -- "1" Program：

   • 含义：每个 ProgramEnrollment 对应一个 Program，同样，一个 Program 只能有一个注册记录。

10. CourseEnrollment "1" -- "1" Course：

    • 含义：每个 CourseEnrollment 对应一个具体的 Course（课程），反过来也是一样。

二、Mermaid 高阶语法

1. 嵌套子图 (Subgraphs)

子图用于分组和层次展示节点，常见于复杂的流程图。

子图2

子图1

节点A2

节点B2

节点A1

节点B1

解释：

• subgraph 子图1：定义一个子图，名称为“子图1”。
• end：结束子图定义。
• 子图之间可以相互连接，展示不同部分之间的关系。

2. 链接与点击交互 (Links and Clicks)

通过添加超链接使图表具有交互功能。

开始

中间步骤

结束

解释：

• click A href "URL" "说明文字"：为节点 A 添加一个点击链接。

三、Mermaid注释

在 Mermaid 中，你可以使用注释来提供额外的说明和文档，而这些注释不会在生成的图形中显示。Mermaid 支持几种不同类型的注释，具体取决于你使用的图类型。以下是如何在 Mermaid 中使用注释的详细说明和示例。

1. 注释在类图中的使用

在 Mermaid 类图中，注释用于提供额外的描述信息，这些信息不会在图形中显示。注释通常放在类定义之前或之后，以说明类的属性或方法。

示例：

1

*

Department

+String name

+String code

Program

+String title

在上面的示例中：

• %% 这是一个类图的注释 是一个注释，它解释了下面的内容。
• 注释放在 Mermaid 代码的 %% 符号之后，Mermaid 引擎会忽略这些注释，不会在生成的图形中显示。

2. 注释在流程图中的使用

在 Mermaid 流程图中，注释也使用 %% 符号，注释通常用于解释流程图的某些部分或提供额外的上下文信息。

示例：

Start

Step 1

Step 2

End

在上面的示例中：

• %% 这条注释说明了流程的开始 是一个注释，用于解释图中节点的流动。
• 注释放在 %% 符号之后，Mermaid 引擎会忽略这些内容，不会在图形中显示。

3. 注释在甘特图中的使用

在 Mermaid 甘特图中，注释也是使用 %% 符号。注释可以用来解释项目任务的详细信息。

示例：

2024-09-01 2024-09-08 2024-09-15 2024-09-22 2024-09-29 2024-10-06 2024-10-13 2024-10-20 2024-10-27 2024-11-03 2024-11-10 2024-11-17 2024-11-24 2024-12-01 2024-12-08 2024-12-15 设计 开发 部署 计划 项目时间表

在上面的示例中：

• %% 设计阶段的详细说明 是一个注释，用于提供额外的上下文。
• 注释同样放在 %% 符号之后，不会在生成的甘特图中显示。

4. 注释在其他图类型中的使用

对于 Mermaid 支持的其他图类型，如饼图、状态图等，注释的使用方式基本相同。都是使用 %% 符号来插入注释。

总结

在 Mermaid 中，注释使用 %% 符号添加。这些注释在生成的图形中不会显示，它们仅用于在 Mermaid 源代码中添加额外的说明或文档。可以根据具体的图类型在适当的位置添加注释，以提高代码的可读性和可维护性。

三、Mermaid 使用技巧

1. 使用 Mermaid Live Editor

Mermaid Live Editor 是一个在线工具，可以实时编写和预览 Mermaid 代码。访问 Mermaid Live Editor 开始使用。

四、完整示例

以下是一个综合示例，展示流程图、子图、条件判断和交互链接的应用：

工作流程

是

否

条件判断

开始

执行步骤1

执行步骤2

结束

解释：

• 定义了一个名为“工作流程”的子图，展示从“开始”到“结束”的一系列步骤。
• 包含条件判断节点和不同路径的选择。
• 在执行步骤1上添加了点击链接，实现与外部资源的交互。