Next AI Draw.io 如何从源码安装并配置 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 从源码跑起来并且让 AI 真正能生成 draw.io 图表需要完成一条链路克隆仓库 → 安装依赖 → 复制.env.example为.env.local并填入某个 AI 提供商的 API 密钥与模型名 →npm run dev启动开发服务 → 在浏览器中验证模型可用、图表能生成。本文按这条链路给出每一步的具体命令、配置项和验证方式适用对象是本地开发环境Docker 与线上部署方式见 docs/en/docker.md 和 docs/en/cloudflare-deploy.md不在本文范围内。一、克隆仓库并安装依赖按 README.md 的 Installation 部分在项目目录下执行git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.localcp env.example .env.local会生成 Next.js 本地开发读取的环境变量文件后续所有提供商配置都写在这个文件里。env.example 中每一类提供商的配置项都有注释说明改动前先对照注释能避免填错变量名。二、在 .env.local 中配置 AI 提供商env.example默认值是 AWS BedrockAI_PROVIDERbedrock如果你用其他提供商需要改AI_PROVIDER、AI_MODEL并填对应的密钥。各提供商的完整配置项和自定义 endpoint 说明见 docs/en/ai-providers.md下面给出几个常用主路径的最小配置。OpenAIOPENAI_API_KEYyour_api_key AI_MODELgpt-4o豆包火山引擎 ARKDOUBAO_API_KEYyour_api_key AI_MODELdoubao-seed-1-8-251215本地 OllamaAI_PROVIDERollama AI_MODELllama3.2 # 可选指向本地实例 OLLAMA_BASE_URLhttp://localhost:11434your_api_key是占位符替换为你在对应平台申请的真实密钥AI_MODEL填文档示例中的模型名也可以换成你账号下可用的同提供商模型。关于AI_PROVIDER的填写规则docs/en/ai-providers.md 的 Auto-Detection 一节说明只配置一个提供商的 API 密钥时系统会自动检测并使用该提供商可以不设置AI_PROVIDER配置了多个API 密钥时必须显式设置可选值google、openai、anthropic、aihubmix、deepseek、siliconflow、doubao、azure、bedrock、openrouter、ollama、gateway、sglang、modelscope、minimax、glm、qwen、kimi、qiniu、mimo等。如果只改AI_MODEL而密钥、AI_PROVIDER仍是默认值服务会用 Bedrock 凭证去请求你的模型验证时就会失败——这是跑不通时最常见的配置错位。可选配置TEMPERATURE0可降低输出随机性文档推荐用于图表生成但对 GPT-5.1 等推理类模型文档明确要求不要设置TEMPERATURE保持未设置即可。模型能力要求docs/en/ai-providers.md 指出该任务需要较强的模型能力生成长文本且严格遵循 draw.io XML 格式推荐 Claude Sonnet 4.5 / Opus 4.5README.md 还列出 GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 作为推荐模型。使用 Ollama 时除非本地跑的是 DeepSeek R1、Qwen3-235B 这类高能力模型否则文档认为一般不具备实用性。选弱模型时常见现象见文末排查部分。三、启动本地开发服务npm run dev该脚本实际执行next dev --turbopack --port 6002见 package.json所以本地开发地址是http://localhost:6002README 第 3 步也是让你在这个地址打开应用。四、验证配置是否生效有两条验证路径建议先用接口验证凭证再在页面上验证完整生成链路。1. 用 validate-model 接口验证凭证应用内置POST /api/validate-model接口app/api/validate-model/route.ts它会对指定提供商发起一次最小测试请求prompt 为 Say OK返回 JSON{ valid: true, responseTime: 320 }以上为文档代码中的成功响应结构responseTime为实测毫秒数不是固定值。验证失败时同样返回 HTTP 200但valid为false并带错误信息接口将底层错误映射为现象返回的 error401 / UnauthorizedInvalid API key404 / not foundModel not found429 / rate limitRate limited - try again laterECONNREFUSEDCannot connect to server可以用下面的命令直接验证provider、apiKey、modelId 换成你.env.local里配置的值curl -X POST http://localhost:6002/api/validate-model \ -H Content-Type: application/json \ -d {provider:openai,apiKey:你的API_KEY,baseUrl:https://api.openai.com/v1,modelId:gpt-4o}AWS Bedrock 的provider需传bedrock并且不传apiKey而是传awsAccessKeyId、awsSecretAccessKey、awsRegion三个字段缺少任一会返回 400 提示 AWS credentials are required。2. 在应用内测试并实际生成图表开发服务启动后应用内的模型配置弹窗在 API 密钥输入框旁带有 Test 按钮components/model-config-dialog.tsx点击即调用同一个/api/validate-model接口无需手动拼 curl。接口验证通过后在 http://localhost:6002 的聊天面板输入一条生成指令README Examples 一节的示例 prompt如 Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion能流式返回并渲染出 draw.io 图表即说明本地开发服务与 AI 提供商链路完整跑通。五、排查与限制自托管模型只输出思考过程、不出图docs/en/FAQ.md 第 3 条给出的可能原因模型太小建议 32B 参数以上、模型服务未开启 tool calling。以 vLLM 为例需要加参数开启工具调用python -m vllm.entrypoints.openai.api_server \ --model Qwen/Qwen3-32B \ --enable-auto-tool-choice \ --tool-call-parser hermes上传图片后提示 No Image Provided该模型不支持视觉如 Kimi K2、DeepSeek、Qwen 纯文本模型需换用支持 vision 的模型如 GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro或使用名称中带有vision/vl的模型。导出 PDF 无反应内嵌 draw.io 不支持直接导出 PDF依赖外部转换服务且在 iframe 中不可用文档给出的方案是先导出 PNG 再打印为 PDF。多模型场景如果只是想让多个同提供商模型出现在选择器里可用逗号分隔的AI_MODEL第一个为默认多个提供商或自定义apiKeyEnv/baseUrlEnv时使用AI_MODELS_CONFIG环境变量JSON 字符串或项目根目录的ai-models.json文件格式见 docs/en/ai-providers.md 的 Server-Side Multi-Model Configuration 一节。内网环境注意NEXT_PUBLIC_*是构建期变量默认会访问https://embed.diagrams.net加载 draw.io 编辑器内网被墙时需自建 draw.io 实例并在构建时传入NEXT_PUBLIC_DRAWIO_BASE_URL详见 docs/en/offline-deployment.md。跑通后如需调整服务器侧模型与功能开关可设置ADMIN_PASSWORD环境变量后访问/admin管理面板说明见 docs/en/admin-panel.md这是本地开发之外的下一步不影响本文链路本身。【免费下载链接】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），仅供参考 
长河君 · 2026/9/11 4:50:37 · 阅读 1.2k Next AI Draw.io 如何从源码安装并配置 AI 提供商跑通本地开发服务
Next AI Draw.io 如何从源码安装并配置 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 从源码跑起来并且让 AI 真正能生成 draw.io 图表需要完成一条链路克隆仓库 → 安装依赖 → 复制.env.example为.env.local并填入某个 AI 提供商的 API 密钥与模型名 →npm run dev启动开发服务 → 在浏览器中验证模型可用、图表能生成。本文按这条链路给出每一步的具体命令、配置项和验证方式适用对象是本地开发环境Docker 与线上部署方式见 docs/en/docker.md 和 docs/en/cloudflare-deploy.md不在本文范围内。一、克隆仓库并安装依赖按 README.md 的 Installation 部分在项目目录下执行git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.localcp env.example .env.local会生成 Next.js 本地开发读取的环境变量文件后续所有提供商配置都写在这个文件里。env.example 中每一类提供商的配置项都有注释说明改动前先对照注释能避免填错变量名。二、在 .env.local 中配置 AI 提供商env.example默认值是 AWS BedrockAI_PROVIDERbedrock如果你用其他提供商需要改AI_PROVIDER、AI_MODEL并填对应的密钥。各提供商的完整配置项和自定义 endpoint 说明见 docs/en/ai-providers.md下面给出几个常用主路径的最小配置。OpenAIOPENAI_API_KEYyour_api_key AI_MODELgpt-4o豆包火山引擎 ARKDOUBAO_API_KEYyour_api_key AI_MODELdoubao-seed-1-8-251215本地 OllamaAI_PROVIDERollama AI_MODELllama3.2 # 可选指向本地实例 OLLAMA_BASE_URLhttp://localhost:11434your_api_key是占位符替换为你在对应平台申请的真实密钥AI_MODEL填文档示例中的模型名也可以换成你账号下可用的同提供商模型。关于AI_PROVIDER的填写规则docs/en/ai-providers.md 的 Auto-Detection 一节说明只配置一个提供商的 API 密钥时系统会自动检测并使用该提供商可以不设置AI_PROVIDER配置了多个API 密钥时必须显式设置可选值google、openai、anthropic、aihubmix、deepseek、siliconflow、doubao、azure、bedrock、openrouter、ollama、gateway、sglang、modelscope、minimax、glm、qwen、kimi、qiniu、mimo等。如果只改AI_MODEL而密钥、AI_PROVIDER仍是默认值服务会用 Bedrock 凭证去请求你的模型验证时就会失败——这是跑不通时最常见的配置错位。可选配置TEMPERATURE0可降低输出随机性文档推荐用于图表生成但对 GPT-5.1 等推理类模型文档明确要求不要设置TEMPERATURE保持未设置即可。模型能力要求docs/en/ai-providers.md 指出该任务需要较强的模型能力生成长文本且严格遵循 draw.io XML 格式推荐 Claude Sonnet 4.5 / Opus 4.5README.md 还列出 GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 作为推荐模型。使用 Ollama 时除非本地跑的是 DeepSeek R1、Qwen3-235B 这类高能力模型否则文档认为一般不具备实用性。选弱模型时常见现象见文末排查部分。三、启动本地开发服务npm run dev该脚本实际执行next dev --turbopack --port 6002见 package.json所以本地开发地址是http://localhost:6002README 第 3 步也是让你在这个地址打开应用。四、验证配置是否生效有两条验证路径建议先用接口验证凭证再在页面上验证完整生成链路。1. 用 validate-model 接口验证凭证应用内置POST /api/validate-model接口app/api/validate-model/route.ts它会对指定提供商发起一次最小测试请求prompt 为 Say OK返回 JSON{ valid: true, responseTime: 320 }以上为文档代码中的成功响应结构responseTime为实测毫秒数不是固定值。验证失败时同样返回 HTTP 200但valid为false并带错误信息接口将底层错误映射为现象返回的 error401 / UnauthorizedInvalid API key404 / not foundModel not found429 / rate limitRate limited - try again laterECONNREFUSEDCannot connect to server可以用下面的命令直接验证provider、apiKey、modelId 换成你.env.local里配置的值curl -X POST http://localhost:6002/api/validate-model \ -H Content-Type: application/json \ -d {provider:openai,apiKey:你的API_KEY,baseUrl:https://api.openai.com/v1,modelId:gpt-4o}AWS Bedrock 的provider需传bedrock并且不传apiKey而是传awsAccessKeyId、awsSecretAccessKey、awsRegion三个字段缺少任一会返回 400 提示 AWS credentials are required。2. 在应用内测试并实际生成图表开发服务启动后应用内的模型配置弹窗在 API 密钥输入框旁带有 Test 按钮components/model-config-dialog.tsx点击即调用同一个/api/validate-model接口无需手动拼 curl。接口验证通过后在 http://localhost:6002 的聊天面板输入一条生成指令README Examples 一节的示例 prompt如 Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion能流式返回并渲染出 draw.io 图表即说明本地开发服务与 AI 提供商链路完整跑通。五、排查与限制自托管模型只输出思考过程、不出图docs/en/FAQ.md 第 3 条给出的可能原因模型太小建议 32B 参数以上、模型服务未开启 tool calling。以 vLLM 为例需要加参数开启工具调用python -m vllm.entrypoints.openai.api_server \ --model Qwen/Qwen3-32B \ --enable-auto-tool-choice \ --tool-call-parser hermes上传图片后提示 No Image Provided该模型不支持视觉如 Kimi K2、DeepSeek、Qwen 纯文本模型需换用支持 vision 的模型如 GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro或使用名称中带有vision/vl的模型。导出 PDF 无反应内嵌 draw.io 不支持直接导出 PDF依赖外部转换服务且在 iframe 中不可用文档给出的方案是先导出 PNG 再打印为 PDF。多模型场景如果只是想让多个同提供商模型出现在选择器里可用逗号分隔的AI_MODEL第一个为默认多个提供商或自定义apiKeyEnv/baseUrlEnv时使用AI_MODELS_CONFIG环境变量JSON 字符串或项目根目录的ai-models.json文件格式见 docs/en/ai-providers.md 的 Server-Side Multi-Model Configuration 一节。内网环境注意NEXT_PUBLIC_*是构建期变量默认会访问https://embed.diagrams.net加载 draw.io 编辑器内网被墙时需自建 draw.io 实例并在构建时传入NEXT_PUBLIC_DRAWIO_BASE_URL详见 docs/en/offline-deployment.md。跑通后如需调整服务器侧模型与功能开关可设置ADMIN_PASSWORD环境变量后访问/admin管理面板说明见 docs/en/admin-panel.md这是本地开发之外的下一步不影响本文链路本身。【免费下载链接】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），仅供参考