大模型+Mermaid：人工智能时代的职场绘图神器 --知识铺

在人工智能飞速发展的今天，职场中如何高效利用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）主要描述：

**实体（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 协议。

文章目录