在人工智能飞速发展的今天，职场中如何高效利用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{菱形（判断）}
案例：圆角矩形用单括号：(需求提出)，(结束)
案例：圆形节点用双括号：((产品设计))
菱形：{测试验收}
- 连线语法
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）主要描述：
- 实体（Entity）：系统中的对象，如“用户”“订单”“商品”等。
- 属性（Attributes）：实体的字段或特征。
- 关系（Relationships）：实体之间的联系，如一对多、一对一、多对多。
erDiagram 用户 ||–o{ 订单 : 下单 订单 ||–|{ 订单明细 : 包含 商品 ||–o{ 订单明细 : 被购买 用户 { int用户ID string姓名 string邮箱 string手机号 } 订单 { int订单ID date 下单日期 float总金额 string状态 } 订单明细 { int明细ID int数量 float单价 } 商品 { int商品ID string名称 string分类 float价格 }
效果：
先写这么多，后面再继续写一篇Mermaid的进阶小结。
本文由人人都是产品经理作者【Blues】，微信公众号：【BLUES】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。