【Mermaid 图表】简单几行代码就能生成流程图、序列图、甘特图、类图等专业图表

vdoi

已于 2025-04-17 16:46:33 修改

阅读量1.8k

点赞数 14

分类专栏： Javascript 文章标签：流程图甘特图 javascript

于 2025-04-15 11:54:54 首次发布

本文链接：https://blog.csdn.net/qq_48180611/article/details/147246403

版权

Javascript 专栏收录该内容

5 篇文章

订阅专栏

一、什么是 Mermaid？

Mermaid 是一个基于 JavaScript 的开源图表绘制工具，通过简洁的文本语法就能生成流程图、序列图、甘特图、类图等专业图表。它的核心优势在于：

轻量级：无需安装复杂软件，引入脚本即可使用
易读性强：语法接近自然语言，学习成本低
跨平台支持：可嵌入 HTML、Markdown、文档工具（如 GitBook、Notion）
丰富图表类型：覆盖技术文档、项目管理、架构设计等多种场景

官网：https://mermaid-js.github.io/

二、快速上手

1. 在 HTML 中引入

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js"></script>
  <style>
    .mermaid { margin: 20px auto; max-width: 800px; }
  </style>
</head>
<body>
  <div class="mermaid">
    graph TD
      A[开始] --> B{是否登录?}
      B -->|是| C[加载用户数据]
      B -->|否| D[跳转登录页面]
      C --> E[显示主页]
      D --> E
  </div>

  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
</body>
</html>

2. Markdown 中使用

大多数支持 Markdown 的平台（如 GitHub、掘金、CSDN）都能直接渲染 Mermaid 图表，只需用代码块声明：

graph TD
  A[用户下单] --> B[库存检查]
  B -->|充足| C[生成订单]
  B -->|不足| D[触发补货流程]
  C --> E[发送确认邮件]
  D --> E

2.1 CSDN官方例子

在这里插入图片描述

3. 在线使用

网站：https://mermaid-live.nodejs.cn/
在这里插入图片描述

三、常见图表类型及语法示例

1. 流程图（Flowchart）

方向控制：TD（从上到下）、LR（从左到右）、BT（从下到上）、RL（从右到左）
节点类型：
- 矩形：A[节点名称]
- 菱形（判断）：B{选择分支}
- 圆形：C((圆角节点))
- 平行四边形（输入输出）：D[/输入信息/]

graph LR
  登录模块 --> 权限验证
  权限验证 -->|管理员| 后台管理系统
  权限验证 -->|普通用户| 用户中心
  用户中心 --> 订单查询
  用户中心 --> 个人设置

2. 序列图（Sequence Diagram）

用于描述对象之间的交互顺序，关键词：participant（参与者）、->（同步消息）、-->（异步消息）、==>（返回消息）

3. 甘特图（Gantt Chart）

项目管理神器，支持任务时间规划、依赖关系：

gantt
  title 项目进度计划
  dateFormat  YYYY-MM-DD
  section 需求阶段
  需求调研       :done, des1, 2025-04-01, 7d
  方案评审       :done, des2, 2025-04-08, 3d
  section 开发阶段
  后端开发       :active, dev1, 2025-04-12, 15d
  前端开发       :dev2, 2025-04-12, 15d
  section 测试阶段
  集成测试       :test1, 2025-05-01, 7d

4. 类图（Class Diagram）

面向对象设计必备，支持继承（--|>）、实现（..|>）、关联（--）、依赖（..>）：

classDiagram
  class Animal {
    - name: string
    + speak(): void
  }
  class Dog {
    + breed: string
    + bark(): void
  }
  class Cat {
    + color: string
    + meow(): void
  }
  Animal <|-- Dog
  Animal <|-- Cat
  Dog "1" -- "*" Bone
  class Bone {
    - material: string
  }

5. 状态图（State Diagram）

描述对象状态转换逻辑：

stateDiagram-v2
  [*] --> 初始状态
  初始状态 --> 运行中
  运行中 --> 错误状态: 发生异常
  运行中 --> 完成状态: 任务结束
  错误状态 --> 运行中: 重试成功
  错误状态 --> [*]: 放弃重试

6. 饼图（Pie Chart）

数据可视化场景：

pie
  title 浏览器市场份额
  "Chrome" : 60
  "Edge" : 15
  "Firefox" : 10
  "Safari" : 15

四、高级技巧：让图表更专业

1. 自定义样式

通过 class 和 CSS 自定义节点样式：

graph TD
  A[普通节点]:::normal
  B{判断节点}:::decision
  C[特殊节点]:::special

  classDef normal fill:#f9f,stroke:#333
  classDef decision fill:#b8d9a9,stroke:#2c7
  classDef special fill:#a9d9d9,stroke:#2c7,stroke-width:2px

2. 子图（Subgraph）

组织复杂图表结构：

graph TD
  subgraph 订单处理系统
    A[接收订单] --> B[库存校验]
    B --> C{库存是否充足}
    C -->|是| D[生成物流单]
    C -->|否| E[触发采购流程]
  end
  D --> F[通知用户发货]
  E --> F

3. 数学公式集成

在节点中插入 LaTeX 公式（需配合渲染工具）：

graph LR
  A[计算面积] --> B{公式选择}
  B -->|圆面积| C[$$S = \pi r^2$$]
  B -->|矩形面积| D[$$S = a \times b$$]