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, Visualize"（AI 驱动的图表创作工具：对话、绘制、可视化），其核心工作方式是：
图表被表示为 draw.io 可渲染的 XML；AI 处理你的自然语言指令，生成或修改这段 XML。
package.json 中显示项目基于Next.js 16.x + React 19，关键依赖集中在三块（对应 README 的 How It Works 一节）：
| 技术 | 作用 |
|---|---|
| Next.js | 前端框架与 App Router 路由，聊天界面与/admin管理面板均运行其上 |
Vercel AI SDK（ai+@ai-sdk/*） | 统一多种 Provider 的流式（streaming）对话响应与工具调用 |
react-drawio（react-drawio） | draw.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系列在训练时见过大量带云厂商 Logo（AWS、Azure、GCP）的 draw.io 图，因此做云架构图效果最佳；同时推荐使用支持视觉的模型（GPT-4o、Claude、Gemini）来获得最好的图片转图体验。
3.3 PDF 与文本文件上传
支持上传 PDF 与文本文件抽取内容来生成图表。环境变量ENABLE_PDF_INPUT默认开启，NEXT_PUBLIC_MAX_EXTRACTED_CHARS默认限制抽取 150,000 字符；实现上 package.json 引入unpdf，lib/pdf-utils.ts 负责抽取与文本预处理。
3.4 AI 推理过程显示（Reasoning Display）
对支持推理/思考过程的模型展示其思考链条，README 明确列出 OpenAI o1/o3、Gemini、Claude 等。对应地，env.example 给出大量模型级推理参数：
- OpenAI：
OPENAI_REASONING_EFFORT（minimal/low/medium/high）、OPENAI_REASONING_SUMMARY（none/brief/detailed）； - Anthropic：
ANTHROPIC_THINKING_TYPE=enabled、ANTHROPIC_THINKING_BUDGET_TOKENS； - Gemini 2.5/3：
GOOGLE_THINKING_BUDGET、GOOGLE_THINKING_LEVEL（自动开启includeThoughts: true）； - AWS Bedrock：
BEDROCK_REASONING_BUDGET_TOKENS（1024–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 Handler，app/api/chat/route.ts） │ · ACCESS_CODE_LIST 访问码校验（可选） │ · 提取 sessionId / userId（Langfuse 追踪与配额） │ · 组装 messages + 当前 diagram XML ▼ Vercel AI SDK streamText → 按 AI_PROVIDER/AI_MODEL 解析出模型实例 │ · 系统提示词描述 display_diagram / append_diagram 等工具 ▼ 模型产出工具调用：display_diagram(xml) │ ▼ createUIMessageStreamResponse 以流式 UI 消息推回浏览器 ▼ 前端 DrawIoEmbed（react-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 transformer's architecture"生成，体现了"动态连接线"能力的典型效果：
其余示例还包括 React + AWS Serverless 认证流程（public/auth.svg）、开放式创新模型可视化（public/inno.svg）、随手涂鸦小猫（public/cat_demo.svg）等，均可在 public/ 目录下找到原始 SVG，作为评估模型输出质量的参照物。
七、快速开始：五种运行方式
7.1 在线体验 + 自带 API Key（BYO 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_PROVIDER=openai \ -e AI_MODEL=gpt-4o \ -e OPENAI_API_KEY=your_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 Key）：
docker run -d -p 3000:3000 \ -e OPENAI_API_KEY=your_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_URL：
Doubao（豆包/火山方舟）、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.example）：
8.1 官方托管类 Provider
| Provider | 必填变量（示例） | 说明 |
|---|---|---|
| OpenAI | OPENAI_API_KEY+AI_MODEL=gpt-4o | 可用OPENAI_BASE_URL指向任意 OpenAI 兼容服务 |
| Anthropic | ANTHROPIC_API_KEY+AI_MODEL=claude-sonnet-4-5-20250514 | 也可改用ANTHROPIC_AUTH_TOKEN（走Authorization: Bearer），二者互斥 |
| Google Gemini | GOOGLE_GENERATIVE_AI_API_KEY+AI_MODEL=gemini-2.0-flash | 可选GOOGLE_BASE_URL |
| Google Vertex AI | GOOGLE_VERTEX_API_KEY+AI_MODEL=gemini-2.0-flash | Express Mode 兼容边缘运行时（Vercel/Cloudflare） |
| Azure OpenAI | AZURE_API_KEY+AZURE_RESOURCE_NAME+AI_MODEL=<部署名> | 也可用AZURE_BASE_URL替代资源名方式 |
| AWS Bedrock | AWS_REGION+AWS_ACCESS_KEY_ID+AWS_SECRET_ACCESS_KEY+AI_MODEL=anthropic... | 在 Lambda/EC2 上会自动采用 IAM Role 凭证 |
| Vercel AI Gateway | AI_GATEWAY_API_KEY+AI_MODEL=openai/gpt-4o | 模型格式为provider/model；可选AI_GATEWAY_BASE_URL指向自建网关 |
8.2 聚合/兼容端点类
| Provider | 必填变量（示例） | 说明 |
|---|---|---|
| OpenRouter | OPENROUTER_API_KEY+AI_MODEL=anthropic/claude-sonnet-4 | 一个 Key 访问多家模型 |
| AIHubMix | AIHUBMIX_API_KEY+AI_MODEL=claude-sonnet-4-5-20250929 | 聚合 Claude/GPT/Gemini/DeepSeek |
| DeepSeek | DEEPSEEK_API_KEY+AI_MODEL=deepseek-chat | 性价比优先的选择 |
| SiliconFlow | SILICONFLOW_API_KEY+AI_MODEL=deepseek-ai/DeepSeek-V3 | 域名可在.com/.cn间切换 |
| ModelScope | MODELSCOPE_API_KEY+AI_MODEL=Qwen/Qwen3-... | 魔搭社区模型 |
| SGLang | SGLANG_API_KEY+AI_MODEL=<模型ID> | 默认http://127.0.0.1:8000/v1，可自托管推理 |
8.3 本地与区域类
- Ollama（完全本地/离线）：
AI_PROVIDER=ollama+AI_MODEL=llama3.2，可选OLLAMA_BASE_URL=http://localhost:11434。README 特别提醒：本地跑图表生成对模型要求较高，除非本地运行 DeepSeek R1、Qwen3-235B 这类大模型，否则实用性有限； - Doubao（火山方舟）：
DOUBAO_API_KEY+AI_MODEL=doubao-seed-1-8-251215等，DOUBAO_BASE_URL默认https://ark.cn-beijing.volces.com/api/v3； - MiniMax / 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 温度与输出上限
TEMPERATURE=0 # 更确定性的输出（绘图场景推荐） MAX_OUTPUT_TOKENS=64000 # 推理与图表 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 Staging"） |
provider | 是 | 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.md）：
- Models：用与应用内设置一致的 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/admin（auth.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 Protocol（MCP），Next 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-server@latest"] } } }11.2 Claude Code CLI 一行接入
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest之后即可让 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 | 获取当前图表 XML |
export_diagram | 导出为.drawio/.png/.svg |
list_pages | 列出多页签（含 id、名称、index、单元格数） |
add_page/rename_page/delete_page | 多页面的增/改/删（拒绝删除最后一页） |
工具入参的多页面定位（page_id/page_name/page_index）是可选的，未指定时默认作用于第一页；源码位于 packages/mcp-server/src（会话与工具定义在index.ts，页面操作辅助在pages.ts，XML 校验在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) │ └────────┬────────┘ │ ┌────────▼────────┐ │ User's Browser │ │ (draw.io embed) │ └─────────────────┘流程：MCP Server 通过 stdio 接收 Agent 的工具调用 → 内置 HTTP 服务器提供 draw.io UI 并维护会话状态 → 浏览器轮询获得实时更新。
11.5 MCP 环境变量
| 变量 | 默认值 | 说明 |
|---|---|---|
PORT | 6002 | 内置 HTTP 服务端口；占用时会自动尝试下一个可用端口（最多到 6020） |
DRAWIO_BASE_URL | https://embed.diagrams.net | draw.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.json：
npm 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_URLS=false（默认 true）。ACCESS_CODE_LIST用逗号分隔配置访问码，用于给公网站点加上一道使用门槛（校验逻辑见 app/api/chat/route.ts）。
十三、模型选型建议与 FAQ
13.1 对模型的能力要求
README 强调：该任务要求模型具备很强的长文本 + 严格格式约束（draw.io XML）生成能力，推荐的模型包括Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1等（README 罗列的推荐档位）。此外：
- 若目标是云架构图（带 AWS/Azure/GCP 官方 Logo），
claude系列由于训练数据覆盖最多，通常是首选； - 若追求成本，DeepSeek 更具性价比；
- 若关注隐私与完全离线运行，选择 Ollama（需较强本地硬件，运行 DeepSeek R1 / Qwen3-235B 级别模型）；
- 若想要"一个 Key 通吃多模型"，OpenRouter 或聚合网关是灵活方案。
13.2 常见问题与观测
运行中遇到模型输出、Provider 鉴权、配额等高频问题，可查阅 FAQ 文档。生产可观测方面，可通过 Langfuse（LANGFUSE_PUBLIC_KEY/LANGFUSE_SECRET_KEY/LANGFUSE_BASEURL）接入 LLM 链路追踪与 Token 用量统计（实现见 lib/langfuse.ts）。
13.3 在线 demo 的赞助与自托管提示
在线 demo 站点的 API 消耗由豆包等赞助支持；如需长期稳定使用，自托管用户也可以设置NEXT_PUBLIC_SELFHOSTED=true，以便在触发配额（HTTP 429）时展示自定义的自托管引导文案（对应翻译键messageTokenSelfHosted、messageApiSelfHosted、tipSelfHosted，见 lib/i18n/dictionaries）。
十四、项目健康度与社区
- 多语言文档体系：根目录 README.md 之外，还提供 中文版、日文版 的完整入口文档，以及 docker、cloudflare-deploy、offline-deployment、admin-panel、ai-providers、FAQ 等分主题指南（每种均含 中文、英文、日文 三套）；
- 开源协议：Apache-2.0（LICENSE）；
- 质量保障：单元测试（tests/unit）与 Playwright 端到端测试（tests/e2e）覆盖聊天、保存、上传、历史恢复、主题、多轮对话等关键路径，运行命令
npm run test与npm run test:e2e； - CI 与代码规范：使用 Biome 做 lint/format（biome.json），
npm 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），仅供参考
