首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >AI画图太方便,我把5年ProcessOn会员直接停了…

AI画图太方便,我把5年ProcessOn会员直接停了…

作者头像
卡卡罗特AI
发布2026-09-10 09:30:36
发布2026-09-10 09:30:36
510
举报

大家好,我是卡卡罗特,持续分享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 语法的流程图了。

代码语言:javascript
复制


flowchartLR
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 让画图变简单了。

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

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

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

看到这里,加个关注再走呗~持续分享AI、编程使用技巧~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2026-04-11,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • 流程图美化
  • 手绘风格
  • 时序图
  • AI生成的流程图有问题,怎么改?
  • 在AICoding工具生成
  • 进阶-真Vibe做图
  • 怎么画这种架构图?
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档