### [Next AI Draw.io：用自然语言一句话生成 draw.io 架构图的 AI 绘图神器](https://www.willai.cc/article/3775)

**Published:** 2026-07-13T18:03:05

**Author:** hiyoho

**Excerpt:** 还在为画架构图、流程图熬夜对峙 draw.io？Next AI Draw.io 让你用一句话描述需求，AI 就直接生成、修改并渲染出标准的 draw.io 图表——支持 RAG 架构、云架构（AWS/Azure/GCP）、认证流程、甚至”会

还在为画架构图、流程图熬夜对峙 draw.io？**Next AI Draw.io** 让你用一句话描述需求，AI 就直接生成、修改并渲染出标准的 draw.io 图表——支持 RAG 架构、云架构（AWS/Azure/GCP）、认证流程、甚至”会动的” Transformer 连接线。

## 📌 项目简介

Next AI Draw.io 是一个基于 Next.js 的开源 Web 应用，把大语言模型（LLM）与 draw.io 深度结合，让你通过自然语言命令创建、修改和增强专业图表——”Chat, Draw, Visualize” 三者合一。

## 🖼️ 效果一览（原项目示例）

下面是项目 README 中的真实生成效果，输入只是几句提示词：

![RAG 架构图示例](https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/rag_prod.svg)

提示词：为聊天应用生成 RAG 架构图，数据入采用连通图

![React + AWS 认证架构图](https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/auth.svg)

提示词：用 React + AWS（Serverless）生成认证流程

![Transformer 架构动画连线](https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/animated_connectors.svg)

提示词：用动画连线展示 Transformer 架构

## ⚙️ 安装要求与过程

### 环境要求

-   **Node.js** 18+（项目基于 Next.js 16.x / React 19.x）
-   **包管理器**：npm（或 pnpm/yarn）
-   **大模型 API Key**：默认走 AWS Bedrock，也支持 OpenAI / Anthropic / Google / DeepSeek / Ollama 等 15+ .provider；可自带 Key，也可由管理员配置服务端模型
-   推荐模型：Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1（需强长文本+严格格式能力来生成 draw.io XML）

### 快速安装（本地开发）

```
# 1. 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# 2. 安装依赖并配置环境变量
npm install
cp env.example .env.local

# 3. 启动开发服务器
npm run dev

# 4. 浏览器打开 http://localhost:6002
```

不想装？直接访问官方在线 Demo [next-ai-drawio.jiang.jp](https://next-ai-drawio.jiang.jp/)，或下载 Windows / macOS / Linux 桌面端（Releases 页），也能一键部署到 EdgeOne Pages / Vercel / Cloudflare Workers。

## ✨ 核心功能

-   **自然语言生成与编辑**：用中文/英文命令直接创建、修改 draw.io 图表，AI 输出标准 XML 并实时渲染。
-   **图片 / PDF / 文本复用**：上传已有草图、截图、PDF 或文档，AI 自动”仿绘+增强”成规范图表。
-   **云架构图专精**：内置 AWS、Azure、GCP 等云厂商图标，生成云原生/Serverless 架构图尤其拿手（Claude 系列对云图标训练充分）。
-   **AI 推理过程可见 + 版本历史**：可查看模型思考链路，并对每次编辑前的版本做版本控制、随时回滚。
-   **动画连线 & MCP 服务**：支持”会动”的连接线提升表达力；并提供 MCP Server，让 Claude Desktop / Cursor / VS Code 等 Agent 也能调用它画图。

## 🎯 典型使用场景

1.  **技术方案评审 & 架构设计**：架构师口述”用 React + AWS 做认证流程”，秒出 Serverless 架构图，评审会直接拿去讨论，省去手拖元件的半天。
2.  **知识沉淀与教学**：把 Henry Chesbrough 开放式创新模型、RAG 数据流等抽象概念，用一句提示词变成可读可视化的示意图，写文档、做 PPT 事半功倍。
3.  **AI Agent 自动化出图**：在 Claude Code / Cursor 里装好 MCP，让编码 Agent 边写代码边自动产出”用户登录 + MFA + 会话管理”流程图，图直接实时出现在浏览器。

## 💡 推荐理由

我自己最吃它的”零摩擦”：打开网页、打一句话，图就出来了——对不擅长画图、或只想快点把脑子里的结构固定下来的人太友好了。它不像某些”AI 画图”只给不可编辑的图片，Next AI Draw.io 产出的是标准 draw.io XML，**可继续在 draw.io 里精修**，这点对工程场景很重要。多 Provider 支持 + 可自带 Key + 服务端模型配置，部署灵活；搭配 MCP 还能塞进 Agent 工作流。缺点是要出高质量云架构图对模型有要求（建议 Claude/GPT-5/Gemini 档位），弱模型偶尔 XML 会错位。总体 33K+ Star、Apache-2.0 协议，值得一试。

## 📥 下载地址

-   **官方网站 / 在线 Demo**：[https://next-ai-drawio.jiang.jp/](https://next-ai-drawio.jiang.jp/)
-   **GitHub 仓库**：[https://github.com/DayuanJiang/next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)（⭐ 33.5K+，Apache-2.0，TypeScript）
-   **桌面端 / 一键部署**：Releases 页下载，或一键部署到 EdgeOne Pages / Vercel / Cloudflare Workers

**Tags:** AI, AI开源项目, LLM, MCP, Next.js, React, TypeScript, 可视化, 开源, 数据可视化

**Categories:** 开源项目

---