在人工智能飞速发展的今天，职场中如何高效利用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[上线运营]
即可生成一张漂亮的自上而下流程图。
graph TD
语法结构为：
graph [方向]
方向参数如下：
案例：横向参数用LR，表示Left到Right
节点格式如下：记得这些符号都是英文半角。
A[方框]B(圆角矩形)C((圆形))D>旗帜形]E{菱形（判断）}案例：圆角矩形用单括号：(需求提出)，(结束)
案例：圆形节点用双括号：((产品设计))
菱形：{测试验收}
3. 连线语法
A –> B 直线箭头
A —
– B 无箭头连线
A –
– 文案 –> B 带说明的箭头
案例：带说明的箭头
可组合：
A -.-> B 虚线箭头
A ==> B 粗线箭头
案例：粗箭头==>
可以使用 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[上线发布]
假设测试阶段可能「不通过」，那我们就加上条件判断节点：
graph TD
A[需求提出] –> B[评审通过]
B –> C[产品设计]
C –> D[开发实现]
D –> E{测试是否通过?}
E –>|是| F[上线发布]
E –>|否| D
这样就出现了一个判断循环逻辑。
如果想区分「产品组」和「技术组」的职责：
graph LR
subgraph 产品组
A[需求提出] –> B[评审通过] –> C[产品设计]
end
subgraph 技术组
D[开发实现] –> E{测试是否通过?}
E –>|是| F[上线发布]
E –>|否| D
end
C –> D
可以调整方向为 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 还能画：
代码：
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
展示系统状态变化。
stateDiagram-v2
[*] –> 待审核
待审核 –> 审核中: 提交
审核中 –> 通过: 符合要求
审核中 –> 拒绝: 不符合
通过 –> [*]
拒绝 –> [*]
嵌套状态（层级状态）
stateDiagram-v2
[*] –> 登录流程
state 登录流程 {
[*] –> 输入账号
输入账号 –> 验证密码
验证密码 –> 登录成功
}
登录流程 –> [*]
展示项目进度、任务依赖。
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
常用于展示面向对象结构或数据结构。
classDiagram
class 人 {
+姓名
+年龄
+打招呼
}
class 学生 {
+学号
+选课
}
class 老师 {
+工号
+授课
}
人 <|-
– 学生
人 <|-
– 老师
说明：
<|–表示继承
*–表示组合
o–表示聚合
–表示关联
用于数据库表之间关系展示。
erDiagram
用户
广瑞网-a股杠杆-正规配资平台-炒股杠杆平台提示：文章来自网络，不代表本站观点。
- 上一篇：股票十倍杠杆正规平台有哪些政策委员会将根据新信息适时调整政策
- 下一篇：没有了
