新闻详情

新闻详情

首页 / 资讯中心 / 详情

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

发布时间:2026/6/18 13:40:39
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也是可以的。如果你使用VsCodeCursor或者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 让画图变简单了。但也正因为它变简单了人身上那些更底层的能力反而一下子变得更重要了。因为工具会越来越便宜越来越好用越来越像水和电。可一个人怎么理解问题怎么整理信息怎么把复杂的事说明白这块反而会越来越值钱。
网站建设 高端定制 企业官网