mermaid绘图的语法详细

最新推荐文章于 2025-04-25 19:16:38 发布

jakeswang

最新推荐文章于 2025-04-25 19:16:38 发布

阅读量1.1k

点赞数 18

分类专栏：常用工具文章标签：后端

本文链接：https://blog.csdn.net/jakeswang/article/details/147408596

版权

常用工具专栏收录该内容

6 篇文章

订阅专栏

Mermaid 是一种基于文本的绘图工具，可通过简单的文本描述生成流程图、序列图、甘特图等多种类型的图表。以下是对其常见绘图类型语法的详细介绍：

Mermaid 是一种基于文本的图表生成工具，支持多种图表类型（如流程图、序列图、甘特图等）。以下是其核心语法的详细介绍：

核心语法的详细

一、流程图（Flowchart）

用于表示流程或步骤。

1. 基本语法

mermaid

graph TD
  A[开始] --> B{条件判断}
  B -->|是| C[执行操作]
  B -->|否| D[结束]
  C --> D

2. 关键元素

方向定义：

- graph TD：从上到下（Top-Down）
- graph LR：从左到右（Left-Right）
- graph RL：从右到左
- graph BT：从下到上

节点形状：

- A[矩形]
- B(圆角矩形)
- C{菱形}
- D((圆形))

连接线：

- --> 实线箭头
- --- 实线无箭头
- -.-> 虚线箭头
- ==> 粗箭头
- -- 文本 --> 带文本的箭头

3. 子图（Subgraph）

mermai

graph TB
  subgraph 子图标题
    A --> B
  end
  B --> C

二、序列图（Sequence Diagram）

用于表示对象间交互的时间顺序。

mermaid

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: 同步请求
  Bob-->>Alice: 异步响应
  Note right of Bob: 这是注释
  loop 循环
    Alice->Alice: 自调用
  end

语法元素：

participant：定义参与者
->>：实线箭头（同步消息）
-->>：虚线箭头（异步消息）
Note：添加注释
loop、alt、opt 等控制结构

三、类图（Class Diagram）

用于表示类及其关系。

mermaid

classDiagram
  class Animal {
    +String name
    +void eat()
  }
  class Dog {
    +void bark()
  }
  Animal <|-- Dog : 继承

语法元素：

class 类名 { 属性/方法 }
关系符号：

- A <|-- B：继承（B 继承 A）
- A *-- B：组合（B 是 A 的一部分）
- A o-- B：聚合（B 属于 A）
- A --> B：关联

四、状态图（State Diagram）

用于表示状态机。

mermaid

stateDiagram
  [*] --> State1
  State1 --> State2 : 事件
  State2 --> [*]

语法元素：

[*] 初始/终止状态
state 状态名
转换格式：状态1 --> 状态2 : 事件

五、甘特图（Gantt Chart）

用于项目管理时间规划。

mermaid

gantt
  title 项目计划
  dateFormat YYYY-MM-DD
  section 阶段A
  任务1 :a1, 2023-10-01, 7d
  任务2 :after a1, 5d
  section 阶段B
  任务3 :2023-10-15, 3d

语法元素：

dateFormat：日期格式
section：划分模块
任务名 :id, 开始时间, 持续时间

六、饼图（Pie Chart）

mermaid

pie
  title 数据分布
  "分类A": 30
  "分类B": 50
  "分类C": 20

七、注意事项

缩进：部分语法（如子图）对缩进敏感。
特殊字符：若文本中包含 []{} 等符号，需用双引号包裹。
注释：用 %% 表示单行注释。

八、在线工具 & 文档

官方文档：Mermaid | Diagramming and charting tool
在线编辑器：Online FlowChart & Diagrams Editor - Mermaid Live Editor

通过以上语法，可以快速生成复杂的图表，适合集成到 Markdown、文档或代码中。

详细实战：

流程图（Flowchart）

流程图用于展示流程或算法的步骤。

基本元素

节点：用文本描述，可以是矩形、圆角矩形、菱形等不同形状。
连线：用于连接节点，表示流程的方向。

语法解释

graph LR：指定流程图的方向，LR 表示从左到右，还可以是 TB（从上到下）、RL（从右到左）、BT（从下到上）。
classDef：定义节点样式，可设置填充颜色、边框颜色和边框宽度。
A([开始])：[ ] 表示圆角矩形节点，( ) 表示矩形节点，{ } 表示菱形节点。
-->：表示普通连线，|是| 和 |否| 用于在连线上添加标签。

序列图（Sequence Diagram）

序列图用于展示对象之间的交互顺序。

基本元素

参与者：表示参与交互的对象。
消息：参与者之间发送的消息，用箭头表示。

语法解释

participant：定义参与者，可以是人物、系统等。
->>：表示异步消息，-->> 表示同步消息。
消息的方向表示消息的发送者和接收者。

甘特图（Gantt Diagram）

甘特图用于展示项目进度和时间安排。

基本元素

任务：项目中的具体任务。
时间轴：表示任务的开始时间和结束时间。

语法解释

dateFormat：指定日期格式。
title：设置甘特图的标题。
section：将任务分组。
任务 1 :a1, 2024-01-01, 30d：定义任务，a1 是任务的标识符，2024-01-01 是开始日期，30d 表示持续 30 天。
after a1：表示该任务在任务 a1 之后开始。