Mermaid 概述
Mermaid 是一个基于 JavaScript 的图表绘制工具，它允许我们使用类似 Markdown 的语法来创建和修改各种类型的图表。其核心优势在于「用简单代码生成可视化图表」，无需手动拖拽，支持多种主流图表类型，因此广泛用于文档、笔记、博客及开源项目中，非常适合快速梳理逻辑与展示流程。
支持的图表类型
- 流程图（Flowchart）：用于展示任务流程、业务逻辑、决策分支等，支持横向/纵向布局及复杂连接关系标注。
- 甘特图（Gantt）：用于展示项目任务的时间安排、起止时间、持续时长及阶段划分。
- 时序图（Sequence Diagram）：适合技术场景中接口调用、系统交互、前后端通信的梳理。
- 类图（Class Diagram）：用于展示类、接口、属性、方法及它们之间的关系（继承、关联、实现等）。
- 饼图（Pie Chart）：用于直观呈现数据的比例分布，适合简单的占比分析。
- 状态图（State Diagram）：用于描述对象在生命周期中的状态变化及触发条件。
快速入门
我们可以通过 AI 工具与绘图软件结合，从而快速制作一个流程图。这种方式简单快捷，虽然可能无法一次性达到完美预期，但能大幅减少重复劳动。
1. AI 工具
这里以 DeepSeek 为例，使用 AI 工具生成 Mermaid 代码。通过自然语言描述需求，AI 即可输出对应的 Mermaid 语法。
2. 绘图软件
将生成的 Mermaid 代码插入到绘图软件（如 draw.io）中，可以进行二次调整。操作路径通常为 调整图形 -> 插入 -> Mermaid。
生成其他图示例
为了让 AI 生成达到预期效果，关键在于提供结构清晰的提示词。以下是针对不同图表类型的实战思路与示例。
1. 流程图（展示任务流程）
流程图主要用来梳理逻辑关系，我们需要关注流程步骤以及分支或特殊情况。
适用场景：业务流程图、算法步骤、操作指引、需求拆解。 核心特性：支持矩形（任务）、菱形（判断）、圆形（起止）等组件，可自定义箭头样式、颜色。
带上需要生成的主题，将上述两点投喂给 AI 即可。如果不满意，可以手动修改代码或调整提示词再次生成。
请绘制一个详细的电商平台用户下单与支付流程图。流程包括：用户浏览商品、加入购物车、提交订单、选择支付方式、完成支付、商家发货、用户确认收货。特殊情况：需区分不同支付方式 1.若选择'在线支付'，则直接完成扣款；2.若选择'货到付款'，则跳过支付步骤进入发货流程。用 Mermaid 代码表示。
渲染效果示意：包含开始节点、浏览商品、加入购物车、提交订单、选择支付方式（分支）、在线支付/货到付款、完成支付、商家发货、用户确认收货、结束节点。
2. 甘特图（管理项目进度）
甘特图用于项目任务的时间安排、起止时间、持续时长、阶段划分。
适用场景：项目计划、活动排期、任务分工、进度跟踪。 核心特性：支持阶段分组、关键任务标注（crit）、里程碑（milestone）、今日标记。
思路分析
从概述中可以提炼出几点核心：
- 任务拆解：各个阶段有什么具体任务。
- 时间安排：项目任务/活动安排的起止时间。
- 细节补充：条件约束或特殊情况。
生成示例
生成一个为期 5 天的节日线上互动活动甘特图。活动分为三个阶段：预热引流、互动开展、开奖收尾。 - 预热引流主要任务是节日海报发布和社交媒体话题预热； - 互动开展包括线上答题、趣味抽奖、用户作品征集； - 开奖收尾进行获奖名单公示、奖品发放和活动效果分析。请详细列出每个阶段的具体任务和时间安排，用 Mermaid 代码表示，起始时间为 2025-12-01。
渲染效果示意：显示 12/01 至 12/05 的时间轴，包含预热引流、互动开展、开奖收尾三个阶段的任务条。
3. 时序图（展示交互流程）
时序图适合技术场景中接口调用、系统交互、前后端通信的梳理。
适用场景：接口交互流程、前后端通信、微服务调用、协议交互。 核心特性：支持同步/异步消息、返回值、超时标注、对象激活状态显示。
思路分析
在技术场景中，需要有具体交互的场景、参与流程的角色或对象、以及在它们之间传递的内容。
- 场景定义：描述要绘制的具体交互过程。
- 对象明确：列出参与该流程的所有关键角色或对象。
- 交互序列拆解：按时间顺序描述对象之间传递的内容（消息、调用或事件）。
- 细节补充：条件约束或特殊情况。
生成示例
绘制一个微信小程序支付流程，要求如下 参与角色：用户、小程序、后端、数据库、微信支付 API 交互顺序 1.用户通过小程序支付，后端接收请求 2.后端生成平台订单，通过 API 生成预付单，并通过预付单表示生成支付信息，返回支付参数 3.小程序调用微信接口发送微信支付 4.微信支付验证权限，返回支付授权给小程序 5.小程序输入密码，确认支付 6.微信支付通知支付结果给后端，后端保存通知，告诉 API 已接收 7.API 发返回支付结果给小程序，小程序通过后端查询支付状态 8.后端通过调用查单接口，获取查询结果，给小程序展示支付消息 拓充：上述只是概括，请使用合理的语言和描述，生成对应的时序图，以 mermaid 格式输出
渲染效果示意：展示用户、小程序、后端、数据库、微信支付 API 之间的消息交互时序，包含初始化、发起支付、异步通知、状态查询四个阶段。
4. 类图（设计面向对象结构）
用于展示类、接口、属性、方法及它们之间的关系（继承、关联、实现等），是编程设计（如 Java、Python）的常用工具。
适用场景：OOP 编程设计、系统架构设计、数据模型梳理。 核心特性：支持继承、实现、关联、聚合、组合等关系，可标注属性/方法的访问权限（public/private）。
思路分析
以 Java 为例，类图主要描述的是类与类之间的关系，可以从以下几个方面入手：
- 核心业务场景：功能/模块名称。
- 核心类：场景所包含的核心类。
- 关键属性、核心方法：每个类的关键属性、核心方法。
- 类之间的关系：如继承、关联、聚合等。
生成示例
生成一个 Java 类图，要求如下： 1. 核心业务场景：学生成绩管理 2. 包含 Student 学生、Score 成绩、Course 课程 三个核心类 3. 关键属性：Student 的 id、name、grade；Score 的 scoreId、subject、point 核心方法：Student 的 getStudentInfo()、updateGrade()；Score 的 calculateTotal() 4. Score 关联 Student 和 Course 拓充：以 mermaid 类图形式输出
5. 饼图（展示数据占比）
用于直观呈现数据的比例分布，适合简单的占比分析（如资源分配、任务完成率）。
适用场景：数据统计、占比分析、资源分配展示。 核心特性：支持自定义标签、颜色，自动计算百分比。
思路分析
饼图着重的是「比例」，因此可以从下面几个方面入手：
- 图表标题。
- 数据划分规则：在什么条件下，数据为一个类别。
- 数据占比：可以自定义占比，也可以根据实际数据统计。
- 拓展细节：如输出格式、是否自动计算百分比。
生成示例
生成饼图，展示高一 (1) 班学生数学成绩的情况，要求如下 1.图表标题为"高一 (1) 班期中考试成绩分布" 2.成绩划分规则：卓越 (90+)、优秀 (80~89)、良好 (70~79)、合格 (60~69)、不合格 (<60) 3.对应数据占比随机 4.颜色搭配清新，标签字体清晰，直接输出 mermaid 饼图
渲染效果示意：显示卓越、优秀、良好、合格、不合格五个区间的占比分布。
6. 状态图（展示状态流转）
用于描述对象在生命周期中的状态变化及触发条件（如订单状态、用户状态）。
适用场景：状态流转梳理（订单、支付、审批）、生命周期管理。 核心特性：支持初始/结束状态、状态转移条件、并行状态。
思路分析
状态图强调的是「状态」和「状态转换条件」，可以从下面几个方面入手：
- 图表标题。
- 状态划分：状态包括哪几个阶段或节点。
- 状态间转换条件：触发条件是什么，触发后状态转换到哪里。
生成示例
生成订单系统状态图，要求如下： 1. 图表标题：订单状态流转图（核心场景） 2. 核心状态：待支付、已支付、已发货、已完成、已取消、退款中、已退款 3. 触发条件与状态流转： - 初始状态→待支付（用户提交订单） - 待支付→已支付（用户完成支付） - 待支付→已取消（用户超时未支付/主动取消） - 已支付→已发货（商家确认发货） - 已发货→已完成（用户确认收货/自动确认） - 已支付→退款中（用户申请退款，商家审核通过） - 退款中→已退款（平台完成退款转账） 4. 输出要求：输出 mermaid 状态图，状态转移条件标注清晰，流转逻辑符合电商订单常规规则，图表直观易懂
渲染效果示意：展示订单从待支付到已完成或退款的完整状态流转路径。
结语
本文通过多个「提示词 + Mermaid 代码」示例，展示了如何用 AI 快速生成流程图、甘特图、时序图、类图、饼图和状态图，帮助你高效完成技术文档与学习笔记的可视化。掌握这套工作流，能让你的技术表达更加直观高效。