如何零成本打造个人专属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 的配置信息。