AI时代,还在古法画流程图?大人时代变了! AI生成高颜值流程图保姆级教程!

AI时代,还在古法画流程图?大人时代变了! AI生成高颜值流程图保姆级教程!

大家好,我是卡卡罗特,持续分享AI实用干货~

在互联网公司里,不管你是程序员,还是产品经理,工作中都很难逃开一件事,画图

  • 需求评审的时候要画。
  • 技术方案的时候要画。

但是画图的过程中,最麻烦的不是整理流程,而是在那拖框,连线,调位置,改字体,改箭头,浪费了大量的时间。

以我为例,工作中而且最常见的,一般就是那三种图。

  • **流程图:**整理业务流程

  • 时序图:一般用于各个系统交互流程

  • 架构图:系统中各个功能,业务分层

以前徒手画图,基本都绕不开ProcessOndraw.ioExcalidraw这些平台。

其中我用的最多的是ProcessOn这个平台,画图非常方便,里面也内置了大量的模版,非常容易上手。

但是,是收费的,我已经连续5年付费了!(哭) 有图为证:

现在有了AI后,会员过期后,我没付费了,因为AI画图已经非常方便了。

**题外话:**相信不止我,在AI时代,这种 Sass 软件公司未来会越来越难。因为一个程序员借助AI短时间也可以开发个功能70%+的平台了。

draw.io免费,但是画出的图挺丑的,也没有processOn好用,我基本不用,我看很多同事,尤其是产品经理喜欢用。应该是看着它免费的特点(还要什么自行车!)

Excalidraw 这个画图网站,可能很多朋友不知道。 网址是:https://excalidraw.com

这个网站可以做出很多好看的手绘图颜值非常高,也内置了很多手绘风格的素材,像下面这个用户注册流程图一样:

但是,无论是上面3个平台,说到底,以前还是需要动手。(不过ProcesssOn现在也有了AI绘图功能,感兴趣可以了解,需要会员才能用

但是有了AI后,画图这件事已经变了。

现在有了 AI,像流程图,时序图,这种可以直接自然语言 “Vibe” 出来。

当然架构图也可以,这个比较复杂,结尾说。

不会吧,不会吧,不会有人还在古法画图吧。大人,时代变了!

其实用AI生图有2中方法,第一种是借助MermaidPlantUML这种画图语法。

这两个都能画。

但如果你问我更推荐哪个,我还是会更偏向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 CodeCodexCursor这种 AI Agent,也是可以的。

如果你使用VsCode,Cursor或者IDEA都行、但是需要装个插件

下面是在IDEA软件中安装,在VSCode中也是一样的。

装了插件后,IDEA就会识别mmd的格式文件(插件刚装需要重启)。

直接在IDEA软件里面预览,样式有点丑,如果需要转为图片还是要拷贝源码到刚那个解析网站转成图片。

当然你写个脚本代码将文件转成图片也可以,但我觉得不会那么好看

进阶-真Vibe做图

刚我们说https://excalidraw.com

**这网站生成的的手绘流程图很好看,怎么借助AI生成呢?**🤔


**买会员!充钱就能用。**😄

实际上这个网站是一个开源项目,在github上搜索得到,仓库地址如下:https://github.com/excalidraw/excalidraw

点赞已经来到了惊人的120k+了🐮

那么问题来了?**怎么让AI直接一把梭生成手绘风格的图呢?**🤔

改源码!让Claude CodeCodex帮你加上这个功能😄,然后配置你自己的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 让画图变简单了。

但也正因为它变简单了,人身上那些更底层的能力,反而一下子变得更重要了。

因为工具会越来越便宜,越来越好用,越来越像水和电。

可一个人怎么理解问题,怎么整理信息,怎么把复杂的事说明白,这块反而会越来越值钱。