我要投稿

好消息好消息，产品经理解放啦！AI 一键生成序列图、流程图

发布日期：2025-06-14 10:06:49 浏览次数： 1536

作者：野生马文

微信搜一搜，关注“野生马文”

想象一下，以前吭哧瘪肚画半天的流程图、架构图，现在AI“咻”一下，不到3分钟给你整得明明白白，就像这样：

是不是有点东西？这些可都是AI的杰作，而且最骚的是，它们都是“文本生成”的，意味着啥？意味着你可以像改代码一样，随心所欲地二次编辑、精雕细琢，保证出品的图都是“高精尖”水平！

废话不多说，赶紧搬好小板凳，我来带你解锁AI画图的各种风骚姿势！

✍️ 开整！AI画图，装备先行！

既然是AI画图，那不得先挑个称手的“兵器”和给力的“AI小弟”？我寻寻觅觅，在ChatGPT、DeepSeek、Claude、Grok这些“佳丽”中反复横跳，最终还是被 trae 海外版里的 claude-3.7-sonnet (Thinking模式)给迷住了。为啥？俩字：白嫖！效果还贼棒！还要啥自行车啊！

文本作图语言：代码也能开花

我平时在语雀里“码字搬砖”比较多，所以先给大伙儿说道说道语雀里自带的几种文本画图“神器”：PlantUML、Mermaid、Flowchart、Graphviz。

想召唤它们？简单！点击左上角那个绿油油的“+”号，往下滑就能找到：

这几位“大神”各有啥绝活呢？看表！

特性	PlantUML	Mermaid	Flowchart	Graphviz
图形类型	✅✅✅	✅✅	✅	✅✅✅
上手难度	中	低	非常低	高
可定制性	高	中	低	极高
Markdown 集成	一般	原生支持	可接入	支持
适合场景	架构设计	项目文档	简单流程	高定制图

光看文字是不是有点“干”？别急，咱们让AI画个图，比如，咱要画个经典的“聚合支付”流程：

典型的老板一句话，员工跑断腿了。来人，上AI！让它用这四种语言分别给朕画出来！

当当当当~ 成果展示：

PlantUML (时序图版):

感觉这位选手画时序图还是有两把刷子的，交互过程一目了然。

PlantUML (流程图版):

Mermaid:

嗯... Mermaid 同学，你尽力了。

Flowchart:

Flowchart 小哥，如此简约...吗？

Graphviz:

在这四位选手中，我个人比较常用的是：

PlantUML：搞定线性的流程，尤其是用时序图来强调各个角色之间的“眉来眼去”（交互过程）。
Graphviz：对付那些稍微复杂点、九曲十八弯的非纯线性流程，比如下面这种“盘丝洞”

基本上，只要你把文字流程捋顺了，用这些方法让AI画图，那都是分分钟的事儿。咱要做的，就是当个“质检员”，核对核对，再微调下细节。至于样式嘛，萝卜青菜各有所爱，找到你自己的style就好！

⚠️ 注意事项 (老司机经验之谈)

喂饭式教学：让AI生成图的时候，最好先给它看一张你喜欢的“样板图”，让它“照猫画虎”，或者用语言详细描述你想要的风格（比如“我想要那种扁平化、科技蓝、带点渐变的高级感！”），这样出来的图才靠谱。
截图大法好：有个小技巧，直接用截图工具（微信截图、Snipaste啥的都行）截个图，然后直接粘贴到trae 海外版的输入框里，AI就能“看懂”图片内容了！甚至，你还可以在截图上用红框圈出你想要AI重点关注或修改的地方，让它更有针对性地“干活”。比如，上面那张架构图，我觉得技术栈区域下面有点空，就可以这样继续让 AI 。如果对AI写的文案不满意，没关系，咱可以直接编辑SVG文件里的文本内容，手动改成我们想要的。这也是我用AI画图的一个核心原则：AI画的图，必须能让我自己改，保证图中文案的B格和准确性！（当然，这篇文章重点是画图方法，图里的文案我就不细究了，大家意会哈~）

又回到最初的起点 draw.io：自由编辑的终极战场

draw.io (现在也叫 diagrams.net) 这位老朋友，大家应该不陌生吧？它是一款功能强大到令人发指的开源流程图绘制软件，自由度高到飞起！最关键的是，它支持导入XML格式的文件。这意味着啥？意味着我们可以让AI直接生成draw.io能“吃”的XML文本，然后导入到draw.io里进行展示和“魔改”，画图效率直接起飞！

来，上才艺！