Mermaid 图表 #

概述 #

Mermaid 是一种基于文本的图表语言，可以在 Markdown 中创建各种图表。

基本语法 #

使用代码块并指定 mermaid 语言：

markdown

```mermaid
graph TD
    A[开始] --> B[结束]
```

渲染效果：

mermaid

graph TD
    A[开始] --> B[结束]

流程图 #

基本结构 #

markdown

```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行A]
    B -->|否| D[执行B]
    C --> E[结束]
    D --> E
```

渲染效果：

mermaid

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

方向 #

方向	说明
`TB`	从上到下
`BT`	从下到上
`LR`	从左到右
`RL`	从右到左

节点形状 #

语法	形状
`A[文本]`	矩形
`A(文本)`	圆角矩形
`A((文本))`	圆形
`A{文本}`	菱形
`A[[文本]]`	子程序
`A[(文本)]`	圆柱形

连接线 #

语法	样式
`A --> B`	实线箭头
`A --- B`	实线无箭头
`A -.-> B`	虚线箭头
`A ==> B`	粗线箭头
`A --文本--> B`	带文字

时序图 #

markdown

```mermaid
sequenceDiagram
    participant A as 用户
    participant B as 服务器
    participant C as 数据库
    
    A->>B: 发送请求
    B->>C: 查询数据
    C-->>B: 返回数据
    B-->>A: 返回响应
```

渲染效果：

mermaid

sequenceDiagram
    participant A as 用户
    participant B as 服务器
    participant C as 数据库
    
    A->>B: 发送请求
    B->>C: 查询数据
    C-->>B: 返回数据
    B-->>A: 返回响应

箭头类型 #

语法	样式
`->>`	实线箭头
`-->>`	虚线箭头
`->>+`	激活
`->>-`	停用

类图 #

markdown

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    Animal <|-- Dog
```

渲染效果：

mermaid

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    Animal <|-- Dog

状态图 #

markdown

```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中
    处理中 --> 已完成
    处理中 --> 已取消
    已完成 --> [*]
    已取消 --> [*]
```

渲染效果：

mermaid

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中
    处理中 --> 已完成
    处理中 --> 已取消
    已完成 --> [*]
    已取消 --> [*]

饼图 #

markdown

```mermaid
pie title 项目时间分配
    "开发" : 40
    "测试" : 25
    "文档" : 15
    "会议" : 20
```

渲染效果：

mermaid

pie title 项目时间分配
    "开发" : 40
    "测试" : 25
    "文档" : 15
    "会议" : 20

甘特图 #

markdown

```mermaid
gantt
    title 项目进度
    dateFormat YYYY-MM-DD
    section 阶段一
    需求分析 :a1, 2024-01-01, 7d
    设计 :a2, after a1, 5d
    section 阶段二
    开发 :a3, after a2, 14d
    测试 :a4, after a3, 7d
```

渲染效果：

mermaid

gantt
    title 项目进度
    dateFormat YYYY-MM-DD
    section 阶段一
    需求分析 :a1, 2024-01-01, 7d
    设计 :a2, after a1, 5d
    section 阶段二
    开发 :a3, after a2, 14d
    测试 :a4, after a3, 7d

思维导图 #

markdown

```mermaid
mindmap
  root((Markdown))
    基础语法
      标题
      段落
      强调
    列表
      有序列表
      无序列表
      任务列表
    高级语法
      表格
      代码块
      数学公式
```

渲染效果：

mermaid

mindmap
  root((Markdown))
    基础语法
      标题
      段落
      强调
    列表
      有序列表
      无序列表
      任务列表
    高级语法
      表格
      代码块
      数学公式

兼容性 #

平台	支持情况
GitHub	支持
GitLab	支持
Obsidian	支持
Typora	支持
VS Code	需插件
部分 Markdown 解析器	不支持

最佳实践 #

1. 选择合适的图表类型 #

场景	推荐图表
流程说明	流程图
交互过程	时序图
类结构	类图
状态变化	状态图
时间规划	甘特图
知识结构	思维导图
占比分析	饼图

2. 保持简洁 #

markdown

好的：清晰的节点和关系

不好的：过于复杂的图表

3. 添加标签 #

markdown

A[开始] -->|标签| B[结束]

下一步 #

继续学习目录生成！