> 在人工智能飞速发展的今天，职场中如何高效利用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 协议。