从文档到流程图，从编辑到美化， 使用 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图 -
• 
-
• 看板 🔥 -
• 
可以在官网查看 https://mermaid.js.org/intro/[8] 每种类型的说明。
引用链接
[1]: https://mermaid.live/edit[2]:https://mermaid.js.org/[3]:https://mermaid.ink/[4]:https://mermaid.live/edit[5]www.taobao.com）创建一个账号或使用已有的账号登录。如果你还没有账号，点击“免费注册”，填写手机号码、设置密码并完成手机验证。:http://www.taobao.com）创建一个账号或使用已有的账号登录。如果你还没有账号，点击“免费注册”，填写手机号码、设置密码并完成手机验证。[6]Mermaid 文档:https://mermaid.js.org/syntax/quadrantChart.html[7]Mermaid Editor:https://www.mermaidchart.com/[8]: https://mermaid.js.org/intro/
--- END ---