next-ai-draw-io：一句话画出专业架构图，自然语言 draw.io 完整上手指南

next-ai-draw-io：一句话画出专业架构图，自然语言 draw.io 完整上手指南

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io

next-ai-draw-io 是一个基于 Next.js 的自然语言绘图工具：把大语言模型接进 draw.io，不用在编辑器里拖控件，而是在对话框里打一句话，模型生成 draw.io XML 并直接渲染到画布上。改哪里就继续聊哪里，整个过程不需要碰绘图工具本身。

📊 场景速览

三个典型场景，看你能不能对号入座：

• 新画架构图：输入"给聊天应用画一张 RAG 架构图"，出来的是带数据接入、向量库、LLM 组件的完整连线图，AWS / Azure / GCP 官方图标直接可用
• 复刻已有图：上传一张截图或 PDF，让模型把它"翻译"成 draw.io 格式再微调，适合把旧文档里的图片变成可编辑资产
• 改现有图：对画布说"把数据库从 MySQL 换成 PostgreSQL"，它只动相关部分，不会整张图重画

上图是"画一张灯不亮时的故障排查流程图"这一句生成的结果：判断节点、Yes/No 分支、终止状态都齐了。

三步跑起来：部署与模型配置

Docker 是最快的路径：

git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cp env.example .env # 配置提供商与密钥 docker-compose up -d # 访问 http://localhost:3000

compose 文件会同时拉起一个自托管 draw.io 服务，网络受限环境也能完整运行。

.env里真正必填的只有两项：

AI_PROVIDER=openai # bedrock / openai / anthropic / google / deepseek 等 AI_MODEL=gpt-4o # 多个模型用逗号分隔，会生成切换下拉框

启动后还能在/admin面板随时改提供商、模型和访问码（ACCESS_CODE_LIST）；项目也带 Electron 桌面端，支持完全离线使用。

⚙️ 它是怎么把自然语言变成图的

核心不是"模型写代码、前端负责渲染"这么简单，而是两个机制：

1. 用工具调用绘图，而不是在对话里聊天。看 app/api/chat/route.ts，模型拿到一组工具：display_diagram（输出整张新图的 XML）、edit_diagram（对现有 XML 做"查找-替换"补丁）、append_diagram（输出被截断时续写）。小改动不重画整图，而是打几个补丁，既快又不会破坏已有布局。

2. 当前画布是唯一事实来源。系统提示词（lib/system-prompts.ts）明确要求模型以画布当前 XML 为准做判断——因为用户随时可能手动挪形状，模型凭记忆编辑就会对不上。更讲究的一点是：用专业图标前必须先调get_shape_library查语法，图标文档在 docs/shape-libraries/，覆盖 AWS、Kubernetes、Cisco 等 30 多个库，提示词里明令禁止"猜形状名"。

提供商侧由 lib/ai-providers.ts 统一抽象，Bedrock、OpenAI、Anthropic、Gemini、DeepSeek、Ollama 等 20 多家，配置方式一致，切换成本低。官方 demo 站部署在 AWS 上，结构大致如下：EC2 跑服务，Bedrock 出模型，S3 存文件，DynamoDB 管会话与配额：

能力与边界：能做什么，做不好什么

能做的：

• 图片 / PDF 上传转图：截图复刻、PDF 提取文本后成图
• 历史回滚：每次 AI 修改前自动存快照，随时恢复
• MCP 集成：可以作为工具挂进 Claude Desktop、Cursor 等 AI 客户端
• 导出 .drawio / .svg / .png，后续在完整编辑器里继续加工

要留意的：

• 布局由模型自己决定，复杂图可能出现元素重叠、连线穿过形状，需要手动微调
• 大图超过输出 token 上限时依赖append_diagram续写，仍有截断风险
• 没有多用户实时协作，历史记录是单机维度的
• 生成质量直接绑定所用模型，弱模型和强模型体验差距明显

对比与技巧：和 Mermaid 类文本转图有什么区别

一句话对比：Mermaid 类工具只能描述逻辑流程，形状集和样式有限；它输出的是标准 draw.io XML，形状库更全、导出格式更多，且成品可直接拖进专业编辑器继续改。

两个实用小技巧：

• 布局要求写进第一句，比如"从左到右布局，负载均衡、应用、数据库三层"，首图质量会稳定很多
• 改图时点名具体元素。模型用的是查找-替换补丁，模糊指代（"改一下那个框"）容易打偏

适合谁

适合经常要产架构图、流程图的后端和架构师，以及想把一堆图片资产转成可编辑图表的团队。如果你能接受花十分钟手绘一张图，这个工具收益不大；如果一个月要画几十张，值得配一套。

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io