📌 项目地址：DayuanJiang/next-ai-draw-io | ⭐ 33,242 颗星 | 🔧 TypeScript | 📜 未标注
这个项目解决了什么问题？
draw.io（现在叫 diagrams.net）是很多人画架构图、流程图的首选工具，但它本质上还是手动拖拽。当你需要快速把一段描述变成可视化图表，或者想根据已有图片、PDF 生成图表时，通常需要重复的复制粘贴操作。
Next AI Draw.io 把大语言模型的能力直接塞进 draw.io 编辑器里。你只需要用自然语言描述需求，AI 就会生成对应的图表；你还可以上传已有的图表截图、PDF 文档，让 AI 自动识别并复现、增强。换句话说，它把“画图”这件事从手动操作变成了“说句话就画好”。
这个项目目前已经有 33,000+ Star，主语言 TypeScript，基于 Next.js 构建，支持多种 AI 模型提供商（OpenAI、Anthropic、Google、字节跳动豆包等）。
怎么用？从在线试用开始
官方提供了一个在线演示站点：next-ai-drawio.jiang.jp。进入后你会看到 draw.io 界面，左侧多了一个聊天窗口。输入提示词即可：
- “Give me a animated connector diagram of transformer’s architecture.”
- “Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion”
- “Generate authentication process using React with AWS. Use Serverless architecture.”
- “Draw a cute cat for me.”
AI 会返回一个 draw.io 格式的图表，并直接在编辑器中打开。更强大的功能是 上传图片或 PDF：把现有的架构图截图拖进去，AI 就能复刻出一个可编辑的 draw.io 版本。
如果你想本地跑起来，可以：
git clone https://github.com/DayuanJiang/next-ai-draw-io.git
cd next-ai-draw-io
npm install
npm run dev
启动后，需要配置一个 AI 模型的 API Key（例如 OpenAI 的 key），项目支持 .env.local 文件或管理面板中设置。默认使用哪个模型可以在配置中指定。
高级玩法：MCP Server 和 Claude Code CLI
这个项目还提供了一个 MCP Server，让 Claude Desktop 或 Claude Code CLI 能直接调用它来生成图表。这对于习惯用 CLI 开发或使用 Claude 做编码助手的人来说是个很自然的扩展。
MCP 配置示例（claude_desktop_config.json）：
{
"mcpServers": {
"next-ai-draw-io": {
"command": "npx",
"args": ["-y", "@dayuanjiang/next-ai-draw-io-mcp"]
}
}
}
配置好后，你可以在 Claude 里直接说：“画一个 VPC 网络架构图”，Claude 就会通过 MCP Server 自动生成 draw.io 文件并返回。
部署与自建
项目可以部署到各种平台：
- Vercel：一键部署，推荐。
- Cloudflare Workers：通过 Edge 函数运行。
- EdgeOne Pages：腾讯云提供的边缘部署方案。
部署后你需要配置环境变量来指定 AI 模型的 API Key。项目还支持 服务器端多模型配置，通过管理面板可以切换不同提供商和模型，方便团队或自建服务时灵活使用。
需要注意的（许可证、API费用、模型限制）
- 许可证：Apache-2.0，可以商用。
- API 费用：项目本身免费，但调用 AI 模型需要你自己提供 API Key，会消耗对应平台的费用（比如 OpenAI 的 token 计费）。演示站点使用了字节跳动豆包赞助的模型（glm-4.7），但部署自己的实例需要你自己的 Key。
- 局限性：生成的图表质量高度依赖底层模型的绘画能力。对于复杂布局或非标准形状，可能需要手动微调。不过官方给出了许多示例（从 Transformer 架构到猫的素描），说明能力已经相当可用。
- 安全性：上传的 PDF/图片会发送到 AI 模型提供商，注意不要上传敏感数据。
总体来说，这是一个“把画图门槛降到打字”的实用工具。如果你日常频繁使用 draw.io 做技术图，或者希望自动化图表生成流程，值得一试。