mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
docs: reorganize documentation into i18n folder structure (#466)
* docs: reorganize docs into en/cn/ja folders - Move documentation files into language-specific folders (en, cn, ja) - Add Chinese and Japanese translations for all docs - Extract Docker section from README to separate doc file - Update README to link to new doc locations * docs: fix links to new docs folder structure * docs: update README and provider docs * docs: fix broken import statements in cloudflare deploy guides * docs: sync CN/JA READMEs with EN structure and fix all paths
This commit is contained in:
Dayuan Jiang
244
docs/cn/README_CN.md
Normal file
244
docs/cn/README_CN.md
Normal file
@@ -0,0 +1,244 @@
|
||||
# Next AI Draw.io
|
||||
|
||||
<div align="center">
|
||||
|
||||
**AI驱动的图表创建工具 - 对话、绘制、可视化**
|
||||
|
||||
[English](../../README.md) | 中文 | [日本語](../ja/README_JA.md)
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
[](https://opensource.org/licenses/Apache-2.0)
|
||||
[](https://nextjs.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://github.com/sponsors/DayuanJiang)
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
</div>
|
||||
|
||||
一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
|
||||
|
||||
> 注：感谢 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) 的赞助支持，本项目的 Demo 现已接入强大的 K2-thinking 模型！
|
||||
|
||||
https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
|
||||
|
||||
## 目录
|
||||
- [Next AI Draw.io](#next-ai-drawio)
|
||||
- [目录](#目录)
|
||||
- [示例](#示例)
|
||||
- [功能特性](#功能特性)
|
||||
- [MCP服务器（预览）](#mcp服务器预览)
|
||||
- [Claude Code CLI](#claude-code-cli)
|
||||
- [快速开始](#快速开始)
|
||||
- [在线试用](#在线试用)
|
||||
- [桌面应用](#桌面应用)
|
||||
- [使用Docker运行](#使用docker运行)
|
||||
- [安装](#安装)
|
||||
- [部署](#部署)
|
||||
- [部署到腾讯云EdgeOne Pages](#部署到腾讯云edgeone-pages)
|
||||
- [部署到Vercel（推荐）](#部署到vercel推荐)
|
||||
- [部署到Cloudflare Workers](#部署到cloudflare-workers)
|
||||
- [多提供商支持](#多提供商支持)
|
||||
- [工作原理](#工作原理)
|
||||
- [支持与联系](#支持与联系)
|
||||
- [Star历史](#star历史)
|
||||
|
||||
## 示例
|
||||
|
||||
以下是一些示例提示词及其生成的图表：
|
||||
|
||||
<div align="center">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td colspan="2" valign="top" align="center">
|
||||
<strong>动画Transformer连接器</strong><br />
|
||||
<p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
|
||||
<img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>GCP架构图</strong><br />
|
||||
<p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
|
||||
<img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>AWS架构图</strong><br />
|
||||
<p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
|
||||
<img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>Azure架构图</strong><br />
|
||||
<p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
|
||||
<img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>猫咪素描</strong><br />
|
||||
<p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
|
||||
<img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## 功能特性
|
||||
|
||||
- **LLM驱动的图表创建**：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
|
||||
- **基于图像的图表复制**：上传现有图表或图像，让AI自动复制和增强
|
||||
- **PDF和文本文件上传**：上传PDF文档和文本文件，提取内容并从现有文档生成图表
|
||||
- **AI推理过程显示**：查看支持模型的AI思考过程（OpenAI o1/o3、Gemini、Claude等）
|
||||
- **图表历史记录**：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
|
||||
- **交互式聊天界面**：与AI实时对话来完善您的图表
|
||||
- **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
|
||||
- **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
|
||||
|
||||
## MCP服务器（预览）
|
||||
|
||||
> **预览功能**：此功能为实验性功能，可能不稳定。
|
||||
|
||||
通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"drawio": {
|
||||
"command": "npx",
|
||||
"args": ["@next-ai-drawio/mcp-server@latest"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
|
||||
```
|
||||
|
||||
然后让Claude创建图表：
|
||||
> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
|
||||
|
||||
图表会实时显示在浏览器中！
|
||||
|
||||
详情请参阅[MCP服务器README](../../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 在线试用
|
||||
|
||||
无需安装！直接在我们的演示站点试用：
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
> **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。
|
||||
|
||||
### 桌面应用
|
||||
|
||||
从 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载适用于您平台的原生桌面应用：
|
||||
|
||||
支持的平台：Windows、macOS、Linux。
|
||||
|
||||
### 使用Docker运行
|
||||
|
||||
[查看 Docker 指南](./docker.md)
|
||||
|
||||
### 安装
|
||||
|
||||
1. 克隆仓库：
|
||||
|
||||
```bash
|
||||
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
||||
cd next-ai-draw-io
|
||||
npm install
|
||||
cp env.example .env.local
|
||||
```
|
||||
|
||||
详细设置说明请参阅[提供商配置指南](./ai-providers.md)。
|
||||
|
||||
2. 运行开发服务器：
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. 在浏览器中打开 [http://localhost:6002](http://localhost:6002) 查看应用。
|
||||
|
||||
## 部署
|
||||
|
||||
### 部署到腾讯云EdgeOne Pages
|
||||
|
||||
您可以通过[腾讯云EdgeOne Pages](https://pages.edgeone.ai/zh)一键部署。
|
||||
|
||||
直接点击此按钮一键部署：
|
||||
[](https://console.cloud.tencent.com/edgeone/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
查看[腾讯云EdgeOne Pages文档](https://pages.edgeone.ai/zh/document/product-introduction)了解更多详情。
|
||||
|
||||
同时，通过腾讯云EdgeOne Pages部署，也会获得[每日免费的DeepSeek模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888)。
|
||||
|
||||
### 部署到Vercel（推荐）
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
|
||||
|
||||
查看[Next.js部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
|
||||
|
||||
### 部署到Cloudflare Workers
|
||||
|
||||
[查看 Cloudflare 部署指南](./cloudflare-deploy.md)
|
||||
|
||||
|
||||
## 多提供商支持
|
||||
|
||||
- [字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
|
||||
- AWS Bedrock（默认）
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
- DeepSeek
|
||||
- SiliconFlow
|
||||
- SGLang
|
||||
- Vercel AI Gateway
|
||||
|
||||
除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。
|
||||
|
||||
📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。
|
||||
|
||||
**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
|
||||
|
||||
注意：`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。
|
||||
|
||||
|
||||
## 工作原理
|
||||
|
||||
本应用使用以下技术：
|
||||
|
||||
- **Next.js**：用于前端框架和路由
|
||||
- **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持
|
||||
- **react-drawio**：用于图表表示和操作
|
||||
|
||||
图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
|
||||
|
||||
|
||||
## 支持与联系
|
||||
|
||||
**特别感谢[字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)赞助演示站点的 API Token 使用！** 注册火山引擎 ARK 平台即可获得50万免费Token！
|
||||
|
||||
如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！
|
||||
|
||||
如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：
|
||||
|
||||
- 邮箱：me[at]jiang.jp
|
||||
|
||||
## Star历史
|
||||
|
||||
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
||||
|
||||
---
|
||||
236
docs/cn/ai-providers.md
Normal file
236
docs/cn/ai-providers.md
Normal file
@@ -0,0 +1,236 @@
|
||||
# AI 提供商配置
|
||||
|
||||
本指南介绍如何为 next-ai-draw-io 配置不同的 AI 模型提供商。
|
||||
|
||||
## 快速开始
|
||||
|
||||
1. 将 `.env.example` 复制为 `.env.local`
|
||||
2. 设置所选提供商的 API 密钥
|
||||
3. 将 `AI_MODEL` 设置为所需的模型
|
||||
4. 运行 `npm run dev`
|
||||
|
||||
## 支持的提供商
|
||||
|
||||
### 豆包 (字节跳动火山引擎)
|
||||
|
||||
> **免费 Token**：在 [火山引擎 ARK 平台](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) 注册，即可获得所有模型 50 万免费 Token！
|
||||
|
||||
```bash
|
||||
DOUBAO_API_KEY=your_api_key
|
||||
AI_MODEL=doubao-seed-1-8-251215 # 或其他豆包模型
|
||||
```
|
||||
|
||||
### Google Gemini
|
||||
|
||||
```bash
|
||||
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
|
||||
AI_MODEL=gemini-2.0-flash
|
||||
```
|
||||
|
||||
可选的自定义端点：
|
||||
|
||||
```bash
|
||||
GOOGLE_BASE_URL=https://your-custom-endpoint
|
||||
```
|
||||
|
||||
### OpenAI
|
||||
|
||||
```bash
|
||||
OPENAI_API_KEY=your_api_key
|
||||
AI_MODEL=gpt-4o
|
||||
```
|
||||
|
||||
可选的自定义端点（用于 OpenAI 兼容服务）：
|
||||
|
||||
```bash
|
||||
OPENAI_BASE_URL=https://your-custom-endpoint/v1
|
||||
```
|
||||
|
||||
### Anthropic
|
||||
|
||||
```bash
|
||||
ANTHROPIC_API_KEY=your_api_key
|
||||
AI_MODEL=claude-sonnet-4-5-20250514
|
||||
```
|
||||
|
||||
可选的自定义端点：
|
||||
|
||||
```bash
|
||||
ANTHROPIC_BASE_URL=https://your-custom-endpoint
|
||||
```
|
||||
|
||||
### DeepSeek
|
||||
|
||||
```bash
|
||||
DEEPSEEK_API_KEY=your_api_key
|
||||
AI_MODEL=deepseek-chat
|
||||
```
|
||||
|
||||
可选的自定义端点：
|
||||
|
||||
```bash
|
||||
DEEPSEEK_BASE_URL=https://your-custom-endpoint
|
||||
```
|
||||
|
||||
### SiliconFlow (OpenAI 兼容)
|
||||
|
||||
```bash
|
||||
SILICONFLOW_API_KEY=your_api_key
|
||||
AI_MODEL=deepseek-ai/DeepSeek-V3 # 示例；使用任何 SiliconFlow 模型 ID
|
||||
```
|
||||
|
||||
可选的自定义端点（默认为推荐域名）：
|
||||
|
||||
```bash
|
||||
SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1 # 或 https://api.siliconflow.cn/v1
|
||||
```
|
||||
|
||||
### SGLang
|
||||
|
||||
```bash
|
||||
SGLANG_API_KEY=your_api_key
|
||||
AI_MODEL=your_model_id
|
||||
```
|
||||
|
||||
可选的自定义端点：
|
||||
|
||||
```bash
|
||||
SGLANG_BASE_URL=https://your-custom-endpoint/v1
|
||||
```
|
||||
|
||||
### Azure OpenAI
|
||||
|
||||
```bash
|
||||
AZURE_API_KEY=your_api_key
|
||||
AZURE_RESOURCE_NAME=your-resource-name # 必填：您的 Azure 资源名称
|
||||
AI_MODEL=your-deployment-name
|
||||
```
|
||||
|
||||
或者使用自定义端点代替资源名称：
|
||||
|
||||
```bash
|
||||
AZURE_API_KEY=your_api_key
|
||||
AZURE_BASE_URL=https://your-resource.openai.azure.com # AZURE_RESOURCE_NAME 的替代方案
|
||||
AI_MODEL=your-deployment-name
|
||||
```
|
||||
|
||||
可选的推理配置：
|
||||
|
||||
```bash
|
||||
AZURE_REASONING_EFFORT=low # 可选：low, medium, high
|
||||
AZURE_REASONING_SUMMARY=detailed # 可选：none, brief, detailed
|
||||
```
|
||||
|
||||
### AWS Bedrock
|
||||
|
||||
```bash
|
||||
AWS_REGION=us-west-2
|
||||
AWS_ACCESS_KEY_ID=your_access_key_id
|
||||
AWS_SECRET_ACCESS_KEY=your_secret_access_key
|
||||
AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
|
||||
```
|
||||
|
||||
注意：在 AWS 环境（Lambda、带有 IAM 角色的 EC2）中，凭证会自动从 IAM 角色获取。
|
||||
|
||||
### OpenRouter
|
||||
|
||||
```bash
|
||||
OPENROUTER_API_KEY=your_api_key
|
||||
AI_MODEL=anthropic/claude-sonnet-4
|
||||
```
|
||||
|
||||
可选的自定义端点：
|
||||
|
||||
```bash
|
||||
OPENROUTER_BASE_URL=https://your-custom-endpoint
|
||||
```
|
||||
|
||||
### Ollama (本地)
|
||||
|
||||
```bash
|
||||
AI_PROVIDER=ollama
|
||||
AI_MODEL=llama3.2
|
||||
```
|
||||
|
||||
可选的自定义 URL：
|
||||
|
||||
```bash
|
||||
OLLAMA_BASE_URL=http://localhost:11434
|
||||
```
|
||||
|
||||
### Vercel AI Gateway
|
||||
|
||||
Vercel AI Gateway 通过单个 API 密钥提供对多个 AI 提供商的统一访问。这简化了身份验证，让您无需管理多个 API 密钥即可在不同提供商之间切换。
|
||||
|
||||
**基本用法（Vercel 托管网关）：**
|
||||
|
||||
```bash
|
||||
AI_GATEWAY_API_KEY=your_gateway_api_key
|
||||
AI_MODEL=openai/gpt-4o
|
||||
```
|
||||
|
||||
**自定义网关 URL（用于本地开发或自托管网关）：**
|
||||
|
||||
```bash
|
||||
AI_GATEWAY_API_KEY=your_custom_api_key
|
||||
AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
|
||||
AI_MODEL=openai/gpt-4o
|
||||
```
|
||||
|
||||
模型格式使用 `provider/model` 语法：
|
||||
|
||||
- `openai/gpt-4o` - OpenAI GPT-4o
|
||||
- `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
|
||||
- `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
|
||||
|
||||
**配置说明：**
|
||||
|
||||
- 如果未设置 `AI_GATEWAY_BASE_URL`，则使用默认的 Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`)
|
||||
- 自定义基础 URL 适用于：
|
||||
- 使用自定义网关实例进行本地开发
|
||||
- 自托管 AI Gateway 部署
|
||||
- 企业代理配置
|
||||
- 当使用自定义基础 URL 时，必须同时提供 `AI_GATEWAY_API_KEY`
|
||||
|
||||
从 [Vercel AI Gateway 仪表板](https://vercel.com/ai-gateway) 获取您的 API 密钥。
|
||||
|
||||
## 自动检测
|
||||
|
||||
如果您只配置了**一个**提供商的 API 密钥，系统将自动检测并使用该提供商。无需设置 `AI_PROVIDER`。
|
||||
|
||||
如果您配置了**多个** API 密钥，则必须显式设置 `AI_PROVIDER`：
|
||||
|
||||
```bash
|
||||
AI_PROVIDER=google # 或：openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
|
||||
```
|
||||
|
||||
## 模型能力要求
|
||||
|
||||
此任务对模型能力要求极高，因为它涉及生成具有严格格式约束（draw.io XML）的长文本。
|
||||
|
||||
**推荐模型**：
|
||||
|
||||
- Claude Sonnet 4.5 / Opus 4.5
|
||||
|
||||
**关于 Ollama 的说明**：虽然支持将 Ollama 作为提供商，但除非您在本地运行像 DeepSeek R1 或 Qwen3-235B 这样的高性能模型，否则对于此用例通常不太实用。
|
||||
|
||||
## 温度设置 (Temperature)
|
||||
|
||||
您可以通过环境变量选择性地配置温度：
|
||||
|
||||
```bash
|
||||
TEMPERATURE=0 # 输出更具确定性（推荐用于图表）
|
||||
```
|
||||
|
||||
**重要提示**：对于不支持温度设置的模型（例如以下模型），请勿设置 `TEMPERATURE`：
|
||||
- GPT-5.1 和其他推理模型
|
||||
- 某些专用模型
|
||||
|
||||
未设置时，模型将使用其默认行为。
|
||||
|
||||
## 推荐
|
||||
|
||||
- **最佳体验**：使用支持视觉的模型（GPT-4o, Claude, Gemini）以获得图像转图表功能
|
||||
- **经济实惠**：DeepSeek 提供具有竞争力的价格
|
||||
- **隐私保护**：使用 Ollama 进行完全本地、离线的操作（需要强大的硬件支持）
|
||||
- **灵活性**：OpenRouter 通过单一 API 提供对众多模型的访问
|
||||
267
docs/cn/cloudflare-deploy.md
Normal file
267
docs/cn/cloudflare-deploy.md
Normal file
@@ -0,0 +1,267 @@
|
||||
# 部署到 Cloudflare Workers
|
||||
|
||||
本项目可以通过 **OpenNext 适配器** 部署为 **Cloudflare Worker**，为您提供：
|
||||
|
||||
- 全球边缘部署
|
||||
- 极低延迟
|
||||
- 免费的 `workers.dev` 域名托管
|
||||
- 通过 R2 实现完整的 Next.js ISR 支持（可选）
|
||||
|
||||
> **Windows 用户重要提示：** OpenNext 和 Wrangler 在 **原生 Windows 环境下并不完全可靠**。建议方案：
|
||||
>
|
||||
> - 使用 **GitHub Codespaces**（完美运行）
|
||||
> - 或者使用 **WSL (Linux)**
|
||||
>
|
||||
> 纯 Windows 构建可能会因为 WASM 文件路径问题而失败。
|
||||
|
||||
---
|
||||
|
||||
## 前置条件
|
||||
|
||||
1. 一个 **Cloudflare 账户**（免费版即可满足基本部署需求）
|
||||
2. **Node.js 18+**
|
||||
3. 安装 **Wrangler CLI**（作为开发依赖安装即可）：
|
||||
|
||||
```bash
|
||||
npm install -D wrangler
|
||||
```
|
||||
|
||||
4. 登录 Cloudflare：
|
||||
|
||||
```bash
|
||||
npx wrangler login
|
||||
```
|
||||
|
||||
> **注意：** 只有在启用 R2 进行 ISR 缓存时才需要绑定支付方式。基本的 Workers 部署是免费的。
|
||||
|
||||
---
|
||||
|
||||
## 第一步 — 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 第二步 — 配置环境变量
|
||||
|
||||
Cloudflare 在本地测试时使用不同的文件。
|
||||
|
||||
### 1) 创建 `.dev.vars`（用于 Cloudflare 本地调试 + 部署）
|
||||
|
||||
```bash
|
||||
cp env.example .dev.vars
|
||||
```
|
||||
|
||||
填入您的 API 密钥和配置信息。
|
||||
|
||||
### 2) 确保 `.env.local` 也存在（用于常规 Next.js 开发）
|
||||
|
||||
```bash
|
||||
cp env.example .env.local
|
||||
```
|
||||
|
||||
在此处填入相同的值。
|
||||
|
||||
---
|
||||
|
||||
## 第三步 — 选择部署类型
|
||||
|
||||
### 选项 A：不使用 R2 部署（简单，免费）
|
||||
|
||||
如果您不需要 ISR 缓存，可以选择不使用 R2 进行部署：
|
||||
|
||||
**1. 使用简单的 `open-next.config.ts`：**
|
||||
|
||||
```ts
|
||||
import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
|
||||
|
||||
export default defineCloudflareConfig({})
|
||||
```
|
||||
|
||||
**2. 使用简单的 `wrangler.jsonc`（不包含 r2_buckets）：**
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"$schema": "node_modules/wrangler/config-schema.json",
|
||||
"main": ".open-next/worker.js",
|
||||
"name": "next-ai-draw-io-worker",
|
||||
"compatibility_date": "2025-12-08",
|
||||
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||
"assets": {
|
||||
"directory": ".open-next/assets",
|
||||
"binding": "ASSETS"
|
||||
},
|
||||
"services": [
|
||||
{
|
||||
"binding": "WORKER_SELF_REFERENCE",
|
||||
"service": "next-ai-draw-io-worker"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
直接跳至 **第四步**。
|
||||
|
||||
---
|
||||
|
||||
### 选项 B：使用 R2 部署（完整的 ISR 支持）
|
||||
|
||||
R2 开启了 **增量静态再生 (ISR)** 缓存功能。需要在您的 Cloudflare 账户中绑定支付方式。
|
||||
|
||||
**1. 在 Cloudflare 控制台中创建 R2 存储桶：**
|
||||
|
||||
- 进入 **Storage & Databases → R2**
|
||||
- 点击 **Create bucket**
|
||||
- 命名为：`next-inc-cache`
|
||||
|
||||
**2. 配置 `open-next.config.ts`：**
|
||||
|
||||
```ts
|
||||
import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
|
||||
import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
|
||||
|
||||
export default defineCloudflareConfig({
|
||||
incrementalCache: r2IncrementalCache,
|
||||
})
|
||||
```
|
||||
|
||||
**3. 配置 `wrangler.jsonc`（包含 R2）：**
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"$schema": "node_modules/wrangler/config-schema.json",
|
||||
"main": ".open-next/worker.js",
|
||||
"name": "next-ai-draw-io-worker",
|
||||
"compatibility_date": "2025-12-08",
|
||||
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||
"assets": {
|
||||
"directory": ".open-next/assets",
|
||||
"binding": "ASSETS"
|
||||
},
|
||||
"r2_buckets": [
|
||||
{
|
||||
"binding": "NEXT_INC_CACHE_R2_BUCKET",
|
||||
"bucket_name": "next-inc-cache"
|
||||
}
|
||||
],
|
||||
"services": [
|
||||
{
|
||||
"binding": "WORKER_SELF_REFERENCE",
|
||||
"service": "next-ai-draw-io-worker"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> **重要提示：** `bucket_name` 必须与您在 Cloudflare 控制台中创建的名称完全一致。
|
||||
|
||||
---
|
||||
|
||||
## 第四步 — 注册 workers.dev 子域名（仅首次需要）
|
||||
|
||||
在首次部署之前，您需要一个 workers.dev 子域名。
|
||||
|
||||
**选项 1：通过 Cloudflare 控制台（推荐）**
|
||||
|
||||
访问：https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
|
||||
|
||||
**选项 2：在部署过程中**
|
||||
|
||||
运行 `npm run deploy` 时，Wrangler 可能会提示：
|
||||
|
||||
```
|
||||
Would you like to register a workers.dev subdomain? (Y/n)
|
||||
```
|
||||
|
||||
输入 `Y` 并选择一个子域名。
|
||||
|
||||
> **注意：** 在 CI/CD 或非交互式环境中，该提示不会出现。请先通过控制台进行注册。
|
||||
|
||||
---
|
||||
|
||||
## 第五步 — 部署到 Cloudflare
|
||||
|
||||
```bash
|
||||
npm run deploy
|
||||
```
|
||||
|
||||
该脚本执行的操作：
|
||||
|
||||
- 构建 Next.js 应用
|
||||
- 通过 OpenNext 将其转换为 Cloudflare Worker
|
||||
- 上传静态资源
|
||||
- 发布 Worker
|
||||
|
||||
您的应用将可通过以下地址访问：
|
||||
|
||||
```
|
||||
https://<worker-name>.<your-subdomain>.workers.dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常见问题与修复
|
||||
|
||||
### `You need to register a workers.dev subdomain`
|
||||
|
||||
**原因：** 您的账户尚未注册 workers.dev 子域名。
|
||||
|
||||
**修复：** 前往 https://dash.cloudflare.com → Workers & Pages → Set up a subdomain。
|
||||
|
||||
---
|
||||
|
||||
### `Please enable R2 through the Cloudflare Dashboard`
|
||||
|
||||
**原因：** wrangler.jsonc 中配置了 R2，但您的账户尚未启用该功能。
|
||||
|
||||
**修复：** 启用 R2（需要支付方式）或使用选项 A（不使用 R2 部署）。
|
||||
|
||||
---
|
||||
|
||||
### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
|
||||
|
||||
**原因：** `wrangler.jsonc` 中缺少 `r2_buckets` 配置。
|
||||
|
||||
**修复：** 添加 `r2_buckets` 部分或切换到选项 A（不使用 R2）。
|
||||
|
||||
---
|
||||
|
||||
### `Can't set compatibility date in the future`
|
||||
|
||||
**原因：** wrangler 配置中的 `compatibility_date` 设置为了未来的日期。
|
||||
|
||||
**修复：** 将 `compatibility_date` 修改为今天或更早的日期。
|
||||
|
||||
---
|
||||
|
||||
### Windows 错误：`resvg.wasm?module` (ENOENT)
|
||||
|
||||
**原因：** Windows 文件名不能包含 `?`，但某个 wasm 资源文件名中使用了 `?module`。
|
||||
|
||||
**修复：** 在 Linux 环境（WSL、Codespaces 或 CI）上进行构建/部署。
|
||||
|
||||
---
|
||||
|
||||
## 可选：本地预览
|
||||
|
||||
部署前在本地预览 Worker：
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 总结
|
||||
|
||||
| 功能 | 不使用 R2 | 使用 R2 |
|
||||
|---------|------------|---------|
|
||||
| 成本 | 免费 | 需要绑定支付方式 |
|
||||
| ISR 缓存 | 无 | 有 |
|
||||
| 静态页面 | 支持 | 支持 |
|
||||
| API 路由 | 支持 | 支持 |
|
||||
| 配置复杂度 | 简单 | 中等 |
|
||||
|
||||
测试或简单应用请选择 **不使用 R2**。需要 ISR 缓存的生产环境应用请选择 **使用 R2**。
|
||||
29
docs/cn/docker.md
Normal file
29
docs/cn/docker.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 使用 Docker 运行
|
||||
|
||||
如果您只是想在本地运行，最好的方式是使用 Docker。
|
||||
|
||||
首先，如果您尚未安装 Docker，请先安装：[获取 Docker](https://docs.docker.com/get-docker/)
|
||||
|
||||
然后运行：
|
||||
|
||||
```bash
|
||||
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
|
||||
```
|
||||
|
||||
或者使用环境变量文件：
|
||||
|
||||
```bash
|
||||
cp env.example .env
|
||||
# 编辑 .env 文件并填入您的配置
|
||||
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||
```
|
||||
|
||||
在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
|
||||
|
||||
请将环境变量替换为您首选的 AI 提供商配置。查看 [AI 提供商](./ai-providers.md) 了解可用选项。
|
||||
|
||||
> **离线部署：** 如果无法访问 `embed.diagrams.net`，请参阅 [离线部署](./offline-deployment.md) 了解配置选项。
|
||||
38
docs/cn/offline-deployment.md
Normal file
38
docs/cn/offline-deployment.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# 离线部署
|
||||
|
||||
通过自托管 draw.io 来替代 `embed.diagrams.net`，从而离线部署 Next AI Draw.io。
|
||||
|
||||
**注意：** `NEXT_PUBLIC_DRAWIO_BASE_URL` 是一个**构建时**变量。修改它需要重新构建 Docker 镜像。
|
||||
|
||||
## Docker Compose 设置
|
||||
|
||||
1. 克隆仓库并在 `.env` 文件中定义 API 密钥。
|
||||
2. 创建 `docker-compose.yml`：
|
||||
|
||||
```yaml
|
||||
services:
|
||||
drawio:
|
||||
image: jgraph/drawio:latest
|
||||
ports: ["8080:8080"]
|
||||
next-ai-draw-io:
|
||||
build:
|
||||
context: .
|
||||
args:
|
||||
- NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
|
||||
ports: ["3000:3000"]
|
||||
env_file: .env
|
||||
depends_on: [drawio]
|
||||
```
|
||||
|
||||
3. 运行 `docker compose up -d` 并打开 `http://localhost:3000`。
|
||||
|
||||
## 配置与重要警告
|
||||
|
||||
**`NEXT_PUBLIC_DRAWIO_BASE_URL` 必须是用户浏览器可访问的地址。**
|
||||
|
||||
| 场景 | URL 值 |
|
||||
|----------|-----------|
|
||||
| 本地主机 (Localhost) | `http://localhost:8080` |
|
||||
| 远程/服务器 | `http://YOUR_SERVER_IP:8080` |
|
||||
|
||||
**切勿使用** Docker 内部别名（如 `http://drawio:8080`），因为浏览器无法解析它们。
|
||||
Reference in New Issue
Block a user