如何零成本打造个人专属AI绘图工具，告别手绘架构图？

大家好，我是小富～ 这期我带大家无成本搭建一个超强的 AI 画图工具，没错就是无成本！ 老粉丝都知道，我以前的文章中会出现很多还算精美的插图，这些图片大部分都是我用 draw.io 一点点抠出来的。 比如这样的分库分表示意图 TCP的三次握手的流程图 还有这样的一致性hash原理图 现在AI越来越牛X，写文章都可以用AI来辅助，可是画图这事儿，还是得手动绘制。有时候为了画一个逻辑严密的架构图，画图可能就占了写文章一半以上的时间！ 我个人还是比较喜欢 draw.io 那种清爽、专业的风格，但现在我用的 drawio 版本 AI 也使不上劲。所以我就在想，有没有一个AI + drawio 的结合体？我说需求，它出图，而且还能支持二次编辑？ 在我摸鱼时候，居然让我在Github 扒到了 next-ai-draw-io 这个开源项目。 试用了一下，只能说，以前我那都是过的什么日子，显得好呆啊！ 废话不多说搞起，重点是不仅要用起来，还要无成本部署到线上。 next-ai-draw-io 他是个纯前端的基于 Next.js 和 AI 模型的项目，使用非常简单，就像你使用其他的AI工具一样，编写 prompt 就能快速把文字描述，变成简约美观的流程图、序列图、思维导图。 而且生成的不是一张死图，是可以二次编辑微调的，这对程序员和架构师来说太重要了。 多模型支持也还算全吧，市面上常用的OpenAI、deepseek 基础都支持了。 现在很多技术文章里的图很多也是AI做的，所以我越来越觉得，单纯的写技术文章价值越来越低了，必须要弄一些AI也给不出你满意结果的东西。 上手使用 改配置 next-ai-draw-io 项目源码下载以后，只需要做一件事，复制文件 env.example 内容新建一个 .env.local 文件，主要是设置默认的大模型。 编译启动 直接编译启动就行了 git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local npm run dev 更简单的可以直接 docker 启动，参数上设置要用的模型类型 docker run -d -p 3000:3000 \ -e AI_PROVIDER=openai \ -e AI_MODEL=gpt-4o \ -e OPENAI_API_KEY=your_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest 或者用一个环境文件 cp env.example .env docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest 直接页面访问 http://localhost:3000 ，打开能看到了，可以选择修改模型配置。 我试了下手机上用效果也还行 MCP 它还提供了 MCP 服务，可以在大模型里直接配置调用，要不你让大模型给你画图，它只能提供 mermaid 格式，渲染不直观改起还来麻烦。 { "mcpServers": { "drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] } } } Vercel 免费部署 官方推荐 Docker 部署，但还得买服务器，那不是我的风格。因为这是个 Next 项目，而 Vercel 它支持 Next 个人开发者免费托管部署，一分钱不花，服务器都不用买。 部署流程也非常简单，几步就搞定。 导入项目 首先将 next-ai-draw-io Fork到你自己的GitHub里，GitHub地址：https://github.com/DayuanJiang/next-ai-draw-io 登录 Vercel 官网 https://vercel.com/new，用 GitHub 登录并导入刚刚你 Fork 的 next-ai-draw-io 项目。 配置环境变量，这里一定是 Hobby，只有个人开发者是免费的。 如果你不想在项目代码中设置密钥，可以在 Environment Variables 区域，需要填入 AI 的配置信息。比如用 deepseek 那就配置如下就行 AI_PROVIDER=deepseek # 用哪个服务商 AI_MODEL=deepseek-chat # 用哪个模型 DEEPSEEK_API_KEY=sk-22222 # 密钥 DEEPSEEK_BASE_URL=https://api.deepseek.com 填好后，直接点击 Deploy。大概等待 1-2 分钟，Vercel 提供了 xxx.vercel.app 格式的域名，可以直接访问。 自定义域名 如果你自己有域名也可以直接指向过来，Vercel 的地址是 76.76.21.21，然后在已经部署的项目上 setting -> domain -> add domain 就可以了，直接傻瓜式操作。 这是我自己搭建的地址：https://drawio.xiaofucode.com/zh，感兴趣可以玩一下，好好用没有多少钱的！ 总结 以前手搓一个复杂的业务架构图，光是拖拽对齐就要半小时。现在底稿由 AI 生成，我只需要修修补补确实快了很多。有时候脑子卡壳，不知道流程哪里漏了，能帮我查漏补缺。 缺点就是审美一般，AI 直接生成的配色和布局比较直男，所以prompt 多给他提要求就好了。复杂逻辑不够准，特别复杂的超大系统图，连线会乱飞，还是要人调整的。 总的来说，这是一个 80 分的辅助工具，对于我这种写文章、写文档的人来说，绝对是神器，可以省掉很多重复劳动。 PS：这里送题主和大家一份计算机书籍资源包，基本上是我这些年学习和工作中看过的书籍，本身我是做后端的，像Java、数据结构、操作系统、JVM、SQL调优、面试题、职业规划看的会多花一些），点击下边链接直接获取：