Next AI Draw.io 实战指南3 步跑通 AI 智能绘图集成【免费下载链接】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 的集成思路很简单你只发一句自然语言API 直接吐出可渲染的 draw.io 图表改图、读文件、管多轮上下文全走同一个接口。3 步把 Next AI Draw.io 跑起来读完这段你能把服务启动到本地并看到一张 AI 生成的图。git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io cp env.example .env.local打开.env.local两行是关键配置AI_PROVIDERopenai AI_MODELgpt-4onpm install后npm run dev浏览器打开对话页输入画一个登录流程图画布上会流式长出图表。整体链路一张图看懂前端对话、AI 生成 XML、draw.io 画布渲染。用一句话生成整张 draw.io 图表读完后你会知道 AI 到底往画布里写了什么。AI 通过display_diagram工具直接输出 draw.io 的 mxCell 片段前端把它渲染成图表对话里的改个颜色加个 MFA 节点走的是增量编辑而不是整图重画。云架构图有现成图标库AWS、GCP、Azure 的 shape 样式速查见 形状库参考不用自己猜 style 字符串。让 AI 理解你上传的文件想让 AI 照着现有资料画图把文件丢进对话即可。支持图片和文档AI 识别已有架构图并复刻增强PDF、文本文件会先提取内容再转成图表。边界记两条最多 5 个文件单个不超 2 MB超限会在 文件校验逻辑 里直接被拒。按 ID 精准修改现有图表这一节告诉你 AI 改图时动的是哪几个节点。edit_diagram工具基于 cell id 做三类操作update、add、delete。删除一个容器节点时子节点和关联连线自动级联清理不用你一条条点名。这样多轮修改又快又省 token——AI 只重写变动的部分。把多轮对话的上下文接上多轮修改靠请求体里的messages、xml、sessionId三件套维持每轮带上上一轮的图表 XMLAI 就知道当前画布长什么样。版本历史也会自动记录每次 AI 编辑前的状态改坏了可以从历史记录里回滚到任意一版。接入你自己的模型与流式输出不想用默认模型改环境变量就行。AI_PROVIDER可选 openai、anthropic、google、deepseek、ollama 等十余家AI_MODEL里用逗号分隔多个模型 ID第一个当默认其余出现在页面模型选择器。重复的提问会命中缓存直接回放不花 token。响应走 AI SDK 的 UI Message Stream 协议前端按tool-input-delta事件边收边渲染。部署到团队内部时配ACCESS_CODE_LIST加访问码校验配ADMIN_PASSWORD就能用 Web 管理面板改大部分设置不用重启服务。场景演示给产品原型配一张交互流程图 把一份 PRD PDF 拖进对话说一句按文档里的模块画一张交互流程图AI 读完文档直接出图。接着逐轮提要求把泳道改成 3 条后端节点换成 AWS 图标补一个失败重试分支——每轮只改动的节点会变不用重画全图。更进一步MCP Server 源码 提供了load_diagram、export_diagram、list_pages、add_page等工具Claude Desktop、Cursor 这类客户端可以直连画布AI 读你现有的 .drawio 文件改完实时预览导出成 .drawio、.png、.svg 都行。常见报错与解法现象原因解法请求返回 401访问码没配或不匹配检查ACCESS_CODE_LIST请求头带x-access-code文件上传被拒超过 5 个文件或单文件 2 MB拆文件、压缩后再传图表渲染失败AI 输出了带 mxfile 包裹的完整 XML工具约定只传 mxCell 片段重新触发即可流式输出中断网关或反代超时过短适当放宽超时缓存命中时可直接回放端口 6002 被占用MCP Server 内置服务冲突换PORT环境变量延伸资源官方中文文档docs/cn/README_CN.mdMCP Server 源码与配置packages/mcp-server/部署文档Docker、离线部署在 docs/cn 下都有跑通上面的演示后下一步就是把 MCP Server 挂进你的 AI 客户端让 Agent 直接替你改图。【免费下载链接】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），仅供参考