在最近一波 AI 应用里，「AI 帮我画点东西」这件事经常被理解成生成图片、生成插画。但在真实的工程和产品场景中，更有价值的其实是：AI 帮你生成“结构”，而不是像素。
next-ai-draw-io 正是一个围绕这个思路构建的实验性项目。
它并不是要做一个完整的 draw.io 替代品，而是尝试回答一个更具体的问题：
如何把大模型的自然语言理解能力，接入一个可交互的 Web 画图工具？
项目要解决的核心问题
在传统画图工具中，流程通常是这样的：
- 用户手动拖拽节点
- 调整连线、布局
- 反复修改结构
而在这个项目里，顺序被反过来了：
- 用户用自然语言描述想画什么
- AI 将描述转成结构化的图形数据
- 前端根据这些结构，渲染出可编辑的图形
换句话说，AI 不负责“画”，而是负责“理解结构”。
项目整体思路
从工程角度看，next-ai-draw-io 更像是一个 AI Web 应用范式 Demo，而不是单点技术展示。
整个链路可以拆成三层：
1. 输入层：自然语言
用户输入的是普通文本，比如：
“画一个用户登录流程，包括输入账号、校验、成功或失败分支。”
这一步没有任何画图逻辑，只是纯文本。
2. AI 层：文本 → 结构
大模型在这里扮演的角色不是“画师”，而是“结构生成器”。
它的核心任务是把文本转成类似这样的数据：
{
"nodes": [
{ "id": "login", "label": "登录" },
{ "id": "check", "label": "校验账号" }
],
"edges": [
{ "from": "login", "to": "check" }
]
}这一步非常关键：
一旦输出是稳定的结构化数据，后续的一切渲染、交互、编辑，全部可以交给前端来完成。
3. 前端层：结构 → 图形
前端使用 Next.js 构建：
- 接收 AI 返回的数据
- 将节点、边映射成 Canvas / SVG 图形
- 支持继续编辑、调整布局
这里的重点不在“画得多漂亮”，而在于：
如何让 AI 的输出，真正变成一个“可用的 UI 状态”。
技术选型背后的取舍
从代码结构和依赖来看，这个项目有几个明显的取向：
- 使用 Next.js
- 适合快速搭建 AI Web 应用
- API Route 直接作为 AI 调用层
- AI 只做“决策与生成”
- 不参与渲染
- 不耦合具体 UI
- 前端完全掌控交互
- 节点拖拽
- 视觉反馈
- 状态管理
这其实是目前最稳妥的 AI 应用工程分工方式。
这个项目“没有”做什么
理解一个项目，往往也要看它刻意没做什么。
next-ai-draw-io 并没有试图：
- 做完整的图形编辑器
- 覆盖 draw.io 的所有功能
- 追求复杂的布局算法
它更像是一个：
“如果我要做一个 AI 驱动的画图工具，最小可行架构应该长什么样？”
总结
next-ai-draw-io 并不是一个完成度很高的工具，但它清楚地展示了一种 AI 应用工程的正确切入方式：
- AI 负责理解和生成结构
- 前端负责表达和交互
- 两者通过稳定的数据结构解耦
在 AI 应用越来越多的当下，这种思路，可能比某个具体模型更值得关注。
Github：https://github.com/DayuanJiang/next-ai-draw-io
油管：https://youtu.be/XA54uQPcV1o
