从文档到流程图，从编辑到美化， 使用 DeepSeek 将 20 种图表一网打尽，本文概览：
• 两种绘制流程图的场景 • AI 生成和预览 Mermaid 图表 • AI 调整图表内容和样式 • 从需求设计文档到图标 • 手工编辑图表的两种方式 • 20种图表类型展示
不管是做产品、需求还是技术，都免不了和各种图表打交道。 然而绘制图表的过程（流程图、架构图、甘特图等）是一件技术含量没有特别高但是却相当繁琐的事情。 而DeepSeek等大模型正好可以帮我们做这件事。
画流程图一般两种场景，
• 一种是掌握大概的需求，然后用流程图来明确流程设计 • 一种是有明确的流程和设计，用图表可视化来让人更快速理解
通过提问来生成图表
现在来看下怎么用简单题让来让 DeepSeek 帮我们设计图标和流程图。
我们拿大模型的训练过程举例，让DeepSeek来画一下 LLM 的训练过程。
我们把里面的代码拷贝到 https://mermaid.live/edit[1] 网站的左侧输入框，右侧就是自动展示流程图。
大家可以前往 https://mermaid.js.org/[2] 了解 mermaid 更多的信息。
如果流程图我们不满意，还可以进行调整，比如让AI从技术的角度来画图：
同样的拷贝代码：
flowchart TD
A[数据准备] --> B[输入层: 数据向量化]
B --> C[隐藏层: 前向传播]
C --> D[激活函数: 非线性变换]
D --> E[输出层: 计算预测值]
E --> F[损失函数: 计算误差]
F --> G[反向传播: 计算梯度]
G --> H[优化器: 更新权重]
H --> I{模型收敛?}
I -- 是 --> J[模型评估]
I -- 否 --> C
J --> K{性能达标?}
K -- 是 --> L[模型部署]
K -- 否 --> M[调整超参数或架构]
M --> C放到 https://mermaid.live/edit[4] 网页上：
可以看到新的流程图。
调整样式
不仅仅是内容，流程图的样式如果不合适，我们也可以让 DeepSeek 来调整。
比如，我觉得上下看着太累了，想要把图给横过来：
同样拷贝代码预览，发现
现在流程图被分成了三个子流程图，并区分了不同颜色：
使用需求设计文档
实际工作中，最终的文档一定是伴随着详细的设计文档的，也就是说从文档到流程图 也是我们最常用的场景。
我们来使用淘宝网订单的流程文档来演示。
我们看到他给出的流程图非常详细，而且由于在同一个对话里面，他还保留之前样式的要求。
其他图表
当然除了流程图 mermaid 还支持很多别的格式的图绘制。
时序图
比如让 DeepSeek 画一个时序图：
状态图
又比如 订单的状态图：
stateDiagram
[*] --> 待支付: 创建订单
待支付 --> 已取消: 用户取消订单
待支付 --> 已支付: 用户完成支付
已支付 --> 已取消: 系统超时未支付
已支付 --> 待发货: 支付成功
待发货 --> 已发货: 卖家发货
已发货 --> 已收货: 用户签收
已收货 --> 已完成: 用户确认收货
已收货 --> 售后中: 用户发起售后
售后中 --> 已退款: 退款成功
售后中 --> 已换货: 换货成功
售后中 --> 已完成: 售后完成
已完成 --> [*]: 订单结束
已取消 --> [*]: 订单结束
已退款 --> [*]: 订单结束
已换货 --> [*]: 订单结束
state 售后中 {
[*] --> 申请售后: 用户发起退换货
申请售后 --> 卖家处理: 卖家审核
卖家处理 --> 已退款: 同意退款
卖家处理 --> 已换货: 同意换货
卖家处理 --> 售后完成: 拒绝售后
}
用户旅程图
又或者是用户旅程图：
甘特图
还有少不了的甘特图：
更多的土类型可以去 Mermaid 文档[6] 上去查看。
手动编辑
最后，如果都图表要求较高，自动生成的不够使用，我们还可以手动对生成的图进行编辑。
使用 Mermaid Editor
最简单的方法就是使用 Mermaid Editor[7] 进行在线编辑。
使用 Draw.io
Draw.io 也支持 Mermaid 图导入编辑。
点击菜单 调整图形 -> 插入 -> 高级 -> Mermaid：
在输入框中输入 AI 生成的 mermaid 代码，点击插入：
这样我们用 DeepSeek 生成的 Mermaid 图表就插入到画布中了，
我们可以使用 draw.io 的功能自由编辑图表内容和样式：
支持的图表类型
Mermaid 支持十余种图表类型，
• 流程图 • • 序列图 • • 类图 • • 架构图 • • • 状态图 • • 实体关系图 • 用户旅程 • • 甘特 • • 饼图 • • Gitgraph （Git） 图 • • C4 图 ?⚠️ • • 思维导图 • • 时间线 • • ZenUML • • 桑基 ? • • XY 图表 ? • • 象限图 ? • • 块图 ? • • Packet图 • • 看板 ? •
