AI画图革命:停用5年ProcessOn会员,免费工具一键生成流程图、时序图、架构图
在互联网行业,无论是程序员还是产品经理,工作中几乎离不开画图。
- 需求评审时需要画图。
- 技术方案设计也离不开图。
画图最耗时的往往不是梳理逻辑,而是拖拽图形、连线、调整位置、修改字体和箭头样式,这些机械操作浪费了大量时间。
以实际工作为例,最常用的图无非三种:
流程图:用于梳理业务流程

时序图:展示各系统间的交互顺序

架构图:体现系统功能模块与分层关系

过去纯手工绘图,很难绕开 ProcessOn、draw.io、Excalidraw 这类平台。
我最常用的是 ProcessOn,它上手快,内置大量模板,画图体验很流畅。但它是收费的,我连续付费5年!(真心疼)

现在有了 AI,会员到期后我没有再续费,因为 AI 画图已经足够方便了。
个人看法:不只是我,在 AI 时代,传统的 SaaS 工具公司会面临更大挑战。一个程序员借助 AI 能在很短时间内开发出具备70%以上功能的替代平台。
draw.io 虽然免费,但成品的美观程度一般,界面也没有 ProcessOn 顺手,我几乎不用,不过很多同事(尤其产品经理)喜欢用,大概是看中它完全免费——还要什么自行车呢!

Excalidraw(网址:https://excalidraw.com)可能有些朋友还不太了解。
这个网站能做出非常好看的手绘风格图示,颜值很高,内置了丰富的手绘素材。比如下面这张用户注册流程图,就是典型的手绘效果:

然而,无论是上面哪一个平台,本质上仍需要手动绘制。(尽管 ProcessOn 现在也提供了 AI 绘图功能,但需要会员才能使用。)
进入 AI 时代,画图这件事已经彻底变了。
如今,像流程图、时序图这类图表,完全可以用自然语言“Vibe”出来。架构图虽然复杂一些,也同样可行(文章末尾会讲到)。
还在手工一点一点拖拽绘图吗?时代真的不同了!

AI 生成图像的两种方式
借助 AI 生成图表,主要有两种方法。其一是利用 Mermaid 和 PlantUML 这类基于文本的绘图语法。
两者都能用,但如果让我推荐,我更偏向 Mermaid。原因很简单,它对 AI 更加友好。
而且主流的 AI 对话工具,如 DeepSeek、元宝、豆包、ChatGPT 等,内部集成的就是 Mermaid 语法。
快速生成流程图
例如,你可以直接对豆包说出需求:

直接下载得到的流程图效果如下:

查看源码,它就是标准的 Mermaid 语法:
flowchart LR
A[开始] --> B[用户打开注册页面]
B --> C[输入手机号/邮箱]
C --> D[获取验证码]
D --> E[输入验证码]
E --> F[设置登录密码]
F --> G[同意用户协议&隐私政策]
G --> H{点击注册}
H -->|验证失败| I[提示错误信息]
I --> C
H -->|验证成功| J[创建用户账号]
J --> K[注册成功]
K --> L[跳转到登录页]
L --> M[结束]
这张图是从左到右的排布,如果看起来不习惯,可以要求改成自上而下的方向,直接对话就行。

修改后你会得到一张垂直方向的流程图,本质上是调整了 Mermaid 语法。

流程图美化
默认生成的流程图颜色单一,看起来比较朴素,你可以让 AI 帮忙美化。
| 美化前 | 美化后 |
|---|---|
![]() | ![]() |
美化的原理是 Mermaid 支持内联 CSS 样式,打开源码可以看到样式定义。

手绘风格
如果对 AI 美化后的效果还不够满意,可以借助这个网站:https://mermaid.live/edit ,将 Mermaid 图表转换为手绘风格,颜值会进一步提升。

转换后效果就很不错了 🤔

时序图
时序图的生成方式同样简单。你可以在豆包或 DeepSeek 中输入:“使用 Mermaid 语法帮我画个登录流程的时序图”。
或者,也可以让 AI 把已有的流程图直接转为时序图。

美化操作与流程图一致:

效果怎么样?🤔

AI 生成的流程图有问题,怎么修改?
刚才我完全让 AI 直接生成登录流程,但你的实际流程很可能不一样。
修改方法有两种:
- 通过对话调整:直接告诉 AI 哪里需要改,逐步完善成你的流程。
- 直接修改 Mermaid 代码:Mermaid 语法很简单,对照着例子改就行。

改好代码后,再扔到 https://mermaid.live/edit 这个网站下载成图片即可。如果想系统学习语法,也有官方文档:https://mermaid.nodejs.cn/syntax/flowchart.html

在 AI Coding 工具中生成
如果你日常已经在使用 Claude Code、Codex、Cursor 这类 AI Agent,也可以在编码环境中直接生成图表。
无论用 VS Code、Cursor 还是 IntelliJ IDEA,都需要安装一个 Mermaid 预览插件。

安装后(部分工具需重启),IDE 能够识别 .mmd 格式的文件并进行实时预览。

不过 IDE 内置的样式比较基础,需要转换图片时,还是将源码拷贝到 mermaid.live 网站导出,效果更好。
当然,你也可以写个脚本自动将文件转为图片,但美观度大概率不如网站导出。
进阶:纯文字“Vibe”生成手绘风格图
前面提到过 https://excalidraw.com ,它生成的手绘流程图非常漂亮,那怎么借助 AI 来生成呢?

买会员?充钱就可以用 😄

实际上,Excalidraw 是一个开源项目,GitHub 仓库地址:https://github.com/excalidraw/excalidraw

它已经获得了超过 120k 的点赞 🐮
那问题来了:如何让 AI 直接一把梭生成手绘风格的图?
一个思路是修改源码,利用 Claude Code 或 Codex 为它加上 AI 生成功能,然后配置自己的 API Key。这是一个可行的路径。
更棒的是,已经有人开源了这样的工具。Star 数最高的当属这个仓库:https://github.com/liujuntao123/smart-excalidraw-next

作者还部署了一个在线版本:https://ai-draw-nexus.aizhi.site/ ,可以直接使用。

它支持直接用自然语言生成流程图、思维导图等多种格式,每天每人免费使用 10 次,非常良心。
你也可以配置自己的 API Key;如果担心 Key 泄漏,可以自行部署,并配置 kimi 等模型的 Key。

试一下,让 AI 画一个登录的时序图:
| 输入需求 | 生成结果 |
|---|---|
![]() | ![]() |
如果不满意,还可以继续手动修改,或让 AI 进一步调整。所有生成过的图都会保存在“项目管理”中。

如何生成复杂的架构图?

最快的方法是:直接把上面这张图片复制粘贴过去,让 AI 依照它画一张一模一样的,然后再逐步细化调整。
| 粘贴截图 | AI 生成结果 |
|---|---|
![]() | ![]() |
可以看到,生成结果已经和原图十分接近。这需要配置具备视觉识别能力的 AI 模型。
接着在右侧编辑界面做微调,会比从零拖拽轻松很多。如果觉得在线编辑器不够顺手,也可以导出为源文件,然后回到 excalidraw.com 官网继续编辑。

回到官网导入文件:
| 导入步骤 | 编辑界面 |
|---|---|
![]() | ![]() |
是不是一下子顺手多了?
AI 时代,画图正在变成“写字”
我现在越来越强烈地感觉到,在 AI 时代,画图这件事正变得越来越像写字,而不是传统意义上的制图。
真正拉开差距的,已经不是你拖动图形、调整箭头、摆正位置的熟练度。真正重要的,是你的理解能力、信息整理能力和把复杂问题讲清楚的能力。
你理解得越透彻,信息梳理得越干净,表达得越准确,AI 生成的图就越接近你脑海里真正想要的那张图。反之,如果自己都没想清楚,即使模型再强大,它大概也只能产出一张看起来很忙碌实则无用的图。
所以,AI 让画图变简单了。也正因为它变简单了,一个人如何理解问题、如何整理信息、如何把复杂的事情说清楚,这些底层能力反而变得更加珍贵。
工具正在变得越来越便宜,越来越像水电一样触手可及。但一个人怎样认知世界、怎样梳理逻辑、怎样清晰表达,这部分会持续升值。
本文所有截图中的业务系统均为示例,请根据自身情况调整。文中提及的第三方工具并非广告,仅供学习参考。







