在人工智能飞速发展的今天，职场中如何高效利用AI工具来提升工作效率成为了许多人关注的焦点。本文将带你深入了解如何结合大模型和Mermaid工具，快速生成各种职场中常用的图表，如流程图、思维导图、甘特图等。

产品经理的一项重要技能就是绘制各种工程图，譬如流程图、思维导图、桑基图、用户旅程地图等，在有了大模型之后，用AI绘图更是成为一个大幅提升工作效率的必备技能。

我们先看看下面几个案例：

用户登录流程图

象限图

思维导图

上面这些，都是使用AI+Mermaid生成的下面我们对这个绘图工具做一个快速学习，尤其是后面的绘图案例，包括语法和绘图效果，可以直接抄作业。

一、什么是 Mermaid？

Mermaid 是一种用文本语法生成图表的轻量级标记语言。

它的理念是：用文字描述图，用渲染引擎生成图形。

只要用几行语句，就能生成流程图、时序图、甘特图、状态图、用户旅程图等，非常适合：

• 产品经理整理业务流程
• 开发人员画系统架构图
• 教师或博主制作知识笔记
• 写作、课程、报告中插入可视化逻辑图

Mermaid官网：https://mermaid.js.org/

推荐一个Mermaid在线编辑器，比官网的好用，可以在电脑打开，使用本文后面的案例进行绘图学习。

https://www.lddgo.net/chart/mermaid-chart

例如，在 Markdown 文档或微信公众号排版工具（如语雀、Notion、Typora、Obsidian）中，你可以直接这样写：

graphTD

A[需求提出]–>B[产品设计]

B–> C[开发实现]

C –> D[测试验收]

D –> E[上线运营]

即可生成一张漂亮的自上而下流程图。

二、Mermaid 基本语法概览

1. 图类型定义

graph TD

语法结构为：

graph [方向]

方向参数如下：

案例：横向参数用LR，表示Left到Right

2. 节点定义

节点格式如下：记得这些符号都是英文半角。

• A[方框]
• B(圆角矩形)
• C((圆形))
• D>旗帜形]
• E{菱形（判断）}

案例：圆角矩形用单括号：(需求提出)，(结束)

案例：圆形节点用双括号：((产品设计))

菱形：{测试验收}

3. 连线语法

A –> B 直线箭头

A —

– B 无箭头连线

A –

– 文案 –> B 带说明的箭头

案例：带说明的箭头

可组合：

A -.-> B 虚线箭头

A ==> B 粗线箭头

案例：粗箭头==>

4. 子图与分组

可以使用 subgraph 来组织流程逻辑块：

graph LR

subgraph 产品流程

A[需求] –> B[设计]

end

subgraph 技术流程

C[开发] –> D[测试]

end

B –> C

案例：subgraph组织逻辑块

三、实战案例讲解：产品上线流程图

我们来一步步画出一个「App产品版本上线」的业务流程图。

Step 1：基本框架

先确定主干流程：

graph TD

A[需求提出] –> B[评审通过]

B –> C[产品设计]

C –> D[开发实现]

D –> E[测试验收]

E –> F[上线发布]

Step 2：加入判断分支

假设测试阶段可能「不通过」，那我们就加上条件判断节点：

graph TD

A[需求提出] –> B[评审通过]

B –> C[产品设计]

C –> D[开发实现]

D –> E{测试是否通过?}

E –>|是| F[上线发布]

E –>|否| D

这样就出现了一个判断循环逻辑。

Step 3：添加泳道（子图）

如果想区分「产品组」和「技术组」的职责：

graph LR

subgraph 产品组

A[需求提出] –> B[评审通过] –> C[产品设计]

end

subgraph 技术组

D[开发实现] –> E{测试是否通过?}

E –>|是| F[上线发布]

E –>|否| D

end

C –> D

Step 4：优化美观度

可以调整方向为 LR（从左到右），让流程更紧凑；

并加上带文字的连线说明。

graph LR

A(需求提出) –评审会–> B[通过]

B –> C[产品设计]

C –> D[开发实现]

D –> E{测试结果}

E –>|通过| F(上线发布)

E –>|不通过| D

最终效果一目了然。

🔹样式定义（可局部美化）

graph LR

A[开始] –> B[处理中]

B –> C[结束]

style A fill:#8fd3f4,stroke:#333,stroke-width:2px

style B fill:#f6f6a6

style C fill:#9fe3b4

案例：颜色填充

四、更多可视化类型

除了流程图（flowchart/graph），Mermaid 还能画：

案例1：时序图

代码：

sequenceDiagram

用户 ->> 产品经理: 提出需求

产品经理 ->> 开发: 提交需求文档

开发 ->> 测试: 提交测试版本

测试 ->> 用户: 验收版本

效果：

案例

用于展示不同角色之间的消息往来。

代码：

sequenceDiagram

participant 用户

participant 系统

用户 ->> 系统: 提交登录信息

系统 –>> 用户: 返回验证结果

效果

更多语法

sequenceDiagram

participant A as 客户端

participant B as 服务器

participant C as 数据库

A->>B: 登录请求

B->>C: 查询用户信息

C–>>B: 返回数据

B–>>A: 登录成功

Note over A,B: 登录耗时 < 2s

激活/停用生命线

sequenceDiagram

A->>B: 请求

activate B

B->>C: 调用

activate C

C–>>B: 响应

deactivate C

B–>>A: 完成

deactivate B

案例2，状态图（State Diagram）

展示系统状态变化。

stateDiagram-v2

[*] –> 待审核

待审核 –> 审核中: 提交

审核中 –> 通过: 符合要求

审核中 –> 拒绝: 不符合

通过 –> [*]

拒绝 –> [*]

嵌套状态（层级状态）

stateDiagram-v2

[*] –> 登录流程

state 登录流程 {

[*] –> 输入账号

输入账号 –> 验证密码

验证密码 –> 登录成功

}

登录流程 –> [*]

案例3，甘特图（Gantt Chart）

展示项目进度、任务依赖。

gantt

title 网站开发计划

dateFormat YYYY-MM-DD

section 产品

需求分析 :a1, 2025-10-01, 3d

原型设计 :after a1, 4d

section 技术

前端开发 :b1, after a1, 5d

后端开发 :b2, after a1, 6d

section 测试

系统测试 :after b2, 3d

上线发布 :milestone, 2025-10-20, 1d

案例4，类图（Class Diagram）

常用于展示面向对象结构或数据结构。

classDiagram

class 人 {

+姓名

+年龄

+打招呼()

}

class 学生 {

+学号

+选课()

}

class 老师 {

+工号

+授课()

}

人 <|-

– 学生

人 <|-

– 老师

说明：

<|–表示继承

*–表示组合

o–表示聚合

–表示关联

案例5，实体关系图（ER Diagram）

用于数据库表之间关系展示。

erDiagram

用户 ||–o{ 订单 : 拥有

订单 ||–|{ 商品 : 包含

用户 {

int id

string 姓名

string 邮箱

}

订单 {

int id

string 下单时间

}

商品 {

int id

string 名称

float 价格

}

关系说明：

||–o{：一对多

||–||：一对一

}o–o{：多对多

案例6，用户旅程图（User Journey）

展示用户在各阶段的体验与情绪变化。

journey

title 用户注册体验路径

section 首次访问

点击注册: 5: 开心

填写信息: 3: 一般

验证邮箱: 2: 烦躁

section 成功注册

登录成功: 4: 放松

使用产品: 5: 满意

数值代表情绪分数（1–5），可用于用户体验分析。

案例7，饼图（Pie Chart）

pie title 产品使用设备占比

“移动端” : 60

“PC端” : 30

“平板” : 10

案例8，需求优先级矩阵（Quadrant Diagram 模拟）

虽然 Mermaid 没有专门的象限图，但可用流程图模拟：

graph TB

A1[“重要且紧急”] –> A2[“立即处理”]

B1[“重要但不紧急”] –> B2[“计划安排”]

C1[“不重要但紧急”] –> C2[“委托他人”]

D1[“不重要不紧急”] –> D2[“忽略/删除”]

案例9，思维结构图（树状图）

graph TD

目标[打造知识IP] –> 内容策略

目标 –> 渠道建设

目标 –> 社群运营

内容策略 –> 图文输出

内容策略 –> 视频短片

渠道建设 –> 微信公众号

渠道建设 –> 视频号

社群运营 –> 核心粉丝群

社群运营 –> 线下活动

案例10，综合案例：产品生命周期图

graph TD

A[产品概念] –> B[需求分析]

B –> C[设计阶段]

C –> D{开发是否完成?}

D –>|是| E[测试阶段]

D –>|否| C

E –> F{测试通过?}

F –>|是| G[上线发布]

F –>|否| D

G –> H[运营与优化]

H –> I{是否下线?}

I –>|是| J[归档]

I –>|否| H

案例11，Quadrant Chart（象限图）

🧩语法规范

quadrantChart

title [标题]

x-axis [X轴左标签] → [右标签]

y-axis [Y轴下标签] → [上标签]

[名称]: [x值, y值]

💡案例代码

quadrantChart

title 基金风险收益象限

x-axis 风险低 –>风险高

y-axis 收益率 –>收益高

“货币基金”: [0.2, 0.1]

“债券基金”: [0.4, 0.3]

“混合基金”: [0.6, 0.6]

“股票基金”: [0.9, 0.8]

quadrantChart

title Reach and engagement of campaigns

x-axis Low Reach –> High Reach

y-axis Low Engagement –> High Engagement

quadrant-1 We should expand

quadrant-2 Need to promote

quadrant-3 Re-evaluate

quadrant-4 May be improved

Campaign A: [0.3, 0.6]

Campaign B: [0.45, 0.23]

Campaign C: [0.57, 0.69]

Campaign D: [0.78, 0.34]

Campaign E: [0.40, 0.34]

Campaign F: [0.35, 0.78]

案例12，Kanban（任务看板）

🧩语法规范

kanban

section [列名]

[任务]

💡案例代码

kanban

title 小程序开发任务

section 待办

需求调研

UI设计

section 进行中

前端开发

AI接入

section 已完成

原型评审

案例13，ER 图（Entity Relationship Diagram，实体关系图）

ER 图（Entity Relationship Diagram）主要描述：

1. 实体（Entity）：系统中的对象，如“用户”“订单”“商品”等。
2. 属性（Attributes）：实体的字段或特征。
3. 关系（Relationships）：实体之间的联系，如一对多、一对一、多对多。

erDiagram

用户 ||–o{ 订单 : 下单

订单 ||–|{ 订单明细 : 包含

商品 ||–o{ 订单明细 : 被购买

用户 {

int用户ID

string姓名

string邮箱

string手机号

}

订单 {

int订单ID

date 下单日期

float总金额

string状态

}

订单明细 {

int明细ID

int数量

float单价

}

商品 {

int商品ID

string名称

string分类

float价格

}

效果：

先写这么多，后面再继续写一篇Mermaid的进阶小结。