Mermaid 语法完全指南：从入门到实战

kayoon 收录于 MarkDown

2026-01-03 约 6700 字预计阅读 14 分钟 - 次阅读

本文主要分享如何使用Mermaid，用代码绘制专业图表，让文档生动起来，这个可以配合hugo，相比于图片，代码生成的流程图加载更快，也更清晰。

1. 引言：为什么选择 Mermaid？

在编写技术文档、设计系统架构或记录项目流程时，图表是不可或缺的工具。但传统的绘图工具存在诸多痛点：

效率低下：绘制简单图表也需要频繁拖拽调整
格式混乱：不同工具导出的图表风格不一致
维护困难：需求变更时需要重新绘制整个图表
协作障碍：团队成员无法直接在代码中修改图表
Mermaid 正是为解决这些问题而生——它让你能用简洁的 Markdown 风格语法创建多种类型的图表，并享受版本控制友好、易于维护、风格统一的优势。

2. 基础环境搭建

2.1. 快速开始

在 GitHub/GitLab 中（原生支持）：

1
2
3
4


```mermaid # 开头用mermaid
graph LR
    A[开始] --> B[结束]
```#结尾

在 VS Code 中：

安装插件：“Markdown Preview Mermaid Support”
或安装：“Mermaid Preview”

在网页中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!DOCTYPE html>
<html>
  <body>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
    
    <div class="mermaid">
      graph LR
        A[网页集成] --> B[简单易用]
    </div>
  </body>
</html>

2.2. 常用配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// 全局配置示例
mermaid.initialize({
  startOnLoad: true,
  theme: 'dark',
  flowchart: {
    curve: 'basis',      // 连线样式：linear/basis/bumpX/bumpY
    htmlLabels: true     // 使用HTML标签
  },
  sequence: {
    diagramMarginX: 50,  // 边距
    actorMargin: 100
  },
  gantt: {
    titleTopMargin: 25,
    barHeight: 20
  }
});

3. 核心图表类型详解

3.1. 流程图（Flowchart）：最常用的图表类型

3.1.1. 基础语法：

1
2
3
4
5
6
7
8


graph TD
    Start([开始]) --> Input[/输入数据/]
    Input --> Process{数据有效?}
    Process -->|是| Action[处理数据]
    Process -->|否| Error((错误处理))
    Action --> Output[/输出结果/]
    Output --> End([结束])
    Error --> End

graph TD
    Start([开始]) --> Input[/输入数据/]
    Input --> Process{数据有效?}
    Process -->|是| Action[处理数据]
    Process -->|否| Error((错误处理))
    Action --> Output[/输出结果/]
    Output --> End([结束])
    Error --> End

graph TD
    Start([开始]) --> Input[/输入数据/]
    Input --> Process{数据有效?}
    Process -->|是| Action[处理数据]
    Process -->|否| Error((错误处理))
    Action --> Output[/输出结果/]
    Output --> End([结束])
    Error --> End

graph TD
    Start([开始]) --> Input[/输入数据/]
    Input --> Process{数据有效?}
    Process -->|是| Action[处理数据]
    Process -->|否| Error((错误处理))
    Action --> Output[/输出结果/]
    Output --> End([结束])
    Error --> End

3.1.2 高级应用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


graph TB
    subgraph 认证模块
        A1[用户登录] --> A2[验证凭证]
        A2 --> A3[生成Token]
    end
    
    subgraph 业务模块
        B1[获取请求] --> B2{权限检查}
        B2 -->|通过| B3[执行业务]
        B2 -->|拒绝| B4[返回403]
    end
    
    A3 --> B2
    B3 --> C[(数据库)]
    C -.-> B3
    
    style A1 fill:#e1f5fe
    style B3 fill:#f1f8e9
    style C fill:#fff3e0
    
    click A1 "https://example.com/login" "登录API文档"
    click B3 callback "业务处理函数"

graph TB
    subgraph 认证模块
        A1[用户登录] --> A2[验证凭证]
        A2 --> A3[生成Token]
    end
    
    subgraph 业务模块
        B1[获取请求] --> B2{权限检查}
        B2 -->|通过| B3[执行业务]
        B2 -->|拒绝| B4[返回403]
    end
    
    A3 --> B2
    B3 --> C[(数据库)]
    C -.-> B3
    
    style A1 fill:#e1f5fe
    style B3 fill:#f1f8e9
    style C fill:#fff3e0
    
    click A1 "https://example.com/login" "登录API文档"
    click B3 callback "业务处理函数"

graph TB
    subgraph 认证模块
        A1[用户登录] --> A2[验证凭证]
        A2 --> A3[生成Token]
    end
    
    subgraph 业务模块
        B1[获取请求] --> B2{权限检查}
        B2 -->|通过| B3[执行业务]
        B2 -->|拒绝| B4[返回403]
    end
    
    A3 --> B2
    B3 --> C[(数据库)]
    C -.-> B3
    
    style A1 fill:#e1f5fe
    style B3 fill:#f1f8e9
    style C fill:#fff3e0
    
    click A1 "https://example.com/login" "登录API文档"
    click B3 callback "业务处理函数"

graph TB
    subgraph 认证模块
        A1[用户登录] --> A2[验证凭证]
        A2 --> A3[生成Token]
    end
    
    subgraph 业务模块
        B1[获取请求] --> B2{权限检查}
        B2 -->|通过| B3[执行业务]
        B2 -->|拒绝| B4[返回403]
    end
    
    A3 --> B2
    B3 --> C[(数据库)]
    C -.-> B3
    
    style A1 fill:#e1f5fe
    style B3 fill:#f1f8e9
    style C fill:#fff3e0
    
    click A1 "https://example.com/login" "登录API文档"
    click B3 callback "业务处理函数"

3.1.3 语法说明：

graph TD：自上而下流程图（Top-Down）
graph LR：从左到右流程图（Left-Right）
节点形状：
- A[矩形]
- B(圆角矩形)
- C{菱形}
- D((圆形))
- E>非对称]
- F{{六边形}}
连接线：
- –> 实线箭头
- — 实线无箭头
- -.-> 虚线箭头
- ==> 粗线箭头
- – 文字 –> 带文字箭头

3.1.4 关键特性：

多方向布局：TD（上下）、LR（左右）、RL（右左）、BT（下上）
子图分组：subgraph 封装相关节点
样式定制：style 节点设置颜色、边框
交互支持：click 添加点击事件（支持链接和回调）
自定义形状：使用 >、[/]、{{}} 等符号

3.2. 时序图（Sequence Diagram）

3.2.1. API调用示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


sequenceDiagram
    participant User as 用户
    participant Client as 前端应用
    participant Gateway as API网关
    participant Auth as 认证服务
    participant Service as 业务服务
    participant DB as 数据库

    autonumber
    
    User->>Client: 登录请求
    Client->>Gateway: POST /api/login
    Gateway->>Auth: 验证请求
    Auth-->>Gateway: JWT令牌
    Gateway->>Service: 转发请求
    Service->>DB: 查询用户数据
    DB-->>Service: 返回数据
    Service-->>Gateway: 业务响应
    Gateway-->>Client: HTTP 200
    Client-->>User: 显示欢迎页
    
    Note over Service,DB: 数据库查询需优化<br/>响应时间 > 200ms
    loop 重试机制
        Service->>DB: 缓存未命中，查询DB
        alt 查询成功
            DB-->>Service: 返回数据
        else 查询失败
            DB-->>Service: 连接超时
            Service->>Service: 记录日志
        end
    end
    
    opt 异步处理
        Service->>Service: 发送消息队列
    end

sequenceDiagram
    participant User as 用户
    participant Client as 前端应用
    participant Gateway as API网关
    participant Auth as 认证服务
    participant Service as 业务服务
    participant DB as 数据库

    autonumber
    
    User->>Client: 登录请求
    Client->>Gateway: POST /api/login
    Gateway->>Auth: 验证请求
    Auth-->>Gateway: JWT令牌
    Gateway->>Service: 转发请求
    Service->>DB: 查询用户数据
    DB-->>Service: 返回数据
    Service-->>Gateway: 业务响应
    Gateway-->>Client: HTTP 200
    Client-->>User: 显示欢迎页
    
    Note over Service,DB: 数据库查询需优化
响应时间 > 200ms
    loop 重试机制
        Service->>DB: 缓存未命中，查询DB
        alt 查询成功
            DB-->>Service: 返回数据
        else 查询失败
            DB-->>Service: 连接超时
            Service->>Service: 记录日志
        end
    end
    
    opt 异步处理
        Service->>Service: 发送消息队列
    end

sequenceDiagram
    participant User as 用户
    participant Client as 前端应用
    participant Gateway as API网关
    participant Auth as 认证服务
    participant Service as 业务服务
    participant DB as 数据库

    autonumber
    
    User->>Client: 登录请求
    Client->>Gateway: POST /api/login
    Gateway->>Auth: 验证请求
    Auth-->>Gateway: JWT令牌
    Gateway->>Service: 转发请求
    Service->>DB: 查询用户数据
    DB-->>Service: 返回数据
    Service-->>Gateway: 业务响应
    Gateway-->>Client: HTTP 200
    Client-->>User: 显示欢迎页
    
    Note over Service,DB: 数据库查询需优化
响应时间 > 200ms
    loop 重试机制
        Service->>DB: 缓存未命中，查询DB
        alt 查询成功
            DB-->>Service: 返回数据
        else 查询失败
            DB-->>Service: 连接超时
            Service->>Service: 记录日志
        end
    end
    
    opt 异步处理
        Service->>Service: 发送消息队列
    end

sequenceDiagram
    participant User as 用户
    participant Client as 前端应用
    participant Gateway as API网关
    participant Auth as 认证服务
    participant Service as 业务服务
    participant DB as 数据库

    autonumber
    
    User->>Client: 登录请求
    Client->>Gateway: POST /api/login
    Gateway->>Auth: 验证请求
    Auth-->>Gateway: JWT令牌
    Gateway->>Service: 转发请求
    Service->>DB: 查询用户数据
    DB-->>Service: 返回数据
    Service-->>Gateway: 业务响应
    Gateway-->>Client: HTTP 200
    Client-->>User: 显示欢迎页
    
    Note over Service,DB: 数据库查询需优化
响应时间 > 200ms
    loop 重试机制
        Service->>DB: 缓存未命中，查询DB
        alt 查询成功
            DB-->>Service: 返回数据
        else 查询失败
            DB-->>Service: 连接超时
            Service->>Service: 记录日志
        end
    end
    
    opt 异步处理
        Service->>Service: 发送消息队列
    end

3.2.3 语法说明：

participant：标准参与者
actor：角色（小人图标）
boundary：边界
control：控制
entity：实体
database：数据库
collections：集合
Note right of A 右侧注释
loop 循环
alt 条件判断

3.2.4 箭头说明：

-» 实线实心箭头同步请求
–» 虚线实心箭头异步响应
-> 实线无箭头同步无返回
–> 虚线无箭头异步无返回
-x 实线 X箭头错误/终止
–x 虚线 X箭头异步错误

3.3. 类图（Class Diagram）

3.3.1. 基础语法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


classDiagram
    class Animal {
        +String name
        +eat()
        #sleep()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

classDiagram
    class Animal {
        +String name
        +eat()
        #sleep()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

classDiagram
    class Animal {
        +String name
        +eat()
        #sleep()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

classDiagram
    class Animal {
        +String name
        +eat()
        #sleep()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

3.3.2. 高级应用（电商系统示例）：

classDiagram
    %% 类定义
    class User {
        +String userId
        +String username
        +String email
        +Date createdAt
        +register()
        +login()
        +updateProfile()
    }
    
    class Customer {
        +List~Order~ orderHistory
        +Cart shoppingCart
        +addToCart()
        +placeOrder()
        -validatePayment()
    }
    
    class Admin {
        +List~Permission~ permissions
        +manageProducts()
        +viewReports()
        +banUser()
    }
    
    class Order {
        +String orderId
        +OrderStatus status
        +BigDecimal total
        +List~OrderItem~ items
        +calculateTotal()
        +processPayment()
        +ship()
    }
    
    class Product {
        <>
        +String sku
        +String name
        +BigDecimal price
        +getDescription()*
        +checkAvailability()* Boolean
    }
    
    class PhysicalProduct {
        +Double weight
        +Dimensions dimensions
        +Integer stock
        +getShippingCost()
    }
    
    class DigitalProduct {
        +String downloadUrl
        +BigDecimal fileSize
        +String licenseKey
        +generateLicense()
    }
    
    %% 关系定义
    User <|-- Customer : 继承
    User <|-- Admin : 继承
    Customer "1" --> "0..*" Order : 拥有
    Order "1" --> "1..*" OrderItem : 包含
    OrderItem --> Product : 关联
    Product <|.. PhysicalProduct : 实现
    Product <|.. DigitalProduct : 实现
    
    class OrderItem {
        +Integer quantity
        +BigDecimal unitPrice
        +BigDecimal subtotal
        +calculateSubtotal()
    }
    
    class Cart {
        +List~CartItem~ items
        +BigDecimal total
        +addItem()
        +removeItem()
        +checkout() Order
    }
    
    Customer --> Cart : 使用

classDiagram
    %% 类定义
    class User {
        +String userId
        +String username
        +String email
        +Date createdAt
        +register()
        +login()
        +updateProfile()
    }
    
    class Customer {
        +List~Order~ orderHistory
        +Cart shoppingCart
        +addToCart()
        +placeOrder()
        -validatePayment()
    }
    
    class Admin {
        +List~Permission~ permissions
        +manageProducts()
        +viewReports()
        +banUser()
    }
    
    class Order {
        +String orderId
        +OrderStatus status
        +BigDecimal total
        +List~OrderItem~ items
        +calculateTotal()
        +processPayment()
        +ship()
    }
    
    class Product {
        <>
        +String sku
        +String name
        +BigDecimal price
        +getDescription()*
        +checkAvailability()* Boolean
    }
    
    class PhysicalProduct {
        +Double weight
        +Dimensions dimensions
        +Integer stock
        +getShippingCost()
    }
    
    class DigitalProduct {
        +String downloadUrl
        +BigDecimal fileSize
        +String licenseKey
        +generateLicense()
    }
    
    %% 关系定义
    User <|-- Customer : 继承
    User <|-- Admin : 继承
    Customer "1" --> "0..*" Order : 拥有
    Order "1" --> "1..*" OrderItem : 包含
    OrderItem --> Product : 关联
    Product <|.. PhysicalProduct : 实现
    Product <|.. DigitalProduct : 实现
    
    class OrderItem {
        +Integer quantity
        +BigDecimal unitPrice
        +BigDecimal subtotal
        +calculateSubtotal()
    }
    
    class Cart {
        +List~CartItem~ items
        +BigDecimal total
        +addItem()
        +removeItem()
        +checkout() Order
    }
    
    Customer --> Cart : 使用

classDiagram
    %% 类定义
    class User {
        +String userId
        +String username
        +String email
        +Date createdAt
        +register()
        +login()
        +updateProfile()
    }
    
    class Customer {
        +List~Order~ orderHistory
        +Cart shoppingCart
        +addToCart()
        +placeOrder()
        -validatePayment()
    }
    
    class Admin {
        +List~Permission~ permissions
        +manageProducts()
        +viewReports()
        +banUser()
    }
    
    class Order {
        +String orderId
        +OrderStatus status
        +BigDecimal total
        +List~OrderItem~ items
        +calculateTotal()
        +processPayment()
        +ship()
    }
    
    class Product {
        <>
        +String sku
        +String name
        +BigDecimal price
        +getDescription()*
        +checkAvailability()* Boolean
    }
    
    class PhysicalProduct {
        +Double weight
        +Dimensions dimensions
        +Integer stock
        +getShippingCost()
    }
    
    class DigitalProduct {
        +String downloadUrl
        +BigDecimal fileSize
        +String licenseKey
        +generateLicense()
    }
    
    %% 关系定义
    User <|-- Customer : 继承
    User <|-- Admin : 继承
    Customer "1" --> "0..*" Order : 拥有
    Order "1" --> "1..*" OrderItem : 包含
    OrderItem --> Product : 关联
    Product <|.. PhysicalProduct : 实现
    Product <|.. DigitalProduct : 实现
    
    class OrderItem {
        +Integer quantity
        +BigDecimal unitPrice
        +BigDecimal subtotal
        +calculateSubtotal()
    }
    
    class Cart {
        +List~CartItem~ items
        +BigDecimal total
        +addItem()
        +removeItem()
        +checkout() Order
    }
    
    Customer --> Cart : 使用

3.3.3. 语法说明：

继承：<|–
实现：<|..
组合：*–
聚合：o–
关联：–>
依赖：..>
泛型表示：List_Order 表示 List
抽象/接口：«abstract» 或 «interface»
多重性：“1” –> “0..*” 表示一对多关系

3.4. 状态图（State Diagram）

3.4.1. 基础语法：

1
2
3
4
5
6


stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 暂停: 暂停按钮
    暂停 --> 运行: 继续
    运行 --> [*]: 关机

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 暂停: 暂停按钮
    暂停 --> 运行: 继续
    运行 --> [*]: 关机

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 暂停: 暂停按钮
    暂停 --> 运行: 继续
    运行 --> [*]: 关机

stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 暂停: 暂停按钮
    暂停 --> 运行: 继续
    运行 --> [*]: 关机

3.4.2 高级应用（订单流转示例）：

stateDiagram-v2
    [*] --> 待支付
    
    state 待支付 {
        [*] --> 创建订单
        创建订单 --> 等待支付 : 用户提交
        等待支付 --> 支付中 : 发起支付
        支付中 --> 已支付 : 支付成功
        支付中 --> 支付失败 : 支付异常
        支付失败 --> 等待支付 : 重试支付
        支付失败 --> 已取消 : 用户取消
    }
    
    待支付 --> 已取消 : 用户取消订单
    待支付 --> 已支付 : 支付完成
    
    已支付 --> 待发货 : 系统确认
    state 待发货 {
        [*] --> 订单审核
        订单审核 --> 库存锁定 : 审核通过
        库存锁定 --> 拣货中 : 分配仓库
        拣货中 --> 打包中 : 拣货完成
        打包中 --> 已发货 : 打包完成
    }
    
    待发货 --> 已发货 : 物流揽收
    已发货 --> 运输中 : 物流更新
    运输中 --> 派送中 : 到达目的地
    派送中 --> 已签收 : 用户收货
    
    state 异常处理 {
        订单审核 --> 审核失败 : 库存不足
        运输中 --> 配送异常 : 物流问题
        派送中 --> 退货中 : 用户拒收
        
        审核失败 --> [*]
        配送异常 --> 已发货 : 重新发货
        退货中 --> 退货完成 : 仓库收货
    }
    
    已签收 --> [*]
    已取消 --> [*]
    退货完成 --> [*]
    
    note right of 待支付
        订单有效期24小时
        超时自动取消
    end note

stateDiagram-v2
    [*] --> 待支付
    
    state 待支付 {
        [*] --> 创建订单
        创建订单 --> 等待支付 : 用户提交
        等待支付 --> 支付中 : 发起支付
        支付中 --> 已支付 : 支付成功
        支付中 --> 支付失败 : 支付异常
        支付失败 --> 等待支付 : 重试支付
        支付失败 --> 已取消 : 用户取消
    }
    
    待支付 --> 已取消 : 用户取消订单
    待支付 --> 已支付 : 支付完成
    
    已支付 --> 待发货 : 系统确认
    state 待发货 {
        [*] --> 订单审核
        订单审核 --> 库存锁定 : 审核通过
        库存锁定 --> 拣货中 : 分配仓库
        拣货中 --> 打包中 : 拣货完成
        打包中 --> 已发货 : 打包完成
    }
    
    待发货 --> 已发货 : 物流揽收
    已发货 --> 运输中 : 物流更新
    运输中 --> 派送中 : 到达目的地
    派送中 --> 已签收 : 用户收货
    
    state 异常处理 {
        订单审核 --> 审核失败 : 库存不足
        运输中 --> 配送异常 : 物流问题
        派送中 --> 退货中 : 用户拒收
        
        审核失败 --> [*]
        配送异常 --> 已发货 : 重新发货
        退货中 --> 退货完成 : 仓库收货
    }
    
    已签收 --> [*]
    已取消 --> [*]
    退货完成 --> [*]
    
    note right of 待支付
        订单有效期24小时
        超时自动取消
    end note

stateDiagram-v2
    [*] --> 待支付
    
    state 待支付 {
        [*] --> 创建订单
        创建订单 --> 等待支付 : 用户提交
        等待支付 --> 支付中 : 发起支付
        支付中 --> 已支付 : 支付成功
        支付中 --> 支付失败 : 支付异常
        支付失败 --> 等待支付 : 重试支付
        支付失败 --> 已取消 : 用户取消
    }
    
    待支付 --> 已取消 : 用户取消订单
    待支付 --> 已支付 : 支付完成
    
    已支付 --> 待发货 : 系统确认
    state 待发货 {
        [*] --> 订单审核
        订单审核 --> 库存锁定 : 审核通过
        库存锁定 --> 拣货中 : 分配仓库
        拣货中 --> 打包中 : 拣货完成
        打包中 --> 已发货 : 打包完成
    }
    
    待发货 --> 已发货 : 物流揽收
    已发货 --> 运输中 : 物流更新
    运输中 --> 派送中 : 到达目的地
    派送中 --> 已签收 : 用户收货
    
    state 异常处理 {
        订单审核 --> 审核失败 : 库存不足
        运输中 --> 配送异常 : 物流问题
        派送中 --> 退货中 : 用户拒收
        
        审核失败 --> [*]
        配送异常 --> 已发货 : 重新发货
        退货中 --> 退货完成 : 仓库收货
    }
    
    已签收 --> [*]
    已取消 --> [*]
    退货完成 --> [*]
    
    note right of 待支付
        订单有效期24小时
        超时自动取消
    end note

3.4.3 关键特性：

复合状态：状态内嵌套子状态
历史状态：[*] 表示初始状态
分叉/合并：–> 支持并行状态流转
并发状态：使用 || 符号
状态描述：note 添加注解

3.5. 饼图（Pie Chart）

3.5.1. 基础语法：

1
2
3
4
5


pie title 编程语言使用率
    "JavaScript" : 40
    "Python" : 25
    "Java" : 20
    "其他" : 15

pie title 编程语言使用率
    "JavaScript" : 40
    "Python" : 25
    "Java" : 20
    "其他" : 15

pie title 编程语言使用率
    "JavaScript" : 40
    "Python" : 25
    "Java" : 20
    "其他" : 15

pie title 编程语言使用率
    "JavaScript" : 40
    "Python" : 25
    "Java" : 20
    "其他" : 15

3.6. 甘特图（Gantt Chart）

3.6.1. 基础语法：

1
2
3
4
5
6
7
8
9


gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 设计
    需求分析 :2024-01-01, 7d
    原型设计 :2024-01-08, 5d
    section 开发
    编码 :2024-01-15, 10d
    测试 :2024-01-25, 5d

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 设计
    需求分析 :2024-01-01, 7d
    原型设计 :2024-01-08, 5d
    section 开发
    编码 :2024-01-15, 10d
    测试 :2024-01-25, 5d

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 设计
    需求分析 :2024-01-01, 7d
    原型设计 :2024-01-08, 5d
    section 开发
    编码 :2024-01-15, 10d
    测试 :2024-01-25, 5d

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 设计
    需求分析 :2024-01-01, 7d
    原型设计 :2024-01-08, 5d
    section 开发
    编码 :2024-01-15, 10d
    测试 :2024-01-25, 5d

3.7. 实体关系图（ER Diagram）

3.7.1. 基础语法：

1
2
3
4
5
6
7


erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }

3.8. Git 图（Git Graph）

3.8.1. 基础语法：

1
2
3
4
5
6
7
8


gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature

4. 注意事项

4.1. 代码包裹方式：

GitHub/Markdown：用 ```mermaid 代码块包裹

在线编辑器：直接使用

4.2. 兼容性：

GitHub/GitLab 原生支持

VS Code 需安装 Mermaid 插件

其他平台可能需要引入 Mermaid 库

4.3. 在线编辑器：

Mermaid Live Editor

Mermaid Chart Editor