AI 提效指南：快速上手一键生成Mermaid图

前言

本文主要内容：带你用 AI + Mermaid 快速生成流程图、甘特图、时序图、类图、饼图、状态图等常见图表。 适合人群：需要写技术博客、项目文档、学习笔记，又不想手动画图的同学。 阅读收益：看完你能写出一套「提示词 + Mermaid 代码示例」，让 AI 自动生成可视化图表。

1. Mermaid 概述

Mermaid 是一个基于 JavaScript 的图表绘制工具，通过使用类似 Markdown 的语法来创建和修改各种类型的图表。

1.1 功能

Mermaid 的核心优势是「用简单代码生成可视化图表」，无需手动拖拽，支持多种主流图表类型，因此广泛用于文档、笔记、博客、开源工具中，适合快速梳理逻辑、展示流程。

1.2 支持的图表类型

• 流程图（Flowchart）：用于展示任务流程、业务逻辑、决策分支等，支持横向 / 纵向布局、复杂分支、连接关系标注。
• 甘特图（Gantt）：用于展示项目任务的时间安排、起止时间、持续时长、阶段划分。
• 时序图（Sequence Diagram）：适合技术场景中接口调用、系统交互、前后端通信的梳理。
• 类图（Class Diagram）：用于展示类、接口、属性、方法及它们之间的关系（继承、关联、实现等）。
• 饼图（Pie Chart）：用于直观呈现数据的比例分布，适合简单的占比分析（如资源分配、任务完成率）。
• 状态图（State Diagram）：用于描述对象在生命周期中的状态变化及触发条件（如订单状态、用户状态）。

2.快速入门

我们可以通过AI工具与绘图软件结合，从而快速制作一个流程图。

优点：简单，快捷 缺点：可能无法达到预期

2.1 AI工具

这里以DeepSeek为例，使用AI工具生成mermaid图。

2.2 绘图软件

通过绘图软件(draw.io),将mermaid代码插入( 调整图形-> 插入 -> Mermaid)，可以进行二次更改

3. 生成其他图示例

这里主要是以较全面的提示词，从而让AI生成达到预期效果。

可以通过直接放文件，也可以通过较复杂的提示词，这里以提示词为例。

3.1 流程图(展示任务流程)

通过几分钟的实战，以生成流程图为例，快速掌握该技能。

3.1.1 思路分析

流程图主要用来梳理逻辑关系，因此我们主要需要以下两点：

1. 流程步骤
2. 分支或特殊情况

使用场景：业务流程图、算法步骤、操作指引、需求拆解 核心特性：支持矩形（任务）、菱形（判断）、圆形（起止）等组件，可自定义箭头样式、颜色。

带上需要生成的主题，将上述两点投喂给 AI 即可，让其生成 Mermaid 代码，不满意可以手动修改或调整提示词再次投喂。

3.1.2 提示词示例

请绘制一个详细的电商平台用户下单与支付流程图。
流程包括：用户浏览商品、加入购物车、提交订单、选择支付方式、完成支付、商家发货、用户确认收货。特殊情况：需区分不同支付方式
1.若选择“在线支付”，则直接完成扣款；
2.若选择“货到付款”，则跳过支付步骤进入发货流程。用Mermaid代码表示。

展现效果：

3.2 甘特图（管理项目进度）

甘特图用于项目任务的时间安排、起止时间、持续时长、阶段划分。

适用场景：项目计划、活动排期、任务分工、进度跟踪。 核心特性：支持阶段分组、关键任务标注（crit）、里程碑（milestone）、今日标记。

3.2.1 思路分析

从上述概述可以得到以下几点核心：

1. 任务拆解：各个阶段有什么具体任务
2. 时间安排：项目任务 / 活动安排的起止时间
3. 细节补充：条件约束或特殊情况

3.2.2 生成示例

提示词示例

生成一个为期 5 天的节日线上互动活动甘特图。
活动分为三个阶段：预热引流、互动开展、开奖收尾。
- 预热引流主要任务是节日海报发布和社交媒体话题预热；
- 互动开展包括线上答题、趣味抽奖、用户作品征集；
- 开奖收尾进行获奖名单公示、奖品发放和活动效果分析。
请详细列出每个阶段的具体任务和时间安排，用 Mermaid 代码表示，起始时间为 2025-12-01。

展示效果

3.3 时序图（展示交互流程）

时序图适合技术场景中接口调用、系统交互、前后端通信的梳理。

适用场景：接口交互流程、前后端通信、微服务调用、协议交互。 核心特性：支持同步 / 异步消息、返回值、超时标注、对象激活状态显示。

3.3.1 思路分析

在技术场景中，需要有具体交互的场景、参与流程的角色或对象、以及在它们之间传递的内容。

因此得到以下核心：

1. 场景定义：描述要绘制的具体交互过程
2. 对象明确：列出参与该流程的所有关键角色或对象
3. 交互序列拆解：按时间顺序描述对象之间传递的内容（消息、调用或事件）
4. 细节补充：条件约束或特殊情况

3.3.2 生成示例

提示词示例

绘制一个微信小程序支付流程，要求如下

参与角色：用户、小程序、后端、数据库、微信支付API
交互顺序
1.用户通过小程序支付，后端接收请求
2.后端生成平台订单，通过API生成预付单，并通过预付单表示生成支付信息，返回支付参数
3.小程序调用微信接口发送微信支付
4.微信支付验证权限，返回支付授权给小程序
5.小程序输入密码，确认支付
6.微信支付通知支付结果给后端，后端保存通知，告诉API已接收
7.API发返回支付结果给小程序，小程序通过后端查询支付状态
8.后端通过调用查单接口，获取查询结果，给小程序展示支付消息

拓充：上述只是概括，请使用合理的语言和描述，生成对应的时序图，以mermaid格式输出

3.4 类图（设计面向对象结构）

用于展示类、接口、属性、方法及它们之间的关系（继承、关联、实现等），是编程设计（如 Java、Python）的常用工具。

适用场景：OOP 编程设计、系统架构设计、数据模型梳理。 核心特性：支持继承、实现、关联、聚合、组合等关系，可标注属性 / 方法的访问权限（public / private）。

3.4.1 思路分析

以 Java 为例，类图主要描述的是类与类之间的关系，因此可以从以下几个方面入手：

1. 核心业务场景：功能 / 模块名称
2. 核心类：场景所包含的核心类
3. 关键属性、核心方法：每个类的关键属性、核心方法
4. 类之间的关系：如继承、关联、聚合等

3.4.2 生成示例

提示词示例

生成一个 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类图形式输出

展示效果 (图片示例)

请添加图片描述

3.5 饼图（展示数据占比）

用于直观呈现数据的比例分布，适合简单的占比分析（如资源分配、任务完成率）。

适用场景：数据统计、占比分析、资源分配展示。 核心特性：支持自定义标签、颜色，自动计算百分比。

3.5.1 思路分析

饼图着重的是「比例」，因此可以从下面几个方面入手：

1. 图表标题
2. 数据划分规则：在什么条件下，数据为一个类别
3. 数据占比：可以自定义占比，也可以根据实际数据统计（如人数占总人数的比例）
4. 拓展细节：如输出格式、是否自动计算百分比、是否直接渲染等

3.5.2 生成示例

提示词示例

生成饼图，展示高一(1)班学生数学成绩的情况，要求如下

1.图表标题为"高一(1)班期中考试成绩分布"
2.成绩划分规则：卓越(90+)、优秀(80~89)、良好(70~79)、合格(60~69)、不合格(<60)
3.对应数据占比随机
4.颜色搭配清新，标签字体清晰，直接输出mermaid饼图

展示效果

#mermaid-svg-UimObekkTENGIKug {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-UimObekkTENGIKug .error-icon{fill:#552222;}#mermaid-svg-UimObekkTENGIKug .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UimObekkTENGIKug .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-UimObekkTENGIKug .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UimObekkTENGIKug .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UimObekkTENGIKug .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UimObekkTENGIKug .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UimObekkTENGIKug .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UimObekkTENGIKug .marker.cross{stroke:#333333;}#mermaid-svg-UimObekkTENGIKug svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UimObekkTENGIKug .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-UimObekkTENGIKug .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-UimObekkTENGIKug .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-UimObekkTENGIKug .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-UimObekkTENGIKug :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 18% 25% 32% 16% 9% 高一(1)班期中考试成绩分布（共52人） 卓越 (90-100分) : 10人 [18.3] 优秀 (80-89分) : 13人 [24.7] 良好 (70-79分) : 16人 [31.5] 合格 (60-69分) : 8人 [16.2] 不合格 (<60分) : 5人 [9.3]

3.6 状态图（展示状态流转）

用于描述对象在生命周期中的状态变化及触发条件（如订单状态、用户状态）。

适用场景：状态流转梳理（订单、支付、审批）、生命周期管理。 核心特性：支持初始 / 结束状态、状态转移条件、并行状态。

3.6.1 思路分析

状态图强调的是「状态」和「状态转换条件」，可以从下面几个方面入手：

1. 图表标题
2. 状态划分：状态包括哪几个阶段或节点
3. 状态间转换条件：触发条件是什么，触发后状态转换到哪里

3.6.2 生成示例

提示词示例

生成订单系统状态图，要求如下：
1. 图表标题：订单状态流转图（核心场景）
2. 核心状态：待支付、已支付、已发货、已完成、已取消、退款中、已退款
3. 触发条件与状态流转：
   - 初始状态→待支付（用户提交订单）
   - 待支付→已支付（用户完成支付）
   - 待支付→已取消（用户超时未支付/主动取消）
   - 已支付→已发货（商家确认发货）
   - 已发货→已完成（用户确认收货/自动确认）
   - 已支付→退款中（用户申请退款，商家审核通过）
   - 退款中→已退款（平台完成退款转账）
4. 输出要求：输出mermaid状态图，状态转移条件标注清晰，流转逻辑符合电商订单常规规则，图表直观易懂

展示效果

结语

回顾一下：本文通过多个「提示词 + Mermaid 代码」示例，展示了如何用 AI 快速生成流程图、甘特图、时序图、类图、饼图和状态图，帮助你高效完成技术文档与学习笔记的可视化。

• 如果本文对你有帮助：欢迎点赞、收藏，让更多正在学习的同学看到。
• 遇到问题或有不同理解：可以在评论区留言，一起讨论、互相学习。
• 想系统看更多内容：可以关注专栏《AI工具使用目录》，一起把基础打牢。