Mermaid图表绘制完全指南：从入门到实战

Mermaid图表绘制完全指南：从入门到实战

引用

CSDN

1.

https://blog.csdn.net/zzddada/article/details/146207202

思维速览：
本文将详细介绍如何使用Mermaid语法绘制各类专业图表，帮助你提高工作效率和文档质量。

一、Mermaid简介

Mermaid是一个基于JavaScript的图表绘制工具，它允许用户使用类似于Markdown的文本语法来创建和修改图表。

最大的优势在于不需要专业的图形设计软件，就能通过简单的代码创建出清晰、专业的图表。

二、Mermaid的优势

• 简单易用：无需安装额外软件，直接在Markdown中编写代码
• 即时反馈：代码编写完成后即可查看渲染效果
• 多种图表支持：流程图、时序图、类图等多种类型全覆盖
• 易于修改：只需调整代码即可更新图表，无需重新绘制

在Markdown中使用Mermaid绘图，需要将写好的语句用mermaid包裹，之后会显示渲染后的图的效果。

例如：使用Mermaid绘制一个流程图示例，Mermaid语句内容是这样的：

graph TD
  A([开始]) --> B[输入用户名和密码]
  B --> C{格式验证}
  C -->|验证失败| D[提示格式错误]
  C -->|验证通过| E[请求登录接口]
  E --> F{登录结果}
  F -->|成功| G[跳转到主页]
  F -->|失败| H[提示密码错误]
  G --> I([结束])
  H --> B
  D --> B
  style A fill:#4CAF50,color:white
  style I fill:#4CAF50,color:white
  style D fill:#FF5722,color:white
  style H fill:#FF5722,color:white
  style G fill:#2196F3,color:white

对应的流程图渲染效果：

三、常见图表类型及实例

1. 流程图 (Flowchart)
   流程图是最常用的图表类型之一，适合展示算法、业务流程或决策过程。

基本语法

graph 方向
    节点1[文本] --> 节点2[文本]

方向可以是：

• TB - 从上到下
• TD - 从上到下（与TB相同）
• BT - 从下到上
• RL - 从右到左
• LR - 从左到右

示例

graph TD
    A[开始] --> B{是否有问题?}
    B -->|是| C[解决问题]
    B -->|否| D[完成]
    C --> D
    D --> E[结束]

2. 时序图 (Sequence Diagram)
   时序图用于展示对象之间的交互，特别适合表达系统组件间的通信流程。

基本语法

sequenceDiagram
    参与者A->>参与者B: 消息内容
    参与者B-->>参与者A: 返回内容

示例

sequenceDiagram
    用户->>+前端: 发起请求
    前端->>+后端API: 传递数据
    后端API->>+数据库: 查询数据
    数据库-->>-后端API: 返回结果
    后端API-->>-前端: 返回处理后的数据
    前端-->>-用户: 展示结果

3. 类图 (Class Diagram)
   类图用于展示系统中的类以及它们之间的关系，是面向对象设计的重要工具。

基本语法

classDiagram
    类A <|-- 类B
    类A : +属性1
    类A : +方法1()

示例

classDiagram
    Person <|-- Student
    Person <|-- Teacher
    Person : +String name
    Person : +int age
    Person : +void talk()
    Student : +int studentId
    Student : +void study()
    Teacher : +String subject
    Teacher : +void teach()

4. 状态图 (State Diagram)

状态图用于描述系统或对象在不同状态之间的转换。

基本语法

stateDiagram-v2
    [*] --> 状态1
    状态1 --> 状态2: 触发条件
    状态2 --> [*]

示例

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理完毕
    处理中 --> 异常: 出现问题
    异常 --> 处理中: 解决问题
    已完成 --> [*]

5. 甘特图 (Gantt Chart)
   甘特图用于项目管理，展示任务的开始、结束时间和持续时间。

基本语法

gantt
    title 项目名称
    dateFormat YYYY-MM-DD
    section 阶段名
    任务名 :task-id, 开始日期, 持续时间

示例

gantt
    title 网站开发项目计划
    dateFormat YYYY-MM-DD
    section 规划阶段
    需求分析    :a1, 2023-06-01, 7d
    概要设计    :a2, after a1, 5d
    section 开发阶段
    详细设计    :b1, after a2, 10d
    编码实现    :b2, after b1, 15d
    section 测试阶段
    单元测试    :c1, after b2, 5d
    集成测试    :c2, after c1, 5d
    系统测试    :c3, after c2, 5d
    section 部署阶段
    发布准备    :d1, after c3, 3d
    上线部署    :d2, after d1, 2d

6. 饼图 (Pie Chart)

饼图用于展示数据的比例关系。

基本语法

pie
    title 标题
    "分类1" : 数值1
    "分类2" : 数值2

示例

pie
    title 项目资源分配
    "前端开发" : 35
    "后端开发" : 30
    "数据库" : 15
    "测试" : 10
    "部署运维" : 10

四、高级技巧

1. 样式定制
   在流程图中，你可以通过以下方式自定义节点样式：

graph TD
    A[普通节点] --> B(圆角节点)
    B --> C{条件节点}
    C -->|是| D((圆形节点))
    C -->|否| E>标签节点]

2. 子图
   使用subgraph创建子图，对相关节点进行分组：

graph TB
    subgraph 子系统1
        A[组件A] --> B[组件B]
    end
    subgraph 子系统2
        C[组件C] --> D[组件D]
    end
    B --> C

3. 注释和说明
   在时序图中添加注释：

sequenceDiagram
    Alice->>Bob: 发送请求
    Note right of Bob: Bob思考中
    Bob-->>Alice: 发送响应

4.常见问题与解决方案

1. 图表不显示：确保语法正确，特别是缩进和标点符号
2. 布局混乱：尝试调整方向（TD/LR等）或减少节点数量
3. 文本溢出：缩短节点文字或使用换行符
4. 箭头样式错误：检查箭头语法，如-->、-->>、-.->等

五、实际应用场景

1.软件开发文档

graph LR
    subgraph 前端层
        A[用户界面] --> B[业务逻辑]
    end
    subgraph 服务层
        C[API网关] --> D[微服务1]
        C --> E[微服务2]
    end
    subgraph 数据层
        F[主数据库] --> G[读库1]
        F --> H[读库2]
    end
    B --> C
    D --> F
    E --> F

2.业务流程分析

graph TD
    A[客户下单] --> B{库存检查}
    B -->|有库存| C[创建订单]
    B -->|无库存| D[通知缺货]
    C --> E[支付处理]
    E -->|支付成功| F[准备发货]
    E -->|支付失败| G[取消订单]
    F --> H[物流配送]
    H --> I[订单完成]

小结

通过Mermaid语法，我们可以轻松创建各种专业图表，提高工作效率和文档质量。无论是软件开发、项目管理还是系统设计，这种方式都能帮助我们更清晰地表达和理解复杂信息。

希望本文能对你有所帮助，让我们一起用Mermaid创建更多精美实用的图表！

▍参考资料 ▍

• Mermaid官方文档：Mermaid | Diagramming and charting tool
• Markdown与Mermaid结合使用指南