Next AI Draw.io 教程：3 步用自然语言画出专业 draw.io 图表

Next AI Draw.io 教程3 步用自然语言画出专业 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-ioNext AI Draw.io 是一款把大语言模型接入 draw.io 的 AI 绘图工具你用一句话描述需求它直接生成可编辑的图表而不是给你一段图片或代码。本文按顺序讲清楚最短的部署路径、它能接手的几类绘图任务以及如何为团队接入多模型。跟完操作部分你大约 3 分钟就能得到一个本地可用的 AI 绘图服务。先跑起来3 分钟 Docker 部署本地实例不想折腾环境的话Docker 是最快的路径。在已安装 Docker 的机器上执行下面这条命令填入你的 API 密钥即可docker run -d -p 3000:3000 \ -e AI_PROVIDERopenai \ -e AI_MODELgpt-4o \ -e OPENAI_API_KEYyour_api_key \ ghcr.io/dayuanjiang/next-ai-draw-io:latest几分钟后打开http://localhost:3000左侧聊天、右侧画布直接输入一句话就能看到图表生成过程。完整的参数说明见 Docker 部署文档无法访问 draw.io 在线服务时可用 离线部署方案。另外两条路径供你选择直接访问项目的在线演示站可以先体验再决定是否自建演示站支持填入自己的密钥或者从 Releases 页面下载桌面应用覆盖 Windows、macOS、Linux 三个平台。想从源码跑的话执行git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local # 填入提供商密钥 npm run dev它能帮你做哪些图一句话生成云架构图这是它被用得最多的场景。输入画一个包含负载均衡、3 台计算实例和数据库的 AWS 高可用架构AI 会输出带云服务官方图标的完整布局节点间的连接关系也是它画好的不需要你手动对齐图里这种User 经 EC2 访问 S3、Bedrock、DynamoDB的结构就是典型的生成结果。如果你只画云架构这一类图Claude 系列模型是相对稳妥的选择它见过的 AWS、Azure、GCP 图标素材更多组件识别更准。把现有文档和图片变成图表手头已有材料时不用从零描述。直接上传 PDF 或文本文件AI 会提取内容整理成图表上传一张截图它也能按原图复现并转成可编辑格式。下面的故障排查流程图就是一句提示生成的生成后每个节点都可以继续微调不会像图片那样只能整体重画。多轮对话精修图表第一次生成的结果不满意很正常。你可以在对话框里继续说把数据库拆成主从两个节点给这条连接线加上标注AI 会在原图基础上修改而不是整图重出。每次修改前都会自动保留一个历史版本改坏了可以回退支持推理的模型还会把思考过程展示在界面上方便你判断它为什么这样布局。进阶玩法模型配置与管理后台接入不同的 AI 引擎项目在 .env 配置 中内置了 OpenAI、Anthropic、Google、AWS Bedrock、Azure、Ollama、OpenRouter、DeepSeek、豆包等十几种提供商除少数外都支持自定义端点地址。也就是说你本地跑 Ollama 的开源模型、或者接公司的中转 API 都能直接用。各家的密钥变量和示例见 AI 提供商配置指南。官方建议选长文本能力强的模型如 Claude Sonnet、GPT-5、Gemini Pro 这一档因为图表 XML 属于长输出且格式严格弱模型容易画到一半截断。给团队提供统一模型列表单人使用时在AI_MODEL里写一个模型 ID 就够了。多人共用同一实例时管理员可以用AI_MODELS_CONFIG环境变量JSON 字符串或ai-models.json文件配置多个模型用户端即可在下拉框里切换不必各自准备密钥。用管理面板代替手改配置设置ADMIN_PASSWORD环境变量后访问/admin模型列表、访问密码、配额、功能开关都能在网页上管理不用每次重启容器改.env。具体字段和优先级规则见 管理面板文档。还有一条容易被忽略的路径项目内置了 MCP Server配置后可以让 Claude Desktop、Cursor、VS Code 等工具里的 AI 直接驱动这套绘图能力在浏览器中实时出图。技术栈速览前端与路由Next.js React界面是标准的聊天面板 画布布局AI 调用Vercel AI SDK负责流式输出和多提供商适配图表渲染react-drawio图表本体是标准 draw.io XMLAI 的工作就是生成和修改这段 XML因为产物是 draw.io 原生格式你随时可以把图导出后用 draw.io 桌面版继续编辑不存在格式绑定。现在开始概括一下Next AI Draw.io 解决的是描述需求 → 得到可编辑专业图表这一段路程本地部署、多模型接入、历史回退都开箱即用。建议你先跑一次上面的 Docker 命令用一句简单的流程描述验证环境确定要长期用之后再按 AI 提供商配置 挑选引擎遇到部署问题查 FAQ。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考