Next AI Draw.io API 集成指南一个 POST 请求让 AI 替你画出 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 的 API 能把这件事压成一次 HTTP 调用。它底层是 Vercel AI SDK 的流式接口你发一段自然语言拿回 draw.io 可直接渲染的 XML——自己搭编辑器、自己接大模型都不必。全文按本地跑起来 → 读懂参数 → 跑通一次完整调用的顺序走每一步都有可粘贴的命令和代码。3 步跑通 AI 绘图 API第 1 步拿到代码。把仓库克隆到本地git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io第 2 步配置凭据。从env.example复制出一份本地环境文件选一个提供商填入 key 和模型 ID。cp env.example .env.local以 OpenAI 为例把AI_PROVIDERopenai、AI_MODELgpt-4o填进.env.local再带上你的OPENAI_API_KEY。第 3 步发起首次调用。启动开发服务器用 curl 打一次聊天接口npm install npm run dev # 默认监听 6002 端口curl -s http://localhost:6002/api/chat \ -H Content-Type: application/json \ -d {messages:[{role:user,parts:[{type:text,text:画一个登录流程图}]}],xml:}流式响应会立刻开始返回start和tool-input-start等事件图表 XML 就夹在tool-input-delta的增量里。两个端点看懂请求与响应POST /api/chat请求怎么发请求体只有三个核心字段messages消息数组用户输入放在parts里的text块中图片用file块承载xml当前画布上的 draw.io XML首轮传空字符串即可sessionId会话标识最长 200 字符用于多轮编辑时保持上下文。认证和模型选择都走请求头服务一旦配置了ACCESS_CODE_LIST就必须带x-access-code否则直接返回 401x-ai-provider、x-ai-model这类头可以覆盖服务端默认模型。响应是 AI SDK 的 UI Message 流AI 会调用display_diagram工具产出整图 XML或用edit_diagram对现有图做局部修改XML 都在tool-input-available事件里完整给出。GET /api/config先探一下环境不知道目标部署是否开启了访问码、有没有配配额先 GET 这个端点它会返回accessCodeRequired和dailyRequestLimit等字段一次探测省掉盲目试错。端到端示例从请求到拿到 XML下面这段脚本完成一次真实调用发起请求、按状态码处理错误、流式读取并拼接出完整 XML。// 一次完整的 AI 绘图 API 调用 const res await fetch(http://localhost:6002/api/chat, { method: POST, headers: { Content-Type: application/json }, // 若服务启用访问码追加 x-access-code: your_access_code body: JSON.stringify({ messages: [{ role: user, parts: [{ type: text, text: 画一个部署架构图 }] }], xml: , // 画布当前 XML首轮为空 sessionId: demo-1, }), }); if (!res.ok) { const err await res.json().catch(() ({})); throw new Error(chat failed: ${res.status} ${err.error || }); } // 逐块读取流收集 AI 产出的图表 XML let buf ; for await (const chunk of res.body) buf new TextDecoder().decode(chunk); const m buf.match(/inputTextDelta:([\s\S]*?),/); console.log(图表 XML:, m?.[1]);跑通后你会看到终端里打印出带mxCell节点的完整 XML把它交给任何 draw.io 嵌入组件就能渲染成图。进阶技巧流式解析别等整包。响应是逐块推的用for await边收边解析tool-input-delta事件可以把AI 画完第一个节点到显示在屏幕上的等待压到最低。等整包读完再解析的写法在生成大图纸时体验会差一截。两级缓存白捡。服务端内置了少量高频提示词比如 transformer 架构图的固定响应命中的请求不会消耗任何模型 token秒级返回对支持提示缓存的提供商如 Bedrock多轮编辑还会在对话前缀上打缓存点第二轮起的 token 费用更低。带图提问。把图片以 base64 data URL 放进parts的file块AI 就能看着图说话。上传上限是 5 个文件、单个 2MB超限会收到 400。API 报错速查Q一直收到 401提示 invalid access code服务配置了ACCESS_CODE_LIST而你的x-access-code头缺失或不在列表里先核对这一项再排查别的。Q文件传不上去返回 400限制是 5 个文件、单个 2MB注意校验按 base64 解码后的实际大小算别按编码前的字面大小估。Q请求超时了推理类模型会先花几十秒规划布局才吐 XML客户端超时建议放宽到 300 秒以上别用默认的十几秒。Q突然 429服务开启了按用户配额请求数/Token 数错误体里带type和limit字段据此判断撞了哪条上限。适合做什么以及去哪看更多如果你的产品需要文档自动配图、低代码画布、内部工具生成架构图这类 AI 绘图场景这套 API 可以直接接。完整参数和环境变量参考 docs/cn/README_CN.md聊天路由与工具实现见 app/api/chat/MCP 服务端封装见 packages/mcp-server/。【免费下载链接】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），仅供参考