From aaa2938dacac8c301bd25dc6e741619c7567df26 Mon Sep 17 00:00:00 2001 From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com> Date: Wed, 31 Dec 2025 00:04:32 +0900 Subject: [PATCH] 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 --- README.md | 110 +------- docs/{ => cn}/README_CN.md | 119 +++----- docs/cn/ai-providers.md | 236 ++++++++++++++++ docs/cn/cloudflare-deploy.md | 267 ++++++++++++++++++ docs/cn/docker.md | 29 ++ docs/cn/offline-deployment.md | 38 +++ docs/{ => en}/ai-providers.md | 13 +- .../cloudflare-deploy.md} | 0 docs/en/docker.md | 29 ++ docs/{ => en}/offline-deployment.md | 0 docs/{ => ja}/README_JA.md | 119 +++----- docs/ja/ai-providers.md | 236 ++++++++++++++++ docs/ja/cloudflare-deploy.md | 267 ++++++++++++++++++ docs/ja/docker.md | 29 ++ docs/ja/offline-deployment.md | 38 +++ 15 files changed, 1262 insertions(+), 268 deletions(-) rename docs/{ => cn}/README_CN.md (66%) create mode 100644 docs/cn/ai-providers.md create mode 100644 docs/cn/cloudflare-deploy.md create mode 100644 docs/cn/docker.md create mode 100644 docs/cn/offline-deployment.md rename docs/{ => en}/ai-providers.md (96%) rename docs/{Cloudflare_Deploy.md => en/cloudflare-deploy.md} (100%) create mode 100644 docs/en/docker.md rename docs/{ => en}/offline-deployment.md (100%) rename docs/{ => ja}/README_JA.md (67%) create mode 100644 docs/ja/ai-providers.md create mode 100644 docs/ja/cloudflare-deploy.md create mode 100644 docs/ja/docker.md create mode 100644 docs/ja/offline-deployment.md diff --git a/README.md b/README.md index 422bf20..6d7b405 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ **AI-Powered Diagram Creation Tool - Chat, Draw, Visualize** -English | [中文](./docs/README_CN.md) | [日本語](./docs/README_JA.md) +English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md) [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/) @@ -36,14 +36,14 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1 - [Getting Started](#getting-started) - [Try it Online](#try-it-online) - [Desktop Application](#desktop-application) - - [Run with Docker (Recommended)](#run-with-docker-recommended) + - [Run with Docker](#run-with-docker) - [Installation](#installation) - [Deployment](#deployment) + - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages) - [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended) - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers) - [Multi-Provider Support](#multi-provider-support) - [How It Works](#how-it-works) - - [Project Structure](#project-structure) - [Support \& Contact](#support--contact) - [Star History](#star-history) @@ -100,7 +100,7 @@ Here are some example prompts and their generated diagrams: ## MCP Server (Preview) -> **Preview Feature**: This feature is experimental and may not stable. +> **Preview Feature**: This feature is experimental and may not be stable. Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol). @@ -144,53 +144,11 @@ No installation needed! Try the app directly on our demo site: Download the native desktop app for your platform from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases): -| Platform | Download | -|----------|----------| -| macOS | `.dmg` (Intel & Apple Silicon) | -| Windows | `.exe` installer (x64 & ARM64) | -| Linux | `.AppImage` or `.deb` (x64 & ARM64) | +Supported platforms: Windows, macOS, Linux. -**Features:** -- **Secure API key storage**: Credentials encrypted using OS keychain -- **Configuration presets**: Save and switch between AI providers via menu -- **Native file dialogs**: Open/save `.drawio` files directly -- **Offline capable**: Works without internet after first launch +### Run with Docker -**Quick Setup:** -1. Download and install for your platform -2. Open the app → **Menu → Configuration → Manage Presets** -3. Add your AI provider credentials -4. Start creating diagrams! - -### Run with Docker (Recommended) - -If you just want to run it locally, the best way is to use Docker. - -First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/) - -Then run: - -```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 -``` - -Or use an env file: - -```bash -cp env.example .env -# Edit .env with your configuration -docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest -``` - -Open [http://localhost:3000](http://localhost:3000) in your browser. - -Replace the environment variables with your preferred AI provider configuration. See [Multi-Provider Support](#multi-provider-support) for available options. - -> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./docs/offline-deployment.md) for configuration options. +[Go to Docker Guide](./docs/en/docker.md) ### Installation @@ -199,41 +157,19 @@ Replace the environment variables with your preferred AI provider configuration. ```bash git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io -``` - -2. Install dependencies: - -```bash npm install -``` - -3. Configure your AI provider: - -Create a `.env.local` file in the root directory: - -```bash cp env.example .env.local ``` -Edit `.env.local` and configure your chosen provider: +See the [Provider Configuration Guide](./docs/en/ai-providers.md) for detailed setup instructions for each provider. -- Set `AI_PROVIDER` to your chosen provider (doubao,bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow) -- Set `AI_MODEL` to the specific model you want to use -- Add the required API keys for your provider -- `TEMPERATURE`: Optional temperature setting (e.g., `0` for deterministic output). Leave unset for models that don't support it (e.g., reasoning models). -- `ACCESS_CODE_LIST`: Optional access password(s), can be comma-separated for multiple passwords. - -> Warning: If you do not set `ACCESS_CODE_LIST`, anyone can access your deployed site directly, which may lead to rapid depletion of your token. It is recommended to set this option. - -See the [Provider Configuration Guide](./docs/ai-providers.md) for detailed setup instructions for each provider. - -4. Run the development server: +2. Run the development server: ```bash npm run dev ``` -5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. +3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application. ## Deployment @@ -259,7 +195,7 @@ See the [Next.js deployment documentation](https://nextjs.org/docs/app/building- ### Deploy on Cloudflare Workers -[Go to Cloudflare Deploy Guide](./docs/Cloudflare_Deploy.md) +[Go to Cloudflare Deploy Guide](./docs/en/cloudflare-deploy.md) @@ -275,15 +211,17 @@ See the [Next.js deployment documentation](https://nextjs.org/docs/app/building- - OpenRouter - DeepSeek - SiliconFlow +- SGLang +- Vercel AI Gateway All providers except AWS Bedrock and OpenRouter support custom endpoints. -📖 **[Detailed Provider Configuration Guide](./docs/ai-providers.md)** - See setup instructions for each provider. +📖 **[Detailed Provider Configuration Guide](./docs/en/ai-providers.md)** - See setup instructions for each provider. **Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1. -Note that `claude` series has trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice. +Note that the `claude` series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice. ## How It Works @@ -296,24 +234,6 @@ The application uses the following technologies: Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly. -## Project Structure - -``` -app/ # Next.js App Router - api/chat/ # Chat API endpoint with AI tools - page.tsx # Main page with DrawIO embed -components/ # React components - chat-panel.tsx # Chat interface with diagram control - chat-input.tsx # User input component with file upload - history-dialog.tsx # Diagram version history viewer - ui/ # UI components (buttons, cards, etc.) -contexts/ # React context providers - diagram-context.tsx # Global diagram state management -lib/ # Utility functions and helpers - ai-providers.ts # Multi-provider AI configuration - utils.ts # XML processing and conversion utilities -public/ # Static assets including example images -``` ## Support & Contact diff --git a/docs/README_CN.md b/docs/cn/README_CN.md similarity index 66% rename from docs/README_CN.md rename to docs/cn/README_CN.md index 91f7a72..64e3587 100644 --- a/docs/README_CN.md +++ b/docs/cn/README_CN.md @@ -4,7 +4,7 @@ **AI驱动的图表创建工具 - 对话、绘制、可视化** -[English](../README.md) | 中文 | [日本語](./README_JA.md) +[English](../../README.md) | 中文 | [日本語](../ja/README_JA.md) [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/) @@ -13,7 +13,7 @@ [![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/) [![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang) -[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) +[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) @@ -29,14 +29,18 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 - [示例](#示例) - [功能特性](#功能特性) - [MCP服务器（预览）](#mcp服务器预览) + - [Claude Code CLI](#claude-code-cli) - [快速开始](#快速开始) - [在线试用](#在线试用) - - [使用Docker运行（推荐）](#使用docker运行推荐) + - [桌面应用](#桌面应用) + - [使用Docker运行](#使用docker运行) - [安装](#安装) - [部署](#部署) + - [部署到腾讯云EdgeOne Pages](#部署到腾讯云edgeone-pages) + - [部署到Vercel（推荐）](#部署到vercel推荐) + - [部署到Cloudflare Workers](#部署到cloudflare-workers) - [多提供商支持](#多提供商支持) - [工作原理](#工作原理) - - [项目结构](#项目结构) - [支持与联系](#支持与联系) - [Star历史](#star历史) @@ -50,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 动画Transformer连接器

提示词： 给我一个带有**动画连接器**的Transformer架构图。

- 带动画连接器的Transformer架构 + 带动画连接器的Transformer架构 GCP架构图

提示词： 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。

- GCP架构图 + GCP架构图 AWS架构图

提示词： 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。

- AWS架构图 + AWS架构图 Azure架构图

提示词： 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。

- Azure架构图 + Azure架构图 猫咪素描

提示词： 给我画一只可爱的猫。

- 猫咪绘图 + 猫咪绘图 @@ -93,7 +97,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 ## MCP服务器（预览） -> **预览功能**：此功能为实验性功能，可能会有变化。 +> **预览功能**：此功能为实验性功能，可能不稳定。 通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。 @@ -119,7 +123,7 @@ claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest 图表会实时显示在浏览器中！ -详情请参阅[MCP服务器README](../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。 +详情请参阅[MCP服务器README](../../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。 ## 快速开始 @@ -127,39 +131,19 @@ claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest 无需安装！直接在我们的演示站点试用： -[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) +[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) > **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。 -### 使用Docker运行（推荐） +### 桌面应用 -如果您只想在本地运行，最好的方式是使用Docker。 +从 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载适用于您平台的原生桌面应用： -首先，如果您还没有安装Docker，请先安装：[获取Docker](https://docs.docker.com/get-docker/) +支持的平台：Windows、macOS、Linux。 -然后运行： +### 使用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 -``` - -或者使用 env 文件： - -```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提供商配置替换环境变量。可用选项请参阅[多提供商支持](#多提供商支持)。 - -> **离线部署：** 如果 `embed.diagrams.net` 被屏蔽，请参阅 [离线部署指南](./offline-deployment.md) 了解配置选项。 +[查看 Docker 指南](./docker.md) ### 安装 @@ -168,41 +152,19 @@ docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:l ```bash git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io -``` - -2. 安装依赖： - -```bash npm install -``` - -3. 配置您的AI提供商： - -在根目录创建 `.env.local` 文件： - -```bash cp env.example .env.local ``` -编辑 `.env.local` 并配置您选择的提供商： - -- 将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, doubao） -- 将 `AI_MODEL` 设置为您要使用的特定模型 -- 添加您的提供商所需的API密钥 -- `TEMPERATURE`：可选的温度设置（例如 `0` 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置。 -- `ACCESS_CODE_LIST` 访问密码，可选，可以使用逗号隔开多个密码。 - -> 警告：如果不填写 `ACCESS_CODE_LIST`，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。 - 详细设置说明请参阅[提供商配置指南](./ai-providers.md)。 -4. 运行开发服务器： +2. 运行开发服务器： ```bash npm run dev ``` -5. 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用。 +3. 在浏览器中打开 [http://localhost:6002](http://localhost:6002) 查看应用。 ## 部署 @@ -217,16 +179,17 @@ npm run dev 同时，通过腾讯云EdgeOne Pages部署，也会获得[每日免费的DeepSeek模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888)。 -### 部署到Vercel +### 部署到Vercel（推荐） -部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。 +[![Deploy with Vercel](https://vercel.com/button)](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)了解更多详情。 -或者您可以通过此按钮部署： -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) +### 部署到Cloudflare Workers -请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。 +[查看 Cloudflare 部署指南](./cloudflare-deploy.md) ## 多提供商支持 @@ -241,14 +204,16 @@ npm run dev - OpenRouter - DeepSeek - SiliconFlow +- SGLang +- Vercel AI Gateway 除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。 📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。 -**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用Claude Sonnet 4.5、GPT-4o、Gemini 2.0和DeepSeek V3/R1。 +**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。 -注意：`claude-sonnet-4-5` 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。 +注意：`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。 ## 工作原理 @@ -261,24 +226,6 @@ npm run dev 图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。 -## 项目结构 - -``` -app/ # Next.js App Router - api/chat/ # 带AI工具的聊天API端点 - page.tsx # 带DrawIO嵌入的主页面 -components/ # React组件 - chat-panel.tsx # 带图表控制的聊天界面 - chat-input.tsx # 带文件上传的用户输入组件 - history-dialog.tsx # 图表版本历史查看器 - ui/ # UI组件（按钮、卡片等） -contexts/ # React上下文提供者 - diagram-context.tsx # 全局图表状态管理 -lib/ # 工具函数和辅助程序 - ai-providers.ts # 多提供商AI配置 - utils.ts # XML处理和转换工具 -public/ # 静态资源包括示例图片 -``` ## 支持与联系 diff --git a/docs/cn/ai-providers.md b/docs/cn/ai-providers.md new file mode 100644 index 0000000..25e5e31 --- /dev/null +++ b/docs/cn/ai-providers.md @@ -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 提供对众多模型的访问 diff --git a/docs/cn/cloudflare-deploy.md b/docs/cn/cloudflare-deploy.md new file mode 100644 index 0000000..834d3b1 --- /dev/null +++ b/docs/cn/cloudflare-deploy.md @@ -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://..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**。 diff --git a/docs/cn/docker.md b/docs/cn/docker.md new file mode 100644 index 0000000..d533fa1 --- /dev/null +++ b/docs/cn/docker.md @@ -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) 了解配置选项。 diff --git a/docs/cn/offline-deployment.md b/docs/cn/offline-deployment.md new file mode 100644 index 0000000..982e849 --- /dev/null +++ b/docs/cn/offline-deployment.md @@ -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`），因为浏览器无法解析它们。 diff --git a/docs/ai-providers.md b/docs/en/ai-providers.md similarity index 96% rename from docs/ai-providers.md rename to docs/en/ai-providers.md index d66f118..0f0b0d1 100644 --- a/docs/ai-providers.md +++ b/docs/en/ai-providers.md @@ -85,7 +85,18 @@ Optional custom endpoint (defaults to the recommended domain): SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1 # or https://api.siliconflow.cn/v1 ``` +### SGLang +```bash +SGLANG_API_KEY=your_api_key +AI_MODEL=your_model_id +``` + +Optional custom endpoint: + +```bash +SGLANG_BASE_URL=https://your-custom-endpoint/v1 +``` ### Azure OpenAI @@ -190,7 +201,7 @@ If you only configure **one** provider's API key, the system will automatically If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`: ```bash -AI_PROVIDER=google # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway +AI_PROVIDER=google # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang ``` ## Model Capability Requirements diff --git a/docs/Cloudflare_Deploy.md b/docs/en/cloudflare-deploy.md similarity index 100% rename from docs/Cloudflare_Deploy.md rename to docs/en/cloudflare-deploy.md diff --git a/docs/en/docker.md b/docs/en/docker.md new file mode 100644 index 0000000..d0e6d36 --- /dev/null +++ b/docs/en/docker.md @@ -0,0 +1,29 @@ +# Run with Docker + +If you just want to run it locally, the best way is to use Docker. + +First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/) + +Then run: + +```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 +``` + +Or use an env file: + +```bash +cp env.example .env +# Edit .env with your configuration +docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest +``` + +Open [http://localhost:3000](http://localhost:3000) in your browser. + +Replace the environment variables with your preferred AI provider configuration. See [AI Providers](./ai-providers.md) for available options. + +> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./offline-deployment.md) for configuration options. diff --git a/docs/offline-deployment.md b/docs/en/offline-deployment.md similarity index 100% rename from docs/offline-deployment.md rename to docs/en/offline-deployment.md diff --git a/docs/README_JA.md b/docs/ja/README_JA.md similarity index 67% rename from docs/README_JA.md rename to docs/ja/README_JA.md index edbd1bd..c5ae2a2 100644 --- a/docs/README_JA.md +++ b/docs/ja/README_JA.md @@ -4,7 +4,7 @@ **AI搭載のダイアグラム作成ツール - チャット、描画、可視化** -[English](../README.md) | [中文](./README_CN.md) | 日本語 +[English](../../README.md) | [中文](../cn/README_CN.md) | 日本語 [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/) @@ -13,7 +13,7 @@ [![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/) [![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang) -[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) +[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) @@ -29,14 +29,18 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 - [例](#例) - [機能](#機能) - [MCPサーバー（プレビュー）](#mcpサーバープレビュー) + - [Claude Code CLI](#claude-code-cli) - [はじめに](#はじめに) - [オンラインで試す](#オンラインで試す) - - [Dockerで実行（推奨）](#dockerで実行推奨) + - [デスクトップアプリケーション](#デスクトップアプリケーション) + - [Dockerで実行](#dockerで実行) - [インストール](#インストール) - [デプロイ](#デプロイ) + - [EdgeOne Pagesへのデプロイ](#edgeone-pagesへのデプロイ) + - [Vercelへのデプロイ（推奨）](#vercelへのデプロイ推奨) + - [Cloudflare Workersへのデプロイ](#cloudflare-workersへのデプロイ) - [マルチプロバイダーサポート](#マルチプロバイダーサポート) - [仕組み](#仕組み) - - [プロジェクト構造](#プロジェクト構造) - [サポート＆お問い合わせ](#サポートお問い合わせ) - [スター履歴](#スター履歴) @@ -50,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 アニメーションTransformerコネクタ

プロンプト： **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。

- アニメーションコネクタ付きTransformerアーキテクチャ + アニメーションコネクタ付きTransformerアーキテクチャ GCPアーキテクチャ図

プロンプト： **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。

- GCPアーキテクチャ図 + GCPアーキテクチャ図 AWSアーキテクチャ図

プロンプト： **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。

- AWSアーキテクチャ図 + AWSアーキテクチャ図 Azureアーキテクチャ図

プロンプト： **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。

- Azureアーキテクチャ図 + Azureアーキテクチャ図 猫のスケッチ

プロンプト： かわいい猫を描いてください。

- 猫の絵 + 猫の絵 @@ -93,7 +97,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 ## MCPサーバー（プレビュー） -> **プレビュー機能**：この機能は実験的であり、変更される可能性があります。 +> **プレビュー機能**：この機能は実験的であり、安定しない可能性があります。 MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。 @@ -119,7 +123,7 @@ Claudeにダイアグラムの作成を依頼： ダイアグラムがリアルタイムでブラウザに表示されます！ -詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。 +詳細は[MCPサーバーREADME](../../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。 ## はじめに @@ -127,39 +131,19 @@ Claudeにダイアグラムの作成を依頼： インストール不要！デモサイトで直接お試しください： -[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) +[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) > **自分のAPIキーを使用**：自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。 -### Dockerで実行（推奨） +### デスクトップアプリケーション -ローカルで実行したいだけなら、Dockerを使用するのが最も簡単です。 +[Releases ページ](https://github.com/DayuanJiang/next-ai-draw-io/releases)からお使いのプラットフォーム用のネイティブデスクトップアプリをダウンロードしてください： -まず、Dockerをインストールしていない場合はインストールしてください：[Dockerを入手](https://docs.docker.com/get-docker/) +対応プラットフォーム：Windows、macOS、Linux。 -次に実行： +### 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 -``` - -または env ファイルを使用： - -```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プロバイダー設定に置き換えてください。利用可能なオプションについては[マルチプロバイダーサポート](#マルチプロバイダーサポート)を参照してください。 - -> **オフラインデプロイ：** `embed.diagrams.net` がブロックされている場合は、[オフラインデプロイガイド](./offline-deployment.md) で設定オプションをご確認ください。 +[Docker ガイドを参照](./docker.md) ### インストール @@ -168,41 +152,19 @@ docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:l ```bash git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io -``` - -2. 依存関係をインストール： - -```bash npm install -``` - -3. AIプロバイダーを設定： - -ルートディレクトリに`.env.local`ファイルを作成： - -```bash cp env.example .env.local ``` -`.env.local`を編集して選択したプロバイダーを設定： - -- `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, doubao） -- `AI_MODEL`を使用する特定のモデルに設定 -- プロバイダーに必要なAPIキーを追加 -- `TEMPERATURE`：オプションの温度設定（例：`0`で決定論的な出力）。温度をサポートしないモデル（推論モデルなど）では設定しないでください。 -- `ACCESS_CODE_LIST` アクセスパスワード（オプション）。カンマ区切りで複数のパスワードを指定できます。 - -> 警告：`ACCESS_CODE_LIST`を設定しない場合、誰でもデプロイされたサイトに直接アクセスできるため、トークンが急速に消費される可能性があります。このオプションを設定することをお勧めします。 - 詳細な設定手順については[プロバイダー設定ガイド](./ai-providers.md)を参照してください。 -4. 開発サーバーを起動： +2. 開発サーバーを起動： ```bash npm run dev ``` -5. ブラウザで[http://localhost:3000](http://localhost:3000)を開いてアプリケーションを確認。 +3. ブラウザで[http://localhost:6002](http://localhost:6002)を開いてアプリケーションを確認。 ## デプロイ @@ -218,16 +180,17 @@ npm run dev また、Tencent EdgeOne Pagesでデプロイすると、[DeepSeekモデルの毎日の無料クォータ](https://pages.edgeone.ai/document/edge-ai)が付与されます。 -### Vercelへのデプロイ +### Vercelへのデプロイ（推奨） -Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者による[Vercelプラットフォーム](https://vercel.com/new)を使用することです。 +[![Deploy with Vercel](https://vercel.com/button)](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)を使用することです。ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。 詳細は[Next.jsデプロイメントドキュメント](https://nextjs.org/docs/app/building-your-application/deploying)をご覧ください。 -または、このボタンでデプロイできます： -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) +### Cloudflare Workersへのデプロイ -ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。 +[Cloudflare デプロイガイドを参照](./cloudflare-deploy.md) ## マルチプロバイダーサポート @@ -242,14 +205,16 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成 - OpenRouter - DeepSeek - SiliconFlow +- SGLang +- Vercel AI Gateway AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。 📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。 -**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-4o、Gemini 2.0、DeepSeek V3/R1を推奨します。 +**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1を推奨します。 -注：`claude-sonnet-4-5`はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。 +注：`claude`シリーズはAWS、Azure、GCPなどのクラウドアーキテクチャロゴ付きのdraw.ioダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。 ## 仕組み @@ -262,24 +227,6 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。 -## プロジェクト構造 - -``` -app/ # Next.js App Router - api/chat/ # AIツール付きチャットAPIエンドポイント - page.tsx # DrawIO埋め込み付きメインページ -components/ # Reactコンポーネント - chat-panel.tsx # ダイアグラム制御付きチャットインターフェース - chat-input.tsx # ファイルアップロード付きユーザー入力コンポーネント - history-dialog.tsx # ダイアグラムバージョン履歴ビューア - ui/ # UIコンポーネント（ボタン、カードなど） -contexts/ # Reactコンテキストプロバイダー - diagram-context.tsx # グローバルダイアグラム状態管理 -lib/ # ユーティリティ関数とヘルパー - ai-providers.ts # マルチプロバイダーAI設定 - utils.ts # XML処理と変換ユーティリティ -public/ # サンプル画像を含む静的アセット -``` ## サポート＆お問い合わせ diff --git a/docs/ja/ai-providers.md b/docs/ja/ai-providers.md new file mode 100644 index 0000000..63d23d6 --- /dev/null +++ b/docs/ja/ai-providers.md @@ -0,0 +1,236 @@ +# AIプロバイダーの設定 + +このガイドでは、next-ai-draw-io でさまざまな AI モデルプロバイダーを設定する方法について説明します。 + +## クイックスタート + +1. `.env.example` を `.env.local` にコピーします +2. 選択したプロバイダーの API キーを設定します +3. `AI_MODEL` を希望のモデルに設定します +4. `npm run dev` を実行します + +## 対応プロバイダー + +### Doubao (ByteDance Volcengine) + +> **無料トークン**: [Volcengine 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万トークンが無料で入手できます！ + +```bash +DOUBAO_API_KEY=your_api_key +AI_MODEL=doubao-seed-1-8-251215 # または他の Doubao モデル +``` + +### 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 上（IAM ロールを持つ Lambda や 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 ホストの Gateway):** + +```bash +AI_GATEWAY_API_KEY=your_gateway_api_key +AI_MODEL=openai/gpt-4o +``` + +**カスタム Gateway URL (ローカル開発またはセルフホスト Gateway 用):** + +```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 は以下の場合に便利です: + - カスタム Gateway インスタンスを使用したローカル開発 + - セルフホスト AI Gateway デプロイメント + - エンタープライズプロキシ設定 +- カスタムベース URL を使用する場合、`AI_GATEWAY_API_KEY` も指定する必要があります + +[Vercel AI Gateway ダッシュボード](https://vercel.com/ai-gateway)から API キーを取得してください。 + +## 自動検出 + +**1つ**のプロバイダーの 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（温度）設定 + +環境変数で Temperature を任意に設定できます: + +```bash +TEMPERATURE=0 # より決定論的な出力（ダイアグラムに推奨） +``` + +**重要**: 以下の Temperature 設定をサポートしていないモデルでは、`TEMPERATURE` を未設定のままにしてください: +- GPT-5.1 およびその他の推論モデル +- 一部の特殊なモデル + +未設定の場合、モデルはデフォルトの挙動を使用します。 + +## 推奨事項 + +- **最高の体験**: 画像からダイアグラムを生成する機能には、ビジョン（画像認識）をサポートするモデル（GPT-4o, Claude, Gemini）を使用してください +- **低コスト**: DeepSeek は競争力のある価格を提供しています +- **プライバシー**: 完全にローカルなオフライン操作には Ollama を使用してください（強力なハードウェアが必要です） +- **柔軟性**: OpenRouter は単一の API で多数のモデルへのアクセスを提供します diff --git a/docs/ja/cloudflare-deploy.md b/docs/ja/cloudflare-deploy.md new file mode 100644 index 0000000..504f41b --- /dev/null +++ b/docs/ja/cloudflare-deploy.md @@ -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 +``` + +> **注意:** 支払い方法の登録が必要なのは、ISR キャッシュのために R2 を有効にする場合のみです。基本的な Workers へのデプロイは無料です。 + +--- + +## ステップ 1 — 依存関係のインストール + +```bash +npm install +``` + +--- + +## ステップ 2 — 環境変数の設定 + +Cloudflare はローカルテスト用に別のファイルを使用します。 + +### 1) `.dev.vars` の作成（Cloudflare ローカルおよびデプロイ用） + +```bash +cp env.example .dev.vars +``` + +API キーと設定を入力してください。 + +### 2) `.env.local` も存在することを確認（通常の Next.js 開発用） + +```bash +cp env.example .env.local +``` + +同じ値を入力してください。 + +--- + +## ステップ 3 — デプロイタイプの選択 + +### オプション 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" + } + ] +} +``` + +**ステップ 4** へ進んでください。 + +--- + +### オプション B: R2 ありでのデプロイ（完全な ISR サポート） + +R2 を使用すると **Incremental Static Regeneration (ISR)** キャッシュが有効になります。これには Cloudflare アカウントに支払い方法の登録が必要です。 + +**1. R2 バケットの作成**（Cloudflare ダッシュボードにて）: + +- **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 ダッシュボードで作成した名前と完全に一致させる必要があります。 + +--- + +## ステップ 4 — 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 や非対話型環境では、このプロンプトは表示されません。事前にダッシュボードで登録してください。 + +--- + +## ステップ 5 — Cloudflare へのデプロイ + +```bash +npm run deploy +``` + +スクリプトの処理内容： + +- Next.js アプリのビルド +- OpenNext を介した Cloudflare Worker への変換 +- 静的アセットのアップロード +- Worker の公開 + +アプリは以下の URL で利用可能になります： + +``` +https://..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 が有効になっていません。 + +**解決策:** 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 あり** を選んでください。 diff --git a/docs/ja/docker.md b/docs/ja/docker.md new file mode 100644 index 0000000..3744558 --- /dev/null +++ b/docs/ja/docker.md @@ -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 +``` + +または、envファイルを使用します。 + +```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)を参照してください。 diff --git a/docs/ja/offline-deployment.md b/docs/ja/offline-deployment.md new file mode 100644 index 0000000..afca995 --- /dev/null +++ b/docs/ja/offline-deployment.md @@ -0,0 +1,38 @@ +# オフラインデプロイ + +`embed.diagrams.net` の代わりに draw.io をセルフホストすることで、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 の値 | +|----------|-----------| +| ローカルホスト | `http://localhost:8080` | +| リモート/サーバー | `http://YOUR_SERVER_IP:8080` | + +**`http://drawio:8080` のような Docker 内部のエイリアスは絶対に使用しないでください。** ブラウザはこれらを名前解決できません。