尧图网页设计 
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 是一个将大语言模型LLM能力与 draw.io 图表编辑深度整合的 Next.js Web 应用你可以直接用自然语言聊天的方式创建、修改和增强图表AI 会把指令转换为 draw.io 可渲染的 XML 并在浏览器中实时呈现。本文以仓库根目录 README.md 为主线结合 服务端多模型配置、Docker 运行指南、管理面板指南 及核心源码实现完整梳理它的功能体系、对话→图表的底层调用链、十几家 AI Provider 的配置方式、服务端多模型下发机制、MCP Server 接入方法以及 EdgeOne Pages / Vercel / Cloudflare Workers 的部署路径。读完本文你将能独立完成本项目的本地运行、Provider 配置、服务端模型下发、在线体验接入 AI Agent并理解其聊天生成图表的实现原理。说明本文所有结论均依据当前仓库源码与官方文档整理仓库内文档同时提供 中文版 与 日文版 可供对照阅读。二、项目定位与技术栈根据 README.md 的定位Next AI Draw.io 是一个AI-Powered Diagram Creation Tool——Chat, Draw, VisualizeAI 驱动的图表创作工具对话、绘制、可视化其核心工作方式是图表被表示为 draw.io 可渲染的 XMLAI 处理你的自然语言指令生成或修改这段 XML。package.json 中显示项目基于Next.js 16.x React 19关键依赖集中在三块对应 README 的 How It Works 一节技术作用Next.js前端框架与 App Router 路由聊天界面与/admin管理面板均运行其上Vercel AI SDKaiai-sdk/*统一多种 Provider 的流式streaming对话响应与工具调用react-drawioreact-drawiodraw.io 图表的嵌入渲染与操作从依赖看项目还内置了丰富的周边能力unpdf负责 PDF 文本抽取、xmldom/xmldom负责 XML 解析校验、jsonrepair修复被截断的 JSON/XML、pako处理 draw.io 压缩文件、langfuse/*与opentelemetry/*提供可观测性、aws-sdk/client-dynamodb支撑配额管理详见 lib/dynamo-quota-manager.ts。三、核心功能体系Features 深度解读README 列举了 8 项核心功能结合源码可以进一步理解每项能力的落点3.1 LLM 驱动的图表创建通过自然语言创建和操作 draw.io 图表。实现上系统在聊天链路中为模型注入了多个图表工具。搜索 lib/system-prompts.ts 可以看到display_diagram生成/重构整张图表的 XML、append_diagram在display_diagram因输出长度被截断时继续生成、get_shape_library生成云架构图等图标库图表前先发现可用 shapes等工具约定模型调用这些工具即可把 XML 推给前端画布。3.2 图片驱动的图表复刻与增强上传已有图表截图或图片由 AI 自动复刻并增强。README 在模型要求一节特别提示claude系列在训练时见过大量带云厂商 LogoAWS、Azure、GCP的 draw.io 图因此做云架构图效果最佳同时推荐使用支持视觉的模型GPT-4o、Claude、Gemini来获得最好的图片转图体验。3.3 PDF 与文本文件上传支持上传 PDF 与文本文件抽取内容来生成图表。环境变量ENABLE_PDF_INPUT默认开启NEXT_PUBLIC_MAX_EXTRACTED_CHARS默认限制抽取 150,000 字符实现上 package.json 引入unpdflib/pdf-utils.ts 负责抽取与文本预处理。3.4 AI 推理过程显示Reasoning Display对支持推理/思考过程的模型展示其思考链条README 明确列出 OpenAI o1/o3、Gemini、Claude 等。对应地env.example 给出大量模型级推理参数OpenAIOPENAI_REASONING_EFFORTminimal/low/medium/high、OPENAI_REASONING_SUMMARYnone/brief/detailedAnthropicANTHROPIC_THINKING_TYPEenabled、ANTHROPIC_THINKING_BUDGET_TOKENSGemini 2.5/3GOOGLE_THINKING_BUDGET、GOOGLE_THINKING_LEVEL自动开启includeThoughts: trueAWS BedrockBEDROCK_REASONING_BUDGET_TOKENS1024–64000、BEDROCK_REASONING_EFFORT。UI 层由 components/ai-elements/reasoning.tsx 渲染思考过程流式推送则经由 app/api/chat/route.ts 完成。3.5 图表历史与版本恢复对 AI 编辑前的每次变更做版本记录可回看并恢复历史版本。仓库中 components/history-dialog.tsx 提供了历史浏览对话框端到端测试 tests/e2e/history.spec.ts 与 tests/e2e/history-restore.spec.ts 覆盖了历史记录与恢复流程。3.6 交互式聊天界面在 components/chat 目录下可以看到完整的前端组件族ChatLobby、聊天面板、Tool 调用卡片、验证卡片等支持多轮对话中持续调整图表多轮会话管理在 hooks/use-session-manager.ts。3.7 云架构图专项支持专项支持 AWS、GCP、Azure 等云架构图的生成。docs/shape-libraries 提供了 alibaba_cloud、aws4、azure2、gcp2、kubernetes、openstack、sap 等大量形状库清单文档配合get_shape_library工具在生成前检索可用图标。3.8 动态连接线Animated Connectors可生成动态/动画连接线来增强可视化。仓库的public/animated_connectors.svg即一个 Transformer 架构动画连接线示例draw.io 侧边栏图库中亦随附public/下多个 SVG 演示素材。四、图表 XML 质量保障与长文本输出处理生成 draw.io 图表本质上是让模型产出格式严格的长文本 XML为此项目做了两层工程化设计输出 Token 上限与自动回退env.example 中MAX_OUTPUT_TOKENS默认 64,000由推理与 XML 共用当模型自身上限低于配置时会自动用该上限重试。app/api/chat/route.ts 中引入resolveMaxOutputTokens与withOutputTokenLimitFallback见 lib/output-token-limit.ts实现该回退逻辑。XML 校验与修复lib/diagram-validator.ts 及 lib/validation-schema.ts 负责对模型输出的 XML 做结构校验前端有对应的 components/chat/ValidationCard.tsx 展示校验结果tests/unit/diagram-validator.test.ts 覆盖了相关判定逻辑。系统提示词还约束模型在创建图表前先简述版面规划2–3 句避免图形重叠与连线交叉并要求通过display_diagram工具输出 XML而不是在普通聊天文本中夹带 XML见 lib/system-prompts.ts。五、对话到图表的调用链How It Works结合 app/api/chat/route.ts 与 lib/system-prompts.ts一次帮我画一个用户认证流程图的请求大致经历如下环节用户在聊天框输入自然语言 │ ▼ POST /api/chat Next.js Route Handlerapp/api/chat/route.ts │ · ACCESS_CODE_LIST 访问码校验可选 │ · 提取 sessionId / userIdLangfuse 追踪与配额 │ · 组装 messages 当前 diagram XML ▼ Vercel AI SDK streamText → 按 AI_PROVIDER/AI_MODEL 解析出模型实例 │ · 系统提示词描述 display_diagram / append_diagram 等工具 ▼ 模型产出工具调用display_diagram(xml) │ ▼ createUIMessageStreamResponse 以流式 UI 消息推回浏览器 ▼ 前端 DrawIoEmbedreact-drawio接收 XML 实时渲染其中的关键实现细节Provider 解析lib/ai-providers.ts 根据环境变量解析出统一的模型实例底层调用getAIModel并在 app/api/chat/route.ts 中配合服务端模型查找findServerModelById决策使用个人 Key 还是服务端模型。流式协议聊天接口采用ai包提供的createUIMessageStream/createUIMessageStreamResponse输出 UI 消息流tool-input-start→tool-input-delta→tool-input-available→finish其中display_diagram的完整 XML 会被逐步流入前端。图表渲染前端主页面 app/[lang]/page.tsx 通过DrawIoEmbed来自 react-drawio承载 draw.io 编辑器draw.io 的嵌入地址可用NEXT_PUBLIC_DRAWIO_BASE_URL指向自建实例默认https://embed.diagrams.net。图表状态保存与恢复会话与模板存储在 lib/session-storage.ts 与 lib/template-storage.ts并提供 tests/unit/template-storage.test.ts 等单元测试保障。若命中已缓存的图表响应见 lib/cached-responses.ts接口会直接以缓存 XML 构造同构的流式工具调用响应减少重复的 LLM 开销。六、效果示例从 Prompt 到成品图README 收录了多组提示词 生成结果的示例。例如下面的 RAG 架构图由提示词Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion生成而下面这张 Transformer 架构动态连接线图则由提示词Give me a animated connector diagram of transformers architecture生成体现了动态连接线能力的典型效果其余示例还包括 React AWS Serverless 认证流程public/auth.svg、开放式创新模型可视化public/inno.svg、随手涂鸦小猫public/cat_demo.svg等均可在 public/ 目录下找到原始 SVG作为评估模型输出质量的参照物。七、快速开始五种运行方式7.1 在线体验 自带 API KeyBYO Key无需安装即可访问官方 demo 站点体验。受 demo 站配额影响README 建议用户自带 API Key点击聊天面板中的 Settings 图标配置 Provider 与 API Key。Key 只保存在浏览器本地localStorage 层面不会上传到服务器。7.2 原生桌面应用Electron项目在 electron/ 目录下提供了完整的桌面端实现main/index.ts为主进程入口包含窗口管理、Next 服务启动next-server.ts、端口管理port-manager.ts、系统代理proxy-manager.ts等preload/提供 IPC 桥接。支持Windows、macOS、Linux三平台可从项目 Releases 页面下载各平台安装包。本地开发可用npm run electron:dev脚本见 package.json打包命令包括dist:win、dist:mac、dist:linux、dist:all。7.3 Docker 一键运行仓库内 Dockerfile、docker-compose.yml 与 docs/en/docker.md 提供了容器化方案。最简单的单命令启动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也可以把配置写入.env文件后整体注入cp env.example .env # 编辑 .env 填入你的配置 docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest对于服务端下发多个模型的场景可以把 ai-models.json 只读挂载进容器避免暴露用户 API Keydocker run -d -p 3000:3000 \ -e OPENAI_API_KEYyour_api_key \ -v $(pwd)/ai-models.json:/app/ai-models.json:ro \ ghcr.io/dayuanjiang/next-ai-draw-io:latest如需自定义配置文件在容器内的路径用AI_MODELS_CONFIG_PATH/config/ai-models.json指向即可。注意如果embed.diagrams.net被网络策略阻断请参考 离线部署指南 配置NEXT_PUBLIC_DRAWIO_BASE_URL指向自建 draw.io。7.4 源码本地运行从项目主页克隆仓库后执行npm install cp env.example .env.local npm run dev随后浏览器访问http://localhost:6002开发端口 6002 由 package.json 中next dev --turbopack --port 6002指定生产start端口为 6001。详细的各 Provider 配置见下文与 Provider 配置指南。7.5 客户端直连配置AI_PROVIDER决定使用哪家服务商AI_MODEL指定模型 ID二者为核心必填项自动探测若只配置了一个Provider 的 API Key系统会自动识别并使用该 Provider无需手写AI_PROVIDER多 Provider 并存若配置了多个 API Key则必须显式声明AI_PROVIDER如openai、anthropic、deepseek、bedrock等多模型快捷方式在单一 Provider 下AI_MODEL可用逗号分隔列出多个模型 ID第一个作为默认模型其余出现在前端模型选择器中。八、多 Provider 支持与配置详解README 列出的 Provider 覆盖面非常广env.example 为每家都准备了独立的*_API_KEY与*_BASE_URLDoubao豆包/火山方舟、AWS Bedrock默认、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、ModelScope、SGLang、Vercel AI Gateway、MiniMax、GLM、Qwen、Kimi、Qiniu、MiMo小米、Novita AI、Atlas Cloud。其中除 AWS Bedrock 与 OpenRouter 外其余 Provider均支持自定义 Endpoint*_BASE_URL可用于国内可直达的兼容端点或企业网关。下面按类整理常用的配置要点完整清单见 Provider 配置指南 与 env.example8.1 官方托管类 ProviderProvider必填变量示例说明OpenAIOPENAI_API_KEYAI_MODELgpt-4o可用OPENAI_BASE_URL指向任意 OpenAI 兼容服务AnthropicANTHROPIC_API_KEYAI_MODELclaude-sonnet-4-5-20250514也可改用ANTHROPIC_AUTH_TOKEN走Authorization: Bearer二者互斥Google GeminiGOOGLE_GENERATIVE_AI_API_KEYAI_MODELgemini-2.0-flash可选GOOGLE_BASE_URLGoogle Vertex AIGOOGLE_VERTEX_API_KEYAI_MODELgemini-2.0-flashExpress Mode 兼容边缘运行时Vercel/CloudflareAzure OpenAIAZURE_API_KEYAZURE_RESOURCE_NAMEAI_MODEL部署名也可用AZURE_BASE_URL替代资源名方式AWS BedrockAWS_REGIONAWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEYAI_MODELanthropic...在 Lambda/EC2 上会自动采用 IAM Role 凭证Vercel AI GatewayAI_GATEWAY_API_KEYAI_MODELopenai/gpt-4o模型格式为provider/model可选AI_GATEWAY_BASE_URL指向自建网关8.2 聚合/兼容端点类Provider必填变量示例说明OpenRouterOPENROUTER_API_KEYAI_MODELanthropic/claude-sonnet-4一个 Key 访问多家模型AIHubMixAIHUBMIX_API_KEYAI_MODELclaude-sonnet-4-5-20250929聚合 Claude/GPT/Gemini/DeepSeekDeepSeekDEEPSEEK_API_KEYAI_MODELdeepseek-chat性价比优先的选择SiliconFlowSILICONFLOW_API_KEYAI_MODELdeepseek-ai/DeepSeek-V3域名可在.com/.cn间切换ModelScopeMODELSCOPE_API_KEYAI_MODELQwen/Qwen3-...魔搭社区模型SGLangSGLANG_API_KEYAI_MODEL模型ID默认http://127.0.0.1:8000/v1可自托管推理8.3 本地与区域类Ollama完全本地/离线AI_PROVIDERollamaAI_MODELllama3.2可选OLLAMA_BASE_URLhttp://localhost:11434。README 特别提醒本地跑图表生成对模型要求较高除非本地运行 DeepSeek R1、Qwen3-235B 这类大模型否则实用性有限Doubao火山方舟DOUBAO_API_KEYAI_MODELdoubao-seed-1-8-251215等DOUBAO_BASE_URL默认https://ark.cn-beijing.volces.com/api/v3MiniMax / GLM / Qwen / Kimi / Qiniu / MiMo / Novita / Atlas Cloud均以*_API_KEY*_BASE_URL形式接入。例如 MiniMax 同时兼容 Anthropic 格式/anthropic与 OpenAI 格式/v1并区分大陆与海外端点Atlas Cloud 提供 OpenAI 兼容 API可一个连接访问 DeepSeek、Qwen、GLM、Kimi、MiniMax 等。8.4 温度与输出上限TEMPERATURE0 # 更确定性的输出绘图场景推荐 MAX_OUTPUT_TOKENS64000 # 推理与图表 XML 共享的输出上限README 特别提示推理类模型如 GPT-5.1不支持 temperature 的请保持TEMPERATURE不设置让模型使用其默认行为。九、服务端多模型配置Server-Side Multi-Model管理员可以为所有用户配置服务端模型用户无需自备 API Key。README 给出三种配置方法源码 lib/server-model-config.ts 的实现进一步揭示了它们的优先级Priority 1: AI_MODELS_CONFIG环境变量JSON 字符串 ← 云部署推荐 Priority 2: ai-models.json项目根目录文件 可用 AI_MODELS_CONFIG_PATH 指向自定义路径默认 ./ai-models.json Priority 3: AI_MODEL 逗号分隔多模型 AI_PROVIDER ← 单 Provider 快捷方式从源码看loadEnvServerModelsConfig()正是按此顺序依次尝试读取 JSON 字符串 → 读取配置文件 → 解析逗号分隔的AI_MODEL只有当AI_MODEL含逗号且AI_PROVIDER为已知 Provider 时才触发第三优先级否则会打印告警日志提示改用前两种方式。9.1 ai-models.json 配置样例{ providers: [ { name: OpenAI Production, provider: openai, models: [gpt-4o, gpt-4o-mini], default: true }, { name: Custom DeepSeek, provider: deepseek, models: [deepseek-chat], apiKeyEnv: MY_DEEPSEEK_KEY, baseUrlEnv: MY_DEEPSEEK_URL } ] }9.2 字段说明与 lib/server-model-config.ts 的 Zod Schema 一一对应字段必填说明name是展示名。允许同一 Provider 配置多套如 OpenAI Production 与 OpenAI Stagingprovider是Provider 类型openai、anthropic、google、bedrock等必须为已知 Provider否则校验失败models是模型 ID 列表每项至少 1 字符default否设为true时自动把该 Provider 的第一个模型选为默认模型apiKeyEnv否自定义 API Key 环境变量名。注意可传字符串或字符串数组数组用于多 Key 负载均衡baseUrlEnv否自定义 Base URL 的环境变量名从源码还可知服务端模型在运行时会被展平为server:slugified-name:modelId形式的内部 ID——name会被 slugify如 OpenAI Production →openai-production后拼进 ID从而保证同一 Provider 多套 Key 配置之间的唯一性。当未提供任何服务端配置时应用会回退到AI_PROVIDER/AI_MODEL环境变量方式README 中的回退规则与 lib/server-model-config.ts 源码一致。此外服务端模型与前端模型 UI 是同一套选择体系管理员保存的模型会在请求时与AI_MODELS_CONFIG/ai-models.json合并供所有用户使用。十、Admin 管理面板Web 化的服务端配置当不再满足于手改.env时可开启 Web 管理面板设置环境变量ADMIN_PASSWORD不设置则面板完全禁用访问/admin并登录对应实现位于 app/[lang]/admin/page.tsx下设 models-section.tsx、setting-field.tsx 等组件接口见 app/api/admin。面板可配置的内容据 docs/en/admin-panel.mdModels用与应用内设置一致的 UI 添加 Provider、API Key 与模型列表保存后成为面向所有用户的服务端模型并与环境变量中的AI_MODELS_CONFIG/ai-models.json在请求时合并面板本身不会改写这些 env 文件其他分区访问码Access Codes、生成参数、功能开关、可观测性Observability、配额Quota等保存后写入data/settings.json并立即生效无需重启少数如 Langfuse、DynamoDB 设置标记为 Restart Required。10.1 优先级规则面板保存的配置 环境变量 内置默认值删除面板中的某个已保存值后会回退到环境变量取值。10.2 运维注意点密钥以明文形式存储在data/settings.json文件权限 600务必保持该文件私密在无持久磁盘的 Serverless 平台Vercel、Cloudflare Workers上面板为只读须改用环境变量配置Docker 场景下data/目录通过 docker-compose.yml 的 volume 持久化NEXT_PUBLIC_*变量在构建期被烘焙进产物无法通过面板热修改。配套的服务端基础逻辑可在 lib/adminauth.ts、providers.ts、settings.ts、settings-registry.ts中查阅单元测试见 tests/unit/admin-settings.test.ts 与 tests/unit/admin-providers.test.ts。十一、MCP Server让 AI Agent 直接画图借助 Model Context ProtocolMCPNext AI Draw.io 可以把同样的图表能力开放给 Claude Desktop、Cursor、VS Code 等 AI Agent且图表在浏览器中实时预览。完整配置与排障手册见 packages/mcp-server/README.md。11.1 标准接入配置在任意 MCP 客户端的mcpServers中增加{ mcpServers: { drawio: { command: npx, args: [next-ai-drawio/mcp-serverlatest] } } }11.2 Claude Code CLI 一行接入claude mcp add drawio -- npx next-ai-drawio/mcp-serverlatest之后即可让 Claude 直接建图例如Create a flowchart showing user authentication with login, MFA, and session management图表会实时出现在浏览器中。11.3 暴露给 Agent 的工具集工具说明start_session打开浏览器并建立实时预览会话create_new_diagram从 XML 创建新图需xml参数load_diagram从磁盘加载.drawio文件支持压缩格式edit_diagram基于 ID 的单元格操作更新/新增/删除get_diagram获取当前图表 XMLexport_diagram导出为.drawio/.png/.svglist_pages列出多页签含 id、名称、index、单元格数add_page/rename_page/delete_page多页面的增/改/删拒绝删除最后一页工具入参的多页面定位page_id/page_name/page_index是可选的未指定时默认作用于第一页源码位于 packages/mcp-server/src会话与工具定义在index.ts页面操作辅助在pages.tsXML 校验在xml-validation.ts并配套了 packages/mcp-server/tests 下的 edit-gate、load-diagram、multi-page、server-wiring 等单元测试。11.4 运行架构┌─────────────────┐ stdio ┌─────────────────┐ │ Claude Desktop │ ─────────── │ MCP Server │ │ (AI Agent) │ │ (this package) │ └─────────────────┘ └────────┬────────┘ │ ┌────────▼────────┐ │ Embedded HTTP │ │ Server (:6002) │ └────────┬────────┘ │ ┌────────▼────────┐ │ Users Browser │ │ (draw.io embed) │ └─────────────────┘流程MCP Server 通过 stdio 接收 Agent 的工具调用 → 内置 HTTP 服务器提供 draw.io UI 并维护会话状态 → 浏览器轮询获得实时更新。11.5 MCP 环境变量变量默认值说明PORT6002内置 HTTP 服务端口占用时会自动尝试下一个可用端口最多到 6020DRAWIO_BASE_URLhttps://embed.diagrams.netdraw.io 嵌入地址私有/离线部署时改为自建实例安全敏感环境可将DRAWIO_BASE_URL指向公司自建 draw.io如docker run -d -p 8080:8080 jgraph/drawio自建后配置http://localhost:8080。若遇到 No active session 报错请先调用start_session若浏览器不刷新请确认 URL 带有?mcp会话参数。十二、部署到生产环境README 提供了三条主流部署路径全部围绕Next.js 应用 环境变量展开。12.1 腾讯 EdgeOne Pages通过一键部署按钮把仓库导入 EdgeOne Pages 即为对应构建配置。12.2 Vercel作为 Next.js 出品方Vercel 是最省事的托管选择。用 Deploy 按钮把仓库导入 Vercel并在 Dashboard 中务必补齐环境变量与.env.local保持一致。注意不要使用git clone本地构建产物直接上传——该应用依赖服务端环境变量注入。12.3 Cloudflare Workers借助 OpenNext 适配器opennextjs/cloudflare构建部署。相关脚本见 package.jsonnpm run preview # opennextjs-cloudflare build preview npm run deploy # opennextjs-cloudflare build deploy npm run upload # 构建后上传仓库内 open-next.config.ts、wrangler.jsonc 与 vercel.json 分别承载各平台构建参数详细步骤见 Cloudflare 部署指南。Cloudflare 路线同样受 Serverless 无持久磁盘限制——服务端多模型与访问码等配置应走环境变量参见上文 10.2。12.4 通用部署变量速查部署到子目录时可设置NEXT_PUBLIC_BASE_PATH如/nextaidrawio带前导斜杠空值表示根路径部署。若使用代理/反代且不希望放行内网 URL可把 SSRF 防护 相关开关ALLOW_PRIVATE_URLSfalse默认 true。ACCESS_CODE_LIST用逗号分隔配置访问码用于给公网站点加上一道使用门槛校验逻辑见 app/api/chat/route.ts。十三、模型选型建议与 FAQ13.1 对模型的能力要求README 强调该任务要求模型具备很强的长文本 严格格式约束draw.io XML生成能力推荐的模型包括Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1等README 罗列的推荐档位。此外若目标是云架构图带 AWS/Azure/GCP 官方 Logoclaude系列由于训练数据覆盖最多通常是首选若追求成本DeepSeek 更具性价比若关注隐私与完全离线运行选择 Ollama需较强本地硬件运行 DeepSeek R1 / Qwen3-235B 级别模型若想要一个 Key 通吃多模型OpenRouter 或聚合网关是灵活方案。13.2 常见问题与观测运行中遇到模型输出、Provider 鉴权、配额等高频问题可查阅 FAQ 文档。生产可观测方面可通过 LangfuseLANGFUSE_PUBLIC_KEY/LANGFUSE_SECRET_KEY/LANGFUSE_BASEURL接入 LLM 链路追踪与 Token 用量统计实现见 lib/langfuse.ts。13.3 在线 demo 的赞助与自托管提示在线 demo 站点的 API 消耗由豆包等赞助支持如需长期稳定使用自托管用户也可以设置NEXT_PUBLIC_SELFHOSTEDtrue以便在触发配额HTTP 429时展示自定义的自托管引导文案对应翻译键messageTokenSelfHosted、messageApiSelfHosted、tipSelfHosted见 lib/i18n/dictionaries。十四、项目健康度与社区多语言文档体系根目录 README.md 之外还提供 中文版、日文版 的完整入口文档以及 docker、cloudflare-deploy、offline-deployment、admin-panel、ai-providers、FAQ 等分主题指南每种均含 中文、英文、日文 三套开源协议Apache-2.0LICENSE质量保障单元测试tests/unit与 Playwright 端到端测试tests/e2e覆盖聊天、保存、上传、历史恢复、主题、多轮对话等关键路径运行命令npm run test与npm run test:e2eCI 与代码规范使用 Biome 做 lint/formatbiome.jsonnpm run check执行完整 CI 校验。至此从自然语言对话建图的产品形态、服务端模型与 Provider 的配置矩阵、Admin 面板的配置优先级到 MCP Server 的 Agent 化接入与三大云平台部署读者已可以基于本仓库独立搭建并二次定制一个 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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 是一个将大语言模型LLM能力与 draw.io 图表编辑深度整合的 Next.js Web 应用你可以直接用自然语言聊天的方式创建、修改和增强图表AI 会把指令转换为 draw.io 可渲染的 XML 并在浏览器中实时呈现。本文以仓库根目录 README.md 为主线结合 服务端多模型配置、Docker 运行指南、管理面板指南 及核心源码实现完整梳理它的功能体系、对话→图表的底层调用链、十几家 AI Provider 的配置方式、服务端多模型下发机制、MCP Server 接入方法以及 EdgeOne Pages / Vercel / Cloudflare Workers 的部署路径。读完本文你将能独立完成本项目的本地运行、Provider 配置、服务端模型下发、在线体验接入 AI Agent并理解其聊天生成图表的实现原理。说明本文所有结论均依据当前仓库源码与官方文档整理仓库内文档同时提供 中文版 与 日文版 可供对照阅读。二、项目定位与技术栈根据 README.md 的定位Next AI Draw.io 是一个AI-Powered Diagram Creation Tool——Chat, Draw, VisualizeAI 驱动的图表创作工具对话、绘制、可视化其核心工作方式是图表被表示为 draw.io 可渲染的 XMLAI 处理你的自然语言指令生成或修改这段 XML。package.json 中显示项目基于Next.js 16.x React 19关键依赖集中在三块对应 README 的 How It Works 一节技术作用Next.js前端框架与 App Router 路由聊天界面与/admin管理面板均运行其上Vercel AI SDKaiai-sdk/*统一多种 Provider 的流式streaming对话响应与工具调用react-drawioreact-drawiodraw.io 图表的嵌入渲染与操作从依赖看项目还内置了丰富的周边能力unpdf负责 PDF 文本抽取、xmldom/xmldom负责 XML 解析校验、jsonrepair修复被截断的 JSON/XML、pako处理 draw.io 压缩文件、langfuse/*与opentelemetry/*提供可观测性、aws-sdk/client-dynamodb支撑配额管理详见 lib/dynamo-quota-manager.ts。三、核心功能体系Features 深度解读README 列举了 8 项核心功能结合源码可以进一步理解每项能力的落点3.1 LLM 驱动的图表创建通过自然语言创建和操作 draw.io 图表。实现上系统在聊天链路中为模型注入了多个图表工具。搜索 lib/system-prompts.ts 可以看到display_diagram生成/重构整张图表的 XML、append_diagram在display_diagram因输出长度被截断时继续生成、get_shape_library生成云架构图等图标库图表前先发现可用 shapes等工具约定模型调用这些工具即可把 XML 推给前端画布。3.2 图片驱动的图表复刻与增强上传已有图表截图或图片由 AI 自动复刻并增强。README 在模型要求一节特别提示claude系列在训练时见过大量带云厂商 LogoAWS、Azure、GCP的 draw.io 图因此做云架构图效果最佳同时推荐使用支持视觉的模型GPT-4o、Claude、Gemini来获得最好的图片转图体验。3.3 PDF 与文本文件上传支持上传 PDF 与文本文件抽取内容来生成图表。环境变量ENABLE_PDF_INPUT默认开启NEXT_PUBLIC_MAX_EXTRACTED_CHARS默认限制抽取 150,000 字符实现上 package.json 引入unpdflib/pdf-utils.ts 负责抽取与文本预处理。3.4 AI 推理过程显示Reasoning Display对支持推理/思考过程的模型展示其思考链条README 明确列出 OpenAI o1/o3、Gemini、Claude 等。对应地env.example 给出大量模型级推理参数OpenAIOPENAI_REASONING_EFFORTminimal/low/medium/high、OPENAI_REASONING_SUMMARYnone/brief/detailedAnthropicANTHROPIC_THINKING_TYPEenabled、ANTHROPIC_THINKING_BUDGET_TOKENSGemini 2.5/3GOOGLE_THINKING_BUDGET、GOOGLE_THINKING_LEVEL自动开启includeThoughts: trueAWS BedrockBEDROCK_REASONING_BUDGET_TOKENS1024–64000、BEDROCK_REASONING_EFFORT。UI 层由 components/ai-elements/reasoning.tsx 渲染思考过程流式推送则经由 app/api/chat/route.ts 完成。3.5 图表历史与版本恢复对 AI 编辑前的每次变更做版本记录可回看并恢复历史版本。仓库中 components/history-dialog.tsx 提供了历史浏览对话框端到端测试 tests/e2e/history.spec.ts 与 tests/e2e/history-restore.spec.ts 覆盖了历史记录与恢复流程。3.6 交互式聊天界面在 components/chat 目录下可以看到完整的前端组件族ChatLobby、聊天面板、Tool 调用卡片、验证卡片等支持多轮对话中持续调整图表多轮会话管理在 hooks/use-session-manager.ts。3.7 云架构图专项支持专项支持 AWS、GCP、Azure 等云架构图的生成。docs/shape-libraries 提供了 alibaba_cloud、aws4、azure2、gcp2、kubernetes、openstack、sap 等大量形状库清单文档配合get_shape_library工具在生成前检索可用图标。3.8 动态连接线Animated Connectors可生成动态/动画连接线来增强可视化。仓库的public/animated_connectors.svg即一个 Transformer 架构动画连接线示例draw.io 侧边栏图库中亦随附public/下多个 SVG 演示素材。四、图表 XML 质量保障与长文本输出处理生成 draw.io 图表本质上是让模型产出格式严格的长文本 XML为此项目做了两层工程化设计输出 Token 上限与自动回退env.example 中MAX_OUTPUT_TOKENS默认 64,000由推理与 XML 共用当模型自身上限低于配置时会自动用该上限重试。app/api/chat/route.ts 中引入resolveMaxOutputTokens与withOutputTokenLimitFallback见 lib/output-token-limit.ts实现该回退逻辑。XML 校验与修复lib/diagram-validator.ts 及 lib/validation-schema.ts 负责对模型输出的 XML 做结构校验前端有对应的 components/chat/ValidationCard.tsx 展示校验结果tests/unit/diagram-validator.test.ts 覆盖了相关判定逻辑。系统提示词还约束模型在创建图表前先简述版面规划2–3 句避免图形重叠与连线交叉并要求通过display_diagram工具输出 XML而不是在普通聊天文本中夹带 XML见 lib/system-prompts.ts。五、对话到图表的调用链How It Works结合 app/api/chat/route.ts 与 lib/system-prompts.ts一次帮我画一个用户认证流程图的请求大致经历如下环节用户在聊天框输入自然语言 │ ▼ POST /api/chat Next.js Route Handlerapp/api/chat/route.ts │ · ACCESS_CODE_LIST 访问码校验可选 │ · 提取 sessionId / userIdLangfuse 追踪与配额 │ · 组装 messages 当前 diagram XML ▼ Vercel AI SDK streamText → 按 AI_PROVIDER/AI_MODEL 解析出模型实例 │ · 系统提示词描述 display_diagram / append_diagram 等工具 ▼ 模型产出工具调用display_diagram(xml) │ ▼ createUIMessageStreamResponse 以流式 UI 消息推回浏览器 ▼ 前端 DrawIoEmbedreact-drawio接收 XML 实时渲染其中的关键实现细节Provider 解析lib/ai-providers.ts 根据环境变量解析出统一的模型实例底层调用getAIModel并在 app/api/chat/route.ts 中配合服务端模型查找findServerModelById决策使用个人 Key 还是服务端模型。流式协议聊天接口采用ai包提供的createUIMessageStream/createUIMessageStreamResponse输出 UI 消息流tool-input-start→tool-input-delta→tool-input-available→finish其中display_diagram的完整 XML 会被逐步流入前端。图表渲染前端主页面 app/[lang]/page.tsx 通过DrawIoEmbed来自 react-drawio承载 draw.io 编辑器draw.io 的嵌入地址可用NEXT_PUBLIC_DRAWIO_BASE_URL指向自建实例默认https://embed.diagrams.net。图表状态保存与恢复会话与模板存储在 lib/session-storage.ts 与 lib/template-storage.ts并提供 tests/unit/template-storage.test.ts 等单元测试保障。若命中已缓存的图表响应见 lib/cached-responses.ts接口会直接以缓存 XML 构造同构的流式工具调用响应减少重复的 LLM 开销。六、效果示例从 Prompt 到成品图README 收录了多组提示词 生成结果的示例。例如下面的 RAG 架构图由提示词Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion生成而下面这张 Transformer 架构动态连接线图则由提示词Give me a animated connector diagram of transformers architecture生成体现了动态连接线能力的典型效果其余示例还包括 React AWS Serverless 认证流程public/auth.svg、开放式创新模型可视化public/inno.svg、随手涂鸦小猫public/cat_demo.svg等均可在 public/ 目录下找到原始 SVG作为评估模型输出质量的参照物。七、快速开始五种运行方式7.1 在线体验 自带 API KeyBYO Key无需安装即可访问官方 demo 站点体验。受 demo 站配额影响README 建议用户自带 API Key点击聊天面板中的 Settings 图标配置 Provider 与 API Key。Key 只保存在浏览器本地localStorage 层面不会上传到服务器。7.2 原生桌面应用Electron项目在 electron/ 目录下提供了完整的桌面端实现main/index.ts为主进程入口包含窗口管理、Next 服务启动next-server.ts、端口管理port-manager.ts、系统代理proxy-manager.ts等preload/提供 IPC 桥接。支持Windows、macOS、Linux三平台可从项目 Releases 页面下载各平台安装包。本地开发可用npm run electron:dev脚本见 package.json打包命令包括dist:win、dist:mac、dist:linux、dist:all。7.3 Docker 一键运行仓库内 Dockerfile、docker-compose.yml 与 docs/en/docker.md 提供了容器化方案。最简单的单命令启动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也可以把配置写入.env文件后整体注入cp env.example .env # 编辑 .env 填入你的配置 docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest对于服务端下发多个模型的场景可以把 ai-models.json 只读挂载进容器避免暴露用户 API Keydocker run -d -p 3000:3000 \ -e OPENAI_API_KEYyour_api_key \ -v $(pwd)/ai-models.json:/app/ai-models.json:ro \ ghcr.io/dayuanjiang/next-ai-draw-io:latest如需自定义配置文件在容器内的路径用AI_MODELS_CONFIG_PATH/config/ai-models.json指向即可。注意如果embed.diagrams.net被网络策略阻断请参考 离线部署指南 配置NEXT_PUBLIC_DRAWIO_BASE_URL指向自建 draw.io。7.4 源码本地运行从项目主页克隆仓库后执行npm install cp env.example .env.local npm run dev随后浏览器访问http://localhost:6002开发端口 6002 由 package.json 中next dev --turbopack --port 6002指定生产start端口为 6001。详细的各 Provider 配置见下文与 Provider 配置指南。7.5 客户端直连配置AI_PROVIDER决定使用哪家服务商AI_MODEL指定模型 ID二者为核心必填项自动探测若只配置了一个Provider 的 API Key系统会自动识别并使用该 Provider无需手写AI_PROVIDER多 Provider 并存若配置了多个 API Key则必须显式声明AI_PROVIDER如openai、anthropic、deepseek、bedrock等多模型快捷方式在单一 Provider 下AI_MODEL可用逗号分隔列出多个模型 ID第一个作为默认模型其余出现在前端模型选择器中。八、多 Provider 支持与配置详解README 列出的 Provider 覆盖面非常广env.example 为每家都准备了独立的*_API_KEY与*_BASE_URLDoubao豆包/火山方舟、AWS Bedrock默认、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、ModelScope、SGLang、Vercel AI Gateway、MiniMax、GLM、Qwen、Kimi、Qiniu、MiMo小米、Novita AI、Atlas Cloud。其中除 AWS Bedrock 与 OpenRouter 外其余 Provider均支持自定义 Endpoint*_BASE_URL可用于国内可直达的兼容端点或企业网关。下面按类整理常用的配置要点完整清单见 Provider 配置指南 与 env.example8.1 官方托管类 ProviderProvider必填变量示例说明OpenAIOPENAI_API_KEYAI_MODELgpt-4o可用OPENAI_BASE_URL指向任意 OpenAI 兼容服务AnthropicANTHROPIC_API_KEYAI_MODELclaude-sonnet-4-5-20250514也可改用ANTHROPIC_AUTH_TOKEN走Authorization: Bearer二者互斥Google GeminiGOOGLE_GENERATIVE_AI_API_KEYAI_MODELgemini-2.0-flash可选GOOGLE_BASE_URLGoogle Vertex AIGOOGLE_VERTEX_API_KEYAI_MODELgemini-2.0-flashExpress Mode 兼容边缘运行时Vercel/CloudflareAzure OpenAIAZURE_API_KEYAZURE_RESOURCE_NAMEAI_MODEL部署名也可用AZURE_BASE_URL替代资源名方式AWS BedrockAWS_REGIONAWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEYAI_MODELanthropic...在 Lambda/EC2 上会自动采用 IAM Role 凭证Vercel AI GatewayAI_GATEWAY_API_KEYAI_MODELopenai/gpt-4o模型格式为provider/model可选AI_GATEWAY_BASE_URL指向自建网关8.2 聚合/兼容端点类Provider必填变量示例说明OpenRouterOPENROUTER_API_KEYAI_MODELanthropic/claude-sonnet-4一个 Key 访问多家模型AIHubMixAIHUBMIX_API_KEYAI_MODELclaude-sonnet-4-5-20250929聚合 Claude/GPT/Gemini/DeepSeekDeepSeekDEEPSEEK_API_KEYAI_MODELdeepseek-chat性价比优先的选择SiliconFlowSILICONFLOW_API_KEYAI_MODELdeepseek-ai/DeepSeek-V3域名可在.com/.cn间切换ModelScopeMODELSCOPE_API_KEYAI_MODELQwen/Qwen3-...魔搭社区模型SGLangSGLANG_API_KEYAI_MODEL模型ID默认http://127.0.0.1:8000/v1可自托管推理8.3 本地与区域类Ollama完全本地/离线AI_PROVIDERollamaAI_MODELllama3.2可选OLLAMA_BASE_URLhttp://localhost:11434。README 特别提醒本地跑图表生成对模型要求较高除非本地运行 DeepSeek R1、Qwen3-235B 这类大模型否则实用性有限Doubao火山方舟DOUBAO_API_KEYAI_MODELdoubao-seed-1-8-251215等DOUBAO_BASE_URL默认https://ark.cn-beijing.volces.com/api/v3MiniMax / GLM / Qwen / Kimi / Qiniu / MiMo / Novita / Atlas Cloud均以*_API_KEY*_BASE_URL形式接入。例如 MiniMax 同时兼容 Anthropic 格式/anthropic与 OpenAI 格式/v1并区分大陆与海外端点Atlas Cloud 提供 OpenAI 兼容 API可一个连接访问 DeepSeek、Qwen、GLM、Kimi、MiniMax 等。8.4 温度与输出上限TEMPERATURE0 # 更确定性的输出绘图场景推荐 MAX_OUTPUT_TOKENS64000 # 推理与图表 XML 共享的输出上限README 特别提示推理类模型如 GPT-5.1不支持 temperature 的请保持TEMPERATURE不设置让模型使用其默认行为。九、服务端多模型配置Server-Side Multi-Model管理员可以为所有用户配置服务端模型用户无需自备 API Key。README 给出三种配置方法源码 lib/server-model-config.ts 的实现进一步揭示了它们的优先级Priority 1: AI_MODELS_CONFIG环境变量JSON 字符串 ← 云部署推荐 Priority 2: ai-models.json项目根目录文件 可用 AI_MODELS_CONFIG_PATH 指向自定义路径默认 ./ai-models.json Priority 3: AI_MODEL 逗号分隔多模型 AI_PROVIDER ← 单 Provider 快捷方式从源码看loadEnvServerModelsConfig()正是按此顺序依次尝试读取 JSON 字符串 → 读取配置文件 → 解析逗号分隔的AI_MODEL只有当AI_MODEL含逗号且AI_PROVIDER为已知 Provider 时才触发第三优先级否则会打印告警日志提示改用前两种方式。9.1 ai-models.json 配置样例{ providers: [ { name: OpenAI Production, provider: openai, models: [gpt-4o, gpt-4o-mini], default: true }, { name: Custom DeepSeek, provider: deepseek, models: [deepseek-chat], apiKeyEnv: MY_DEEPSEEK_KEY, baseUrlEnv: MY_DEEPSEEK_URL } ] }9.2 字段说明与 lib/server-model-config.ts 的 Zod Schema 一一对应字段必填说明name是展示名。允许同一 Provider 配置多套如 OpenAI Production 与 OpenAI Stagingprovider是Provider 类型openai、anthropic、google、bedrock等必须为已知 Provider否则校验失败models是模型 ID 列表每项至少 1 字符default否设为true时自动把该 Provider 的第一个模型选为默认模型apiKeyEnv否自定义 API Key 环境变量名。注意可传字符串或字符串数组数组用于多 Key 负载均衡baseUrlEnv否自定义 Base URL 的环境变量名从源码还可知服务端模型在运行时会被展平为server:slugified-name:modelId形式的内部 ID——name会被 slugify如 OpenAI Production →openai-production后拼进 ID从而保证同一 Provider 多套 Key 配置之间的唯一性。当未提供任何服务端配置时应用会回退到AI_PROVIDER/AI_MODEL环境变量方式README 中的回退规则与 lib/server-model-config.ts 源码一致。此外服务端模型与前端模型 UI 是同一套选择体系管理员保存的模型会在请求时与AI_MODELS_CONFIG/ai-models.json合并供所有用户使用。十、Admin 管理面板Web 化的服务端配置当不再满足于手改.env时可开启 Web 管理面板设置环境变量ADMIN_PASSWORD不设置则面板完全禁用访问/admin并登录对应实现位于 app/[lang]/admin/page.tsx下设 models-section.tsx、setting-field.tsx 等组件接口见 app/api/admin。面板可配置的内容据 docs/en/admin-panel.mdModels用与应用内设置一致的 UI 添加 Provider、API Key 与模型列表保存后成为面向所有用户的服务端模型并与环境变量中的AI_MODELS_CONFIG/ai-models.json在请求时合并面板本身不会改写这些 env 文件其他分区访问码Access Codes、生成参数、功能开关、可观测性Observability、配额Quota等保存后写入data/settings.json并立即生效无需重启少数如 Langfuse、DynamoDB 设置标记为 Restart Required。10.1 优先级规则面板保存的配置 环境变量 内置默认值删除面板中的某个已保存值后会回退到环境变量取值。10.2 运维注意点密钥以明文形式存储在data/settings.json文件权限 600务必保持该文件私密在无持久磁盘的 Serverless 平台Vercel、Cloudflare Workers上面板为只读须改用环境变量配置Docker 场景下data/目录通过 docker-compose.yml 的 volume 持久化NEXT_PUBLIC_*变量在构建期被烘焙进产物无法通过面板热修改。配套的服务端基础逻辑可在 lib/adminauth.ts、providers.ts、settings.ts、settings-registry.ts中查阅单元测试见 tests/unit/admin-settings.test.ts 与 tests/unit/admin-providers.test.ts。十一、MCP Server让 AI Agent 直接画图借助 Model Context ProtocolMCPNext AI Draw.io 可以把同样的图表能力开放给 Claude Desktop、Cursor、VS Code 等 AI Agent且图表在浏览器中实时预览。完整配置与排障手册见 packages/mcp-server/README.md。11.1 标准接入配置在任意 MCP 客户端的mcpServers中增加{ mcpServers: { drawio: { command: npx, args: [next-ai-drawio/mcp-serverlatest] } } }11.2 Claude Code CLI 一行接入claude mcp add drawio -- npx next-ai-drawio/mcp-serverlatest之后即可让 Claude 直接建图例如Create a flowchart showing user authentication with login, MFA, and session management图表会实时出现在浏览器中。11.3 暴露给 Agent 的工具集工具说明start_session打开浏览器并建立实时预览会话create_new_diagram从 XML 创建新图需xml参数load_diagram从磁盘加载.drawio文件支持压缩格式edit_diagram基于 ID 的单元格操作更新/新增/删除get_diagram获取当前图表 XMLexport_diagram导出为.drawio/.png/.svglist_pages列出多页签含 id、名称、index、单元格数add_page/rename_page/delete_page多页面的增/改/删拒绝删除最后一页工具入参的多页面定位page_id/page_name/page_index是可选的未指定时默认作用于第一页源码位于 packages/mcp-server/src会话与工具定义在index.ts页面操作辅助在pages.tsXML 校验在xml-validation.ts并配套了 packages/mcp-server/tests 下的 edit-gate、load-diagram、multi-page、server-wiring 等单元测试。11.4 运行架构┌─────────────────┐ stdio ┌─────────────────┐ │ Claude Desktop │ ─────────── │ MCP Server │ │ (AI Agent) │ │ (this package) │ └─────────────────┘ └────────┬────────┘ │ ┌────────▼────────┐ │ Embedded HTTP │ │ Server (:6002) │ └────────┬────────┘ │ ┌────────▼────────┐ │ Users Browser │ │ (draw.io embed) │ └─────────────────┘流程MCP Server 通过 stdio 接收 Agent 的工具调用 → 内置 HTTP 服务器提供 draw.io UI 并维护会话状态 → 浏览器轮询获得实时更新。11.5 MCP 环境变量变量默认值说明PORT6002内置 HTTP 服务端口占用时会自动尝试下一个可用端口最多到 6020DRAWIO_BASE_URLhttps://embed.diagrams.netdraw.io 嵌入地址私有/离线部署时改为自建实例安全敏感环境可将DRAWIO_BASE_URL指向公司自建 draw.io如docker run -d -p 8080:8080 jgraph/drawio自建后配置http://localhost:8080。若遇到 No active session 报错请先调用start_session若浏览器不刷新请确认 URL 带有?mcp会话参数。十二、部署到生产环境README 提供了三条主流部署路径全部围绕Next.js 应用 环境变量展开。12.1 腾讯 EdgeOne Pages通过一键部署按钮把仓库导入 EdgeOne Pages 即为对应构建配置。12.2 Vercel作为 Next.js 出品方Vercel 是最省事的托管选择。用 Deploy 按钮把仓库导入 Vercel并在 Dashboard 中务必补齐环境变量与.env.local保持一致。注意不要使用git clone本地构建产物直接上传——该应用依赖服务端环境变量注入。12.3 Cloudflare Workers借助 OpenNext 适配器opennextjs/cloudflare构建部署。相关脚本见 package.jsonnpm run preview # opennextjs-cloudflare build preview npm run deploy # opennextjs-cloudflare build deploy npm run upload # 构建后上传仓库内 open-next.config.ts、wrangler.jsonc 与 vercel.json 分别承载各平台构建参数详细步骤见 Cloudflare 部署指南。Cloudflare 路线同样受 Serverless 无持久磁盘限制——服务端多模型与访问码等配置应走环境变量参见上文 10.2。12.4 通用部署变量速查部署到子目录时可设置NEXT_PUBLIC_BASE_PATH如/nextaidrawio带前导斜杠空值表示根路径部署。若使用代理/反代且不希望放行内网 URL可把 SSRF 防护 相关开关ALLOW_PRIVATE_URLSfalse默认 true。ACCESS_CODE_LIST用逗号分隔配置访问码用于给公网站点加上一道使用门槛校验逻辑见 app/api/chat/route.ts。十三、模型选型建议与 FAQ13.1 对模型的能力要求README 强调该任务要求模型具备很强的长文本 严格格式约束draw.io XML生成能力推荐的模型包括Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1等README 罗列的推荐档位。此外若目标是云架构图带 AWS/Azure/GCP 官方 Logoclaude系列由于训练数据覆盖最多通常是首选若追求成本DeepSeek 更具性价比若关注隐私与完全离线运行选择 Ollama需较强本地硬件运行 DeepSeek R1 / Qwen3-235B 级别模型若想要一个 Key 通吃多模型OpenRouter 或聚合网关是灵活方案。13.2 常见问题与观测运行中遇到模型输出、Provider 鉴权、配额等高频问题可查阅 FAQ 文档。生产可观测方面可通过 LangfuseLANGFUSE_PUBLIC_KEY/LANGFUSE_SECRET_KEY/LANGFUSE_BASEURL接入 LLM 链路追踪与 Token 用量统计实现见 lib/langfuse.ts。13.3 在线 demo 的赞助与自托管提示在线 demo 站点的 API 消耗由豆包等赞助支持如需长期稳定使用自托管用户也可以设置NEXT_PUBLIC_SELFHOSTEDtrue以便在触发配额HTTP 429时展示自定义的自托管引导文案对应翻译键messageTokenSelfHosted、messageApiSelfHosted、tipSelfHosted见 lib/i18n/dictionaries。十四、项目健康度与社区多语言文档体系根目录 README.md 之外还提供 中文版、日文版 的完整入口文档以及 docker、cloudflare-deploy、offline-deployment、admin-panel、ai-providers、FAQ 等分主题指南每种均含 中文、英文、日文 三套开源协议Apache-2.0LICENSE质量保障单元测试tests/unit与 Playwright 端到端测试tests/e2e覆盖聊天、保存、上传、历史恢复、主题、多轮对话等关键路径运行命令npm run test与npm run test:e2eCI 与代码规范使用 Biome 做 lint/formatbiome.jsonnpm run check执行完整 CI 校验。至此从自然语言对话建图的产品形态、服务端模型与 Provider 的配置矩阵、Admin 面板的配置优先级到 MCP Server 的 Agent 化接入与三大云平台部署读者已可以基于本仓库独立搭建并二次定制一个 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考