AI时代，还在古法画流程图？大人时代变了! AI生成高颜值流程图保姆级教程！
大家好，我是卡卡罗特，持续分享AI实用干货~
在互联网公司里，不管你是程序员，还是产品经理，工作中都很难逃开一件事，画图。
- 需求评审的时候要画。
- 技术方案的时候要画。
但是画图的过程中，最麻烦的不是整理流程，而是在那拖框，连线，调位置，改字体，改箭头，浪费了大量的时间。
以我为例，工作中而且最常见的，一般就是那三种图。
- **流程图：**整理业务流程
- 时序图：一般用于各个系统交互流程
- 架构图：系统中各个功能，业务分层
以前徒手画图，基本都绕不开ProcessOn、draw.io、Excalidraw这些平台。
其中我用的最多的是ProcessOn这个平台，画图非常方便，里面也内置了大量的模版，非常容易上手。
但是，是收费的，我已经连续5年付费了！（哭） 有图为证：
现在有了AI后，会员过期后，我没付费了，因为AI画图已经非常方便了。
**题外话：**相信不止我，在AI时代，这种 Sass 软件公司未来会越来越难。因为一个程序员借助AI短时间也可以开发个功能70%+的平台了。
、
draw.io免费，但是画出的图挺丑的，也没有processOn好用，我基本不用，我看很多同事，尤其是产品经理喜欢用。应该是看着它免费的特点（还要什么自行车！）
Excalidraw 这个画图网站，可能很多朋友不知道。 网址是：https://excalidraw.com
这个网站可以做出很多好看的手绘图，颜值非常高，也内置了很多手绘风格的素材，像下面这个用户注册流程图一样：
但是，无论是上面3个平台，说到底，以前还是需要动手。（不过ProcesssOn现在也有了AI绘图功能，感兴趣可以了解，需要会员才能用）
但是有了AI后，画图这件事已经变了。
现在有了 AI，像流程图，时序图，这种可以直接自然语言 “Vibe” 出来。
当然架构图也可以，这个比较复杂，结尾说。
不会吧，不会吧，不会有人还在古法画图吧。大人，时代变了！
其实用AI生图有2中方法，第一种是借助Mermaid和PlantUML这种画图语法。
这两个都能画。
但如果你问我更推荐哪个，我还是会更偏向Mermaid。
原因也很简单，它对AI 更友好。
而且主流的AI聊天工具，比如DeepSeek、元宝、豆包、ChatGPT内置就是使用它。
比如，你可以这样跟豆包说：
直接下载的流程图长这样：
点击查看源码，如下，就是 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样式，打开源码可以看到：
手绘风格
如果你还是不满意上面美化后的效果，你可以借助这个网站：https://mermaid.live/edit
将Mermaid 画的图改为**手绘风格**，颜值还是很高的。
这下颜值就高多了🤔
时序图
时序图也是一样的，你在豆包，或者DesspSeek输入：使用 Mermaid 语法帮我画个登入流程的时序图
或者可以让AI帮你把流程图改为时序图就行🤔
美化也是一样的操作：
这颜值可以把？🤔
AI生成的流程图有问题，怎么改？
刚我是直接让AI生成登入流程图的，你的流程大概率不是这样的。
那么怎么改？ 有2种办法：
1、你跟AI对话，改成你的流程。
2、直接根据Marmaid语法改就行了，语法也很简单，照猫画虎改就行。
改完然后再丢到：https://mermaid.live/edit ，刚刚这个网站下载图片就行。
如果你实在想系统学习语法是什么，也有对应的网站：https://mermaid.nodejs.cn/syntax/flowchart.html
在AICoding工具生成
如果你平时就已经在用Claude Code、Codex、Cursor这种 AI Agent，也是可以的。
如果你使用VsCode，Cursor或者IDEA都行、但是需要装个插件。
下面是在IDEA软件中安装，在VSCode中也是一样的。
装了插件后，IDEA就会识别mmd的格式文件（插件刚装需要重启）。
直接在IDEA软件里面预览，样式有点丑，如果需要转为图片还是要拷贝源码到刚那个解析网站转成图片。
当然你写个脚本代码将文件转成图片也可以，但我觉得不会那么好看
进阶-真Vibe做图
刚我们说https://excalidraw.com
**这网站生成的的手绘流程图很好看，怎么借助AI生成呢？**🤔
**买会员！充钱就能用。**😄
实际上这个网站是一个开源项目，在github上搜索得到，仓库地址如下：https://github.com/excalidraw/excalidraw
点赞已经来到了惊人的120k+了🐮
那么问题来了？**怎么让AI直接一把梭生成手绘风格的图呢？**🤔
改源码！让Claude Code、Codex帮你加上这个功能😄，然后配置你自己的apiKey。这是一个路子。
可喜可贺的是，实际上github上已经有人干了，而且开源了，我看了一圈，star数量最高的是这个仓库：https://github.com/liujuntao123/smart-excalidraw-next
作者还部署上线了一个网站：https://ai-draw-nexus.aizhi.site/ 可以直接访问用
并且支持生成3中格式的图，直接自然语言一把梭。
这个网站内置了apiKey，每个人每天可以使用10次。确实够良心的。
你也可以配置自己的key，如果你怕key有泄漏风险，可以自己部署一个，然后可以自己配置kimi…的ApiKey。
下面我们来试一下，让AI帮我们画一个登入的时序图。
如果对生成的图不满意，可以自己再改改，或者让AI帮你改。
之前生成过的图会在项目管理中。
怎么画这种架构图？
**最快的方式是直接把上面这张图片复制粘贴过去，然后让AI帮你画一张一模一样的图，然后再一点一点的改。**😄
可以看到，生成出来的架构图和原图已经非常接近了。这其实就说明，需要配置具有视觉能力的AI模型。
然后你再在右侧编辑界面里慢慢改，就会轻松很多。
如果你觉得在这个网站里编辑不太方便，也没关系。
你可以直接导出原文件，再回到excalidraw.com的官方网站里继续编辑。
回到官网导入。
是不是一下就顺手多了。
所以我现在越来越觉得，AI 时代画图这件事，会越来越像写字，而不是作图。
真正拉开差距的，已经不是你会不会拖框，会不会调箭头，会不会把每个框摆得特别整齐。
更重要的，是理解能力，是信息整理能力，是你能不能把一个问题讲清楚。
你理解得越深，整理得越干净，表达得越准确，AI 生成出来的图，就越接近你脑子里真正想要的那张图。
反过来，如果自己都还没想明白，就算给你一个再强的模型，它大概率也只能给你一张看起来很忙，但其实没那么有用的图。
所以说到底，AI 让画图变简单了。
但也正因为它变简单了，人身上那些更底层的能力，反而一下子变得更重要了。
因为工具会越来越便宜，越来越好用，越来越像水和电。
可一个人怎么理解问题，怎么整理信息，怎么把复杂的事说明白，这块反而会越来越值钱。