尧图网页设计 
Next AI Draw.io AI 绘图 API 实战:一句自然语言,跑出可编辑流程图【免费下载链接】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 图表的开源应用。如果你想在产品里嵌入对话式绘图能力,读完这篇能在 3 步内跑通它的聊天 API,并摸清文件上传、会话缓存和错误处理的边界。它替你解决了什么在 draw.io 里画流程图,拖节点、对齐、连线的过程很耗时,需求一变还得推倒重来。业务文档、架构图截图想转成可编辑图纸,手工重画更痛苦。Next AI Draw.io 把大模型接进绘图链路:你用一句话描述需求,模型直接产出 draw.io 可编辑的 XML,还能基于当前图纸做增量修改。核心能力一句话概括:对话式绘图 · 流式输出 · 文件理解 · 会话缓存。3 步跑通最小链路⚡️ 下面只走最短路:本地起服务,发一条画流程图的请求。Step 1:克隆仓库并安装依赖。git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io cp env.example .env.local npm install npm run devStep 2:配置环境变量。打开.env.local,只需填三项:AI_PROVIDER(选一个,如 openai)、对应的 API Key、AI_MODEL(模型 ID)。Step 3:发一次最小调用。这段代码向本地服务的/api/chat发一条文本消息,响应是流式的,里面会带出display_diagram工具调用和完整 XML。const res await fetch(http://localhost:3000/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: [{ role: user, parts: [{ type: text, text: 画一个登录流程图 }] }], xml: , sessionId: demo-001 }) }); // 逐块读取 res.body,拿到 tool-input-delta 里的 XML服务跑在 3000 端口,浏览器打开即可看到聊天界面和画布,API 与界面共用同一套逻辑。核心能力拆解用对话生成和修改图表模型不直接回文本,而是调用内置工具操作画布:新建图走display_diagram,小改动走edit_diagram(按节点 ID 增删改),输出被截断时用append_diagram续写。提示技巧:让它先说一句布局思路,再动手画图,能减少节点重叠。读懂文件和网页上传的图片、PDF、文本会被解析后参与对话,适合照着这张架构图复刻一版这类需求。关键约束如下:约束项上限单次携带文件数5 个单个文件大小2 MBPDF/文本提取长度150000 字符网页抓取超时15 秒网页走/api/parse-url,内置 SSRF 防护,禁止抓取内网地址,并自动识别 GBK 等中文编码。会话连续性与缓存请求体里的sessionId(不超过 200 字符)把多轮对话串成一条轨迹。第一条消息且画布为空时,服务端会先查本地缓存,命中直接回放 XML,省掉一次模型调用。流式输出与配额感知响应是 SSE 流,事件顺序为 start → 工具入参增量 → finish;支持推理的模型会先流式吐出思考过程。用GET /api/config可在发请求前查到:是否要求访问码、每日请求/Token 上限、TPM 上限。架构一瞥请求从浏览器发出后,由 Next.js 服务端路由统一收口:先过访问码、配额、文件校验三道关卡,再按请求头里的 provider 和模型 ID 把请求转给对应的大模型服务,流式结果原路回传给画布。存储层只承担会话日志与配置,绘图本体始终由客户端的 draw.io 画布渲染。一个场景串起来 假设你要给 SaaS 运营后台嵌一个对话式流程图模块,流程是:先查配置,再带凭证调聊天接口,把流里拿到的 XML 喂给 draw.io 嵌入组件。const cfg await fetch(/api/config).then(r r.json()); const headers { Content-Type: application/json }; if (cfg.accessCodeRequired) headers[x-access-code] your-code; const res await fetch(/api/chat, { method: POST, headers, body: JSON.stringify({ messages: [{ role: user, parts: [{ type: text, text: 生成订单退款流程图 }] }], xml: currentXml, sessionId: ops-1001 }) });第二轮修改时把上一轮的 XML 通过xml字段回传,模型就基于现状做增量编辑,而不是重画。下面这张灯泡维修流程图,就是一句提示词生成的典型产物,节点和连线都可直接在画布里拖动。边界与避坑现象原因处理401 认证失败服务端配了ACCESS_CODE_LIST,请求没带x-access-code先看/api/config的accessCodeRequired,再补请求头400 文件报错超过 5 个文件或有单文件超 2 MB减少文件数,拆小文件429 配额拦截启用 DynamoDB 配额后,默认每人每天 10 次请求、200000 Token请求头带x-ai-providerx-ai-api-key用自己的 key,或调高DAILY_REQUEST_LIMIT图纸中途截断输出 Token 打满上限无需干预,模型自动用append_diagram续写,等流结束往哪走多模态输入:把现有图纸截图或 PDF 文档丢给 API,让 AI 复刻、转绘成可编辑图。企业部署:仓库自带 Docker、Cloudflare Workers 部署文档,NEXT_PUBLIC_BASE_PATH支持子目录,设ADMIN_PASSWORD可开管理面板在线改配置。MCP 扩展:packages/mcp-server提供独立 MCP 服务,把 draw.io 操作接进 Claude Desktop、Cursor 等 AI 代理。到这里,你已经掌握了从起服务到异常处理的最小集成路径。把.env.local里的AI_PROVIDER换成你手头的 key,就能给团队演示第一张对话生成的图。官方文档:docs/cn/README_CN.mdAPI 源码:app/api/【免费下载链接】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），仅供参考 Next AI Draw.io AI 绘图 API 实战:一句自然语言,跑出可编辑流程图
Next AI Draw.io AI 绘图 API 实战:一句自然语言,跑出可编辑流程图【免费下载链接】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 图表的开源应用。如果你想在产品里嵌入对话式绘图能力,读完这篇能在 3 步内跑通它的聊天 API,并摸清文件上传、会话缓存和错误处理的边界。它替你解决了什么在 draw.io 里画流程图,拖节点、对齐、连线的过程很耗时,需求一变还得推倒重来。业务文档、架构图截图想转成可编辑图纸,手工重画更痛苦。Next AI Draw.io 把大模型接进绘图链路:你用一句话描述需求,模型直接产出 draw.io 可编辑的 XML,还能基于当前图纸做增量修改。核心能力一句话概括:对话式绘图 · 流式输出 · 文件理解 · 会话缓存。3 步跑通最小链路⚡️ 下面只走最短路:本地起服务,发一条画流程图的请求。Step 1:克隆仓库并安装依赖。git clone https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io cd next-ai-draw-io cp env.example .env.local npm install npm run devStep 2:配置环境变量。打开.env.local,只需填三项:AI_PROVIDER(选一个,如 openai)、对应的 API Key、AI_MODEL(模型 ID)。Step 3:发一次最小调用。这段代码向本地服务的/api/chat发一条文本消息,响应是流式的,里面会带出display_diagram工具调用和完整 XML。const res await fetch(http://localhost:3000/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: [{ role: user, parts: [{ type: text, text: 画一个登录流程图 }] }], xml: , sessionId: demo-001 }) }); // 逐块读取 res.body,拿到 tool-input-delta 里的 XML服务跑在 3000 端口,浏览器打开即可看到聊天界面和画布,API 与界面共用同一套逻辑。核心能力拆解用对话生成和修改图表模型不直接回文本,而是调用内置工具操作画布:新建图走display_diagram,小改动走edit_diagram(按节点 ID 增删改),输出被截断时用append_diagram续写。提示技巧:让它先说一句布局思路,再动手画图,能减少节点重叠。读懂文件和网页上传的图片、PDF、文本会被解析后参与对话,适合照着这张架构图复刻一版这类需求。关键约束如下:约束项上限单次携带文件数5 个单个文件大小2 MBPDF/文本提取长度150000 字符网页抓取超时15 秒网页走/api/parse-url,内置 SSRF 防护,禁止抓取内网地址,并自动识别 GBK 等中文编码。会话连续性与缓存请求体里的sessionId(不超过 200 字符)把多轮对话串成一条轨迹。第一条消息且画布为空时,服务端会先查本地缓存,命中直接回放 XML,省掉一次模型调用。流式输出与配额感知响应是 SSE 流,事件顺序为 start → 工具入参增量 → finish;支持推理的模型会先流式吐出思考过程。用GET /api/config可在发请求前查到:是否要求访问码、每日请求/Token 上限、TPM 上限。架构一瞥请求从浏览器发出后,由 Next.js 服务端路由统一收口:先过访问码、配额、文件校验三道关卡,再按请求头里的 provider 和模型 ID 把请求转给对应的大模型服务,流式结果原路回传给画布。存储层只承担会话日志与配置,绘图本体始终由客户端的 draw.io 画布渲染。一个场景串起来 假设你要给 SaaS 运营后台嵌一个对话式流程图模块,流程是:先查配置,再带凭证调聊天接口,把流里拿到的 XML 喂给 draw.io 嵌入组件。const cfg await fetch(/api/config).then(r r.json()); const headers { Content-Type: application/json }; if (cfg.accessCodeRequired) headers[x-access-code] your-code; const res await fetch(/api/chat, { method: POST, headers, body: JSON.stringify({ messages: [{ role: user, parts: [{ type: text, text: 生成订单退款流程图 }] }], xml: currentXml, sessionId: ops-1001 }) });第二轮修改时把上一轮的 XML 通过xml字段回传,模型就基于现状做增量编辑,而不是重画。下面这张灯泡维修流程图,就是一句提示词生成的典型产物,节点和连线都可直接在画布里拖动。边界与避坑现象原因处理401 认证失败服务端配了ACCESS_CODE_LIST,请求没带x-access-code先看/api/config的accessCodeRequired,再补请求头400 文件报错超过 5 个文件或有单文件超 2 MB减少文件数,拆小文件429 配额拦截启用 DynamoDB 配额后,默认每人每天 10 次请求、200000 Token请求头带x-ai-providerx-ai-api-key用自己的 key,或调高DAILY_REQUEST_LIMIT图纸中途截断输出 Token 打满上限无需干预,模型自动用append_diagram续写,等流结束往哪走多模态输入:把现有图纸截图或 PDF 文档丢给 API,让 AI 复刻、转绘成可编辑图。企业部署:仓库自带 Docker、Cloudflare Workers 部署文档,NEXT_PUBLIC_BASE_PATH支持子目录,设ADMIN_PASSWORD可开管理面板在线改配置。MCP 扩展:packages/mcp-server提供独立 MCP 服务,把 draw.io 操作接进 Claude Desktop、Cursor 等 AI 代理。到这里,你已经掌握了从起服务到异常处理的最小集成路径。把.env.local里的AI_PROVIDER换成你手头的 key,就能给团队演示第一张对话生成的图。官方文档:docs/cn/README_CN.mdAPI 源码:app/api/【免费下载链接】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），仅供参考