别再手动对齐矩形了！这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)

摘要：作为一个天天和架构图打交道的开发者，我受够了在 Draw.io 里把时间浪费在"像素级对齐"和"连线微调"上。今天推荐的这个开源项目 next-ai-draw-io，直接把 Draw.io 和 LLM 缝合在了一起。不仅能一句话生成架构图，还能把你随手画的白板草图直接变成可编辑的专业图表。它是如何做到的？好用吗？如何本地部署？本文带你一探究竟。

引言：那个深夜，我们在与"对齐"较劲

你有没有过这样的经历？

老板让你画一个微服务架构图，核心逻辑其实你脑子里早就有了：一个网关，后面挂三个服务，再连个 Redis 和 MySQL。

但是，当你打开 Draw.io (或者 Visio/ProcessOn) 时，噩梦开始了：

这个矩形是不是比那个宽了 2px？
这条线为什么死活不能变直？
要把整个架构往左移一点，结果选中所有元素一拖，连线全乱了......

原本 10 分钟能想清楚的架构，最后花了 2 个小时在调整 UI 上。作为技术人，我们应该把时间花在设计系统 上，而不是花在排版上。

最近，在 GitHub 上发现了一个名为 next-ai-draw-io 的开源项目，它精准地击中了这个痛点。试用完之后，我只想说：生产力工具的未来，真的来了。

主角登场：Next-AI-Draw-IO 是什么？

简单来说，这是一个 Next.js + AI + Draw.io 的超级缝合怪。

市面上有很多"文字生成流程图"的工具（比如 Mermaid），但它们生成的图往往只读不可改，或者样式非常简陋。

next-ai-draw-io 的杀手锏在于：它生成的是标准的、可编辑的 Draw.io 源文件 (XML)。

这意味着：

你可以改：AI 画完大概，你可以手动微调细节，利用 Draw.io 强大的编辑能力。
不挑模型：它支持 AWS Bedrock, OpenAI, Anthropic (Claude), Google Gemini, Azure OpenAI, Ollama, OpenRouter, DeepSeek 以及 SiliconFlow 等多种 Provider。
完全开源：代码在你手中，私有化部署非常方便，不用担心公司架构图泄露给第三方。

实测：见证奇迹的三个时刻

为了验证它是不是"PPT 骗局"，我进行了三个场景的深度实测，并记录了每次测试的详细过程和结果。

测试环境说明 ：本次测试使用 SiliconFlow (硅基流动) 提供的 API 服务，模型选用 Kimi-K2-Thinking。配置如下：
bash 复制代码
AI_PROVIDER=siliconflow
OPENAI_BASE_URL=https://api.siliconflow.cn/v1
OPENAI_API_KEY=sk-******
AI_MODEL=moonshotai/Kimi-K2-Thinking

时刻 1：一句咒语，平地起高楼 (Text-to-Diagram)

📝 测试案例 A：复杂云架构图

我输入了这样一段 Prompt：

"帮我画一个高可用的 AWS 电商系统架构图。包含 Route53, CloudFront, ALB, 一个 Auto Scaling Group 里包含 3 个 EC2 实例，后端连接 RDS 主从数据库和 ElastiCache。"

⏱️ 生成时间 ：12 秒 📊 生成结果：

🎯 实际效果：

✅ 逻辑正确性：流量路径 Route53 → CloudFront → ALB → EC2 → RDS/ElastiCache 清晰准确。
✅ 布局合理：组件排列有序，没有杂乱的连线。
⚠️ 小瑕疵：默认组件样式较为朴素。

接着，我让它进行精修：

"帮我优化精修这个架构图，AWS 组件使用 AWS 的组件 Logo。"

效果立竿见影：所有组件瞬间替换为官方 AWS 图标，专业度直接拉满。

📝 测试案例 B：微服务架构图

Prompt：

"画一个订单系统的微服务架构：API Gateway 作为入口，后面连接订单服务、库存服务、支付服务、通知服务。服务间通过 Kafka 消息队列解耦，每个服务都有自己的 PostgreSQL 数据库。"

🎯 亮点分析：

✅ 架构理解深刻：自动识别并居中放置 Kafka，体现了"解耦"的核心思想。
✅ 图例自动生成：实线表示同步调用，虚线表示异步消息，细节满分。
✅ 智能图标：API 网关、业务服务、数据库自动区分，视觉层次丰富。

时刻 2：草图复活术 (Image-to-Diagram) 🔥

这是我觉得最炸裂的功能。

📝 测试案例：手绘草图识别

🖼️ 原始草图：

随手画的矩形和菱形，线条歪歪扭扭。
手写文字潦草。
箭头指向随意。

⏱️ 识别 + 转换时间：18 秒

🎯 AI 转换结果：

注意：这边的 AI Model 设置为了 stepfun-ai/step3，该模型支持视觉处理。

时刻 3：你可以永远相信"甲方"的修改意见 (Chat-to-Edit)

AI 生成的图不可能一步到位。这时候，它的对话修改功能就派上用场了。

📝 测试案例：逐步迭代完善架构图

初始图：简单的"用户 → Web 服务器 → 数据库"三层架构。

迭代过程记录：

"在 Web 服务器和数据库之间加一层 Redis 缓存"

✅ 自动插入 Redis 节点，并调整连线布局。

"把数据库改成主从架构，一主两从"

✅ 数据库分裂为一主两从，标注清晰。

"给 Web 服务器加个负载均衡器"

✅ 前置添加 LBs。

"把核心组件（数据库和 Redis）的背景色改成红色，表示关键资产"

✅ 精准识别"核心组件"，颜色修改正确。

"在图的右上角加一个图例，说明颜色含义"

🔥 智能生成图例表格，解释颜色对应关系。

💡 核心价值：

上下文记忆：它清楚记得之前的修改历史。
模糊指令理解：无需精确坐标，只需说"加个XX"，它自己知道该放哪。
智能避让：新增元素时会自动调整周围组件，避免重叠。

🎬 小结：三个时刻的核心价值

功能	传统方式痛点	AI 方案优势	适用场景
Text-to-Diagram	从零开始画，找图标找半天	15 秒生成底稿，90% 工作量消失	快速原型、文档配图
Image-to-Diagram	白板内容无法编辑和版本控制	草图秒变可编辑文件	会议记录、头脑风暴
Chat-to-Edit	每次改动都要手动拖拽调整	自然语言控制，AI 自动排版	迭代优化、客户反馈

技术极客视角：它怎么做到的？

作为技术博主，我们不能只看热闹。深挖一下它的实现原理，你会发现作者在 Prompt Engineering 和 工程化落地 上做了大量精细的工作。

1. 核心架构：Next.js + AI SDK + Draw.io Embed

整个项目的架构非常清晰，典型的 RAG (Retrieval-Augmented Generation) 变体应用：

Frontend : 基于 Next.js 15 (App Router) 构建，使用 react-drawio 组件将 Draw.io 编辑器嵌入页面。
State Management : DiagramContext 是连接 AI 和 Draw.io 的桥梁。它负责监听 Draw.io 的事件（如 XML 变更），并将当前的 XML 状态注入到 AI 的上下文中。
Backend : 使用 Vercel 的 AI SDK (streamText) 统一封装了 OpenAI, Anthropic, Bedrock, DeepSeek 等十几种模型接口。

2. 核心原理：Diagram as Code (XML)

Draw.io 的图表本质上是一段压缩的 XML 字符串 (mxGraphModel)。AI 并不是在"画画"，而是在写代码。

项目的核心在于让 LLM 理解并生成这种特定的 XML 结构。

3. Prompt Engineering 的艺术 (`lib/system-prompts.ts`)

这是整个项目最值钱的部分。作者设计了一套复杂的 System Prompt，教会 LLM：

坐标系统 ：如何计算 mxGeometry 的 x/y 坐标，避免节点重叠。
XML 规范 ：严格限制 mxCell 的层级结构，强制要求 ID 唯一性。
样式定义：预设了 AWS、Azure 等图标库的样式代码，让生成的图表不至于太丑。

4. 独特的工具调用机制 (`Tool Calling`)

为了解决"全量生成太慢"的问题，项目定义了两个核心工具：

display_diagram (全量生成)：
- 用于从零创建新图，或者进行大范围重构。
- AI 会输出完整的 <mxGraphModel>...</mxGraphModel>。
edit_diagram (增量修改)：
- 这是最精彩的设计。
- 当你要求"把红色改成蓝色"时，AI 不会重新生成几千行的 XML。
- 相反，它会生成一个 search 和 replace 的 JSON 对象。
- 前端利用正则匹配，只替换 XML 中变动的那几行。这极大地节省了 Token，并显著降低了延迟。

5. Token 优化的黑科技 (`Context Pruning`)

Draw.io 的 XML 非常啰嗦，一个复杂的图轻松突破 10k Token。如果每次对话都把历史 XML 带上，Context Window 瞬间就会爆满。

在 app/api/chat/route.ts 中，作者实现了一个 replaceHistoricalToolInputs 函数：

在发送给 LLM 之前，强行剔除历史对话中生成的 XML 内容。
只保留当前最新的 XML 作为 Context。
这样，无论对话多少轮，Context 的消耗始终维持在一个可控的范围内。

6. 多模型适配 (`lib/ai-providers.ts`)

项目没有绑定死任何一家模型厂商。它通过一个适配层，统一了不同模型的参数差异：

对于 Anthropic ，它开启了 thinking 模式以增强逻辑能力。
对于 DeepSeek，它适配了 caching 机制。
对于 OpenAI o1/o3 ，它自动调整 reasoning_effort。

如何拥有它？（本地部署指南）

作为一个开源项目，最爽的当然是私有化部署。既省钱，又安全。

作者提供了两种主流的部署方式，你可以根据自己的喜好选择。

方案一：源码部署（适合前端开发者）

如果你想二次开发，或者单纯喜欢折腾代码，可以选择这种方式。

拉取代码：

bash 复制代码

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

安装依赖：
bash 复制代码
```
npm install
```
配置环境变量：复制示例配置文件：
bash 复制代码
```
cp env.example .env.local
```
编辑 .env.local，填入你的 API Key。例如：
env 复制代码
```
AI_PROVIDER=openai
AI_MODEL=gpt-4o
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_API_KEY=sk-xxxxxx
```
启动服务：
bash 复制代码
```
npm run dev
```
打开浏览器访问 http://localhost:3000 即可。

方案二：Docker 部署（最简单，推荐）

如果你不想安装 Node.js 环境，只想快速用起来，Docker 是最好的选择。

确保你已经安装了 Docker，然后执行以下命令：

bash 复制代码

# 一行命令启动 (记得替换你的 API Key)
docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=sk-xxxxxx \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

如果你想配合 Ollama 使用本地模型（完全免费，适合高性能电脑）：

bash 复制代码

# 配合 Ollama 本地运行
docker run -d -p 3000:3000 \
  -e AI_PROVIDER=ollama \
  -e AI_MODEL=llama3 \
  -e OLLAMA_BASE_URL=http://host.docker.internal:11434 \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

(注：本地模型生成 XML 的稳定性不如 GPT-4o，可能需要多试几次)

冷静的思考：优缺点分析

✅ 优点：

极大提升起步速度：从 0 到 1 的过程被压缩到了几秒钟。
交互体验极佳：基于 Next.js 的 UI 响应非常快，拖拽手感原生。
版本控制 (History)：AI 改乱了？没事，它内置了版本历史，随时回滚。

❌ 局限性：

复杂逻辑易"幻觉"：当节点超过 20+ 时，AI 有时会把线连错，或者重叠在一起。
Token 消耗大：如果你用 GPT-4o 画超大图，Token 费用在燃烧。
非设计师：它生成的图偏"工程师审美"，整齐但不够酷炫。

结语：未来的绘图方式

next-ai-draw-io 并不是要取代架构师。相反，它让我们从繁琐的绘图劳动中解脱出来，回归架构设计的本质。

在这个 AI 辅助编程 (Copilot) 已经普及的时代，AI 辅助绘图 必然是下一个爆发点。

如果你也受够了在那对齐像素，不妨试试这个项目。哪怕只是用它来生成一个底稿，也能让你的摸鱼时间多出半小时。😉

🔗 项目地址 ：github.com/DayuanJiang...

如果你觉得这篇文章对你有帮助，欢迎点赞、转发，并在评论区告诉我：你平时最头疼画哪种图？

别再手动对齐矩形了！这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)

引言：那个深夜，我们在与"对齐"较劲

主角登场：Next-AI-Draw-IO 是什么？

实测：见证奇迹的三个时刻

时刻 1：一句咒语，平地起高楼 (Text-to-Diagram)

时刻 2：草图复活术 (Image-to-Diagram) 🔥

时刻 3：你可以永远相信"甲方"的修改意见 (Chat-to-Edit)

技术极客视角：它怎么做到的？

1. 核心架构：Next.js + AI SDK + Draw.io Embed

2. 核心原理：Diagram as Code (XML)

3. Prompt Engineering 的艺术 (lib/system-prompts.ts)

4. 独特的工具调用机制 (Tool Calling)

5. Token 优化的黑科技 (Context Pruning)

6. 多模型适配 (lib/ai-providers.ts)

如何拥有它？（本地部署指南）

方案一：源码部署（适合前端开发者）

方案二：Docker 部署（最简单，推荐）

冷静的思考：优缺点分析

结语：未来的绘图方式

3. Prompt Engineering 的艺术 (`lib/system-prompts.ts`)

4. 独特的工具调用机制 (`Tool Calling`)

5. Token 优化的黑科技 (`Context Pruning`)

6. 多模型适配 (`lib/ai-providers.ts`)