引言

在日常工作和开发中，绘制架构图、流程图等可视化图表往往需要耗费大量时间，尤其是对非专业设计人员而言，想要快速做出规范、美观的图表更是难上加难。而Next AI Draw.io的出现，彻底改变了这一现状——这款基于Next.js开发的Web应用，将大语言模型（LLM）与draw.io绘图工具深度融合，让用户仅凭自然语言指令，就能快速生成、修改各类专业图表，从云架构图到趣味手绘，覆盖场景丰富，极大降低了可视化绘图的门槛。

项目核心介绍

Next AI Draw.io是一款以AI为核心的绘图工具，底层基于Next.js（16.x）和React（19.x）构建，遵循Apache 2.0开源协议。它的核心定位是“自然语言驱动的可视化绘图平台”，用户无需掌握复杂的绘图操作，只需输入文字指令（例如“生成带AWS图标的AWS架构图，用户连接到部署在实例上的前端”“画一只可爱的猫咪”），AI就能自动生成对应的draw.io格式图表。

该项目支持在线试用、桌面应用（Windows/macOS/Linux）、Docker部署等多种使用方式，还适配了字节跳动豆包、AWS Bedrock、OpenAI、Anthropic、Google AI等主流AI服务商，甚至支持用户自定义API端点（除AWS Bedrock和OpenRouter外）。无论是生成带动态动画连接器的Transformer架构图，还是GCP/AWS/Azure等云厂商的架构图，或是简单的手绘风格图案，都能轻松实现。

创新点与核心优势

1. LLM深度赋能绘图全流程：区别于传统绘图工具的“手动拖拽”模式，该项目直接将大语言模型与draw.io的XML格式绘图逻辑结合，AI能理解复杂的自然语言指令，精准生成符合要求的图表，还能实时响应指令修改图表，实现“所想即所得”。
2. 多模态输入与增强能力：支持上传图片、PDF、文本文件，AI可识别现有图表内容进行复刻和优化，也能从文档中提取核心信息生成可视化图表，解决了“从无到有”和“从有到优”的双重需求。
3. AI推理过程可视化：针对OpenAI o1/o3、Gemini、Claude等模型，可展示AI生成图表的思考过程，让用户清晰知道图表生成逻辑，便于调试和优化指令。
4. 版本控制与动态可视化：内置图表历史记录功能，可追溯、恢复AI编辑前的所有版本；支持动画连接器，让静态图表具备动态展示效果，提升可视化表达力。
5. 多云架构图表专属支持：针对AWS、GCP、Azure等主流云厂商，内置专属图标库，生成的云架构图符合厂商规范，满足技术人员的专业需求。

技术原理与部署实践

核心技术原理

Next AI Draw.io的核心逻辑是“自然语言→LLM解析→draw.io XML生成→可视化渲染”：

1. 前端通过Next.js搭建交互界面，借助react-drawio组件实现draw.io图表的展示与操作；
2. 利用Vercel AI SDK（ai + @ai-sdk/*）实现多AI服务商的流式响应对接，将用户指令传递给选定的LLM；
3. LLM根据指令生成符合draw.io规范的XML代码（这是draw.io图表的核心存储格式）；
4. 前端解析XML并渲染为可视化图表，同时支持对XML的修改和版本记录。

部署实操

1. 本地部署

# 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
# 安装依赖
npm install
# 复制环境变量模板并配置（需填写AI服务商API密钥等）
cp env.example .env.local
# 启动开发服务器
npm run dev

启动后访问http://localhost:6002即可使用。

2. Vercel一键部署（推荐）

点击Vercel部署按钮，按提示完成仓库克隆和环境变量配置（与本地.env.local一致），即可快速将项目部署到Vercel平台。

3. Docker部署

可参考项目文档中的Docker指南，通过容器化方式快速部署，适配各类服务器环境。

此外，项目还支持部署到腾讯EdgeOne Pages、Cloudflare Workers等平台，满足不同的部署需求。

该项目及相关内容已 AladdinEdu课题广场同步发布，欢迎前往了解更多技术实现与资源。

项目地址：AladdinEdu课题广场