[JS/TS] 不花一分钱，用Draw.io和AI免费搭建你的专属绘图工具

作为一名技术博主，每次撰写文章时，最耗时费力的环节之一就是绘制那些清晰、专业的架构图和流程图。过去，我都是手动在 Draw.io 里一点点拖拽、对齐，才能得到一张还算满意的图。

比如这样解释数据库分库分表的示意图：

或者描述 TCP 三次握手与服务器连接队列的流程图：

以及分布式系统中常用的一致性哈希环原理图：

画图占据了大量时间，而随着 AI 能力的飞速发展，我一直在想：能否让 AI 理解我的描述，直接生成可编辑的 Draw.io 图表？这样我只需专注于逻辑构思，将繁琐的绘图工作交给机器。

在一次偶然的机会中，我在 GitHub 上发现了 next-ai-draw-io 这个开源项目。它完美地结合了我喜爱的 Draw.io 风格与强大的 AI 生成能力。试用之后，感觉过去的自己简直在“徒手造轮子”。

什么是 next-ai-draw-io？

它是一个基于 Next.js 构建的纯前端应用，核心功能是通过自然语言描述（Prompt）快速生成流程图、架构图、思维导图等。最吸引人的是，它生成的并非静态图片，而是可以直接在集成的 Draw.io 编辑器中进行二次编辑和微调的图表文件，这对需要精确调整的技术文档撰写者来说至关重要。

项目支持市面上主流的 AI 模型提供商，如 OpenAI、DeepSeek、Anthropic 等，配置灵活。下图是其生成复杂技术图表（如 Transformer 架构）的能力展示：

如何快速上手？

1. 本地配置与运行

获取项目源码后，配置非常简单，主要就是设置你希望使用的 AI 模型。

首先，克隆项目并安装依赖：

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install

接着，复制环境变量示例文件并根据你的 AI 服务商进行配置：

cp env.example .env.local

你需要编辑 .env.local 文件，设置如 API 密钥、模型名称等。下图展示了配置文件的核心部分：

配置完成后，启动开发服务器：

npm run dev

应用将在 http://localhost:3000 启动。首次访问时，可以在界面中检查和修改 AI 模型配置。

2. 使用 Docker 运行

如果你更喜欢容器化部署，项目也提供了 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

3. MCP 服务器集成

项目还提供了 MCP (Model Context Protocol) 服务器，这意味着你可以将其配置到 Claude Desktop、Cursor 等支持 MCP 的 AI 助手或 IDE 中。之后，你可以直接在这些工具内让 AI 调用绘图服务生成图表，而不仅仅是得到一段需要额外渲染的 Mermaid 代码。

配置示例（如在 Claude Desktop 的 claude_desktop_config.json 中）：

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

零成本部署到线上 (Vercel)

本地运行虽好，但一个随时可访问的在线版本更方便。得益于该项目基于 Next.js 构建，我们可以利用 Vercel 的平台为其提供免费的托管服务，真正做到服务器零成本。

部署步骤

第一步：准备代码仓库

1. 将原项目 Fork 到你自己的 GitHub 账户下。
2. 在 Fork 出的仓库中，你可以按需修改 .env.example 中的默认配置，或者后续在 Vercel 中设置。

第二步：在 Vercel 中导入并部署

1. 访问 Vercel 新建项目页面，使用 GitHub 账号登录。
2. 点击 “Import Git Repository”，选择你 Fork 的 next-ai-draw-io 仓库。
   
3. 在配置页面，确保团队计划为 “Hobby”（这是免费套餐）。项目名称、框架预设（Next.js）等通常会自动识别，无需更改。
   
4. 关键的一步：在 “Environment Variables” 区域，添加你的 AI 配置。例如，如果你使用 DeepSeek，需要添加以下变量：

   AI_PROVIDER=deepseek
   AI_MODEL=deepseek-chat
   DEEPSEEK_API_KEY=sk-your_actual_key_here
   DEEPSEEK_BASE_URL=https://api.deepseek.com

5. 点击 “Deploy”。Vercel 将自动构建并部署你的应用，整个过程大约需要1-2分钟。

部署成功后，你会获得一个 xxx.vercel.app 的免费域名，可以直接访问你的 AI 绘图工具了。

第三步：绑定自定义域名（可选）
如果你有自己的域名，可以将其指向 Vercel。Vercel 的 IP 地址是 76.76.21.21。更简单的方式是直接在已部署项目的 Settings -> Domains 中添加你的域名，Vercel 会提供详细的 DNS 配置指引。

完成以上步骤，你就拥有了一个完全免费、功能完整的在线 AI 绘图工具。下图是使用该工具生成的 MySQL 集群架构图示例，在手机端访问效果同样不错：

使用体验与总结

经过一段时间的实际使用，这个工具彻底改变了我制作技术图表的方式：

• 效率大幅提升：过去需要半小时手动拖拽的复杂架构图，现在由 AI 生成底稿，我只需进行局部调整和优化，节省了大量重复劳动。
• 辅助查漏补缺：在描述复杂流程时，AI 生成的图表有时能提示我忽略的环节，起到了很好的辅助构思作用。
• 保持编辑灵活性：生成的是标准 .drawio 文件，可以在任何兼容 Draw.io 的环境中打开和深度编辑，保证了成果的最终控制权。

当然，它也有其局限性：

• 审美较为固定：AI 生成的初始配色和布局风格比较单一，需要通过更详细的 Prompt 来引导，或者生成后进行手动美化。
• 复杂逻辑可能错位：对于极其庞大的系统架构图，图中的连接线有时会出现逻辑错乱或交叉过多的情况，仍需人工干预调整。

总而言之，next-ai-draw-io 是一个评分可达 80 分 的高效辅助工具。特别对于需要频繁产出技术文档、设计架构图的开发者、架构师和技术写作者而言，它能将你从繁琐的绘图工作中解放出来，让你更专注于逻辑和内容本身。结合 Vercel 的免费部署方案，几乎是零门槛获得一个私人定制的 AI 绘图助手。

如果你对这款工具感兴趣，不妨动手尝试部署一个属于自己的版本。技术实践的魅力就在于探索和创造，更多有趣的开发工具和部署技巧，欢迎在 云栈社区 交流分享。