无成本搭建 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 分的辅助工具，对于我这种写文章、写文档的人来说，绝对是神器，可以省掉很多重复劳动。