diff --git a/docs/README_CN.md b/docs/README_CN.md index 9aa6f8d..8d62543 100644 --- a/docs/README_CN.md +++ b/docs/README_CN.md @@ -4,18 +4,16 @@ **AI驱动的图表创建工具 - 对话、绘制、可视化** -[English](./README.md) | 中文 | [日本語](./README_JA.md) +[English](../README.md) | 中文 | [日本語](./README_JA.md) -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/) -[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/) +[![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/) + +[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) +[![Next.js](https://img.shields.io/badge/Next.js-16.x-black)](https://nextjs.org/) +[![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) -[🚀 在线演示](https://next-ai-drawio.jiang.jp/) - -> 注意：由于访问量较大，演示站点目前使用 minimax-m2 模型。如需获得最佳效果，建议使用 Claude Sonnet 4.5 或 Claude Opus 4.5 自行部署。 - -> **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。 +[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) @@ -23,6 +21,62 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 +## 目录 +- [Next AI Draw.io](#next-ai-drawio) + - [目录](#目录) + - [示例](#示例) + - [功能特性](#功能特性) + - [快速开始](#快速开始) + - [在线试用](#在线试用) + - [使用Docker运行（推荐）](#使用docker运行推荐) + - [安装](#安装) + - [部署](#部署) + - [多提供商支持](#多提供商支持) + - [工作原理](#工作原理) + - [项目结构](#项目结构) + - [支持与联系](#支持与联系) + - [Star历史](#star历史) + +## 示例 + +以下是一些示例提示词及其生成的图表： + +
+ + + + + + + + + + + + +
+ 动画Transformer连接器
+

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

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

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

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

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

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

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

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

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

+ 猫咪绘图 +
+
+ ## 功能特性 - **LLM驱动的图表创建**：利用大语言模型通过自然语言命令直接创建和操作draw.io图表 @@ -32,78 +86,18 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 - **AWS架构图支持**：专门支持生成AWS架构图 - **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果 -## **示例** - -以下是一些示例提示词及其生成的图表： - -
- - - - - - - - - - - - -
- 动画Transformer连接器
-

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

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

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

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

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

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

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

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

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

- 猫咪绘图 -
-
- -## 工作原理 - -本应用使用以下技术： - -- **Next.js**：用于前端框架和路由 -- **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持 -- **react-drawio**：用于图表表示和操作 - -图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。 - -## 多提供商支持 - -- AWS Bedrock（默认） -- OpenAI -- Anthropic -- Google AI -- Azure OpenAI -- Ollama -- OpenRouter -- DeepSeek -- SiliconFlow - -除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。 - -📖 **[详细的提供商配置指南](./docs/ai-providers.md)** - 查看各提供商的设置说明。 - -**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用Claude Sonnet 4.5、GPT-4o、Gemini 2.0和DeepSeek V3/R1。 - -注意：`claude-sonnet-4-5` 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。 - ## 快速开始 +### 在线试用 + +无需安装！直接在我们的演示站点试用： + +[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) + +> 注意：由于访问量较大，演示站点目前使用 minimax-m2 模型。如需获得最佳效果，建议使用 Claude Sonnet 4.5 或 Claude Opus 4.5 自行部署。 + +> **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。 + ### 使用Docker运行（推荐） 如果您只想在本地运行，最好的方式是使用Docker。 @@ -120,10 +114,20 @@ docker run -d -p 3000:3000 \ ghcr.io/dayuanjiang/next-ai-draw-io:latest ``` +或者使用 env 文件（从 `env.example` 创建）： + +```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) 了解配置选项。 + ### 安装 1. 克隆仓库： @@ -137,8 +141,6 @@ cd next-ai-draw-io ```bash npm install -# 或 -yarn install ``` 3. 配置您的AI提供商： @@ -159,7 +161,7 @@ cp env.example .env.local > 警告：如果不填写 `ACCESS_CODE_LIST`，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。 -详细设置说明请参阅[提供商配置指南](./docs/ai-providers.md)。 +详细设置说明请参阅[提供商配置指南](./ai-providers.md)。 4. 运行开发服务器： @@ -180,6 +182,38 @@ npm run dev 请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。 + +## 多提供商支持 + +- AWS Bedrock（默认） +- OpenAI +- Anthropic +- Google AI +- Azure OpenAI +- Ollama +- OpenRouter +- DeepSeek +- SiliconFlow + +除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。 + +📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。 + +**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用Claude Sonnet 4.5、GPT-4o、Gemini 2.0和DeepSeek V3/R1。 + +注意：`claude-sonnet-4-5` 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。 + + +## 工作原理 + +本应用使用以下技术： + +- **Next.js**：用于前端框架和路由 +- **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持 +- **react-drawio**：用于图表表示和操作 + +图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。 + ## 项目结构 ``` @@ -199,14 +233,6 @@ lib/ # 工具函数和辅助程序 public/ # 静态资源包括示例图片 ``` -## 待办事项 - -- [x] 允许LLM修改XML而不是每次从头生成 -- [x] 提高形状流式更新的流畅度 -- [x] 添加多AI提供商支持（OpenAI, Anthropic, Google, Azure, Ollama） -- [x] 解决超过60秒的会话生成失败的bug -- [ ] 在UI上添加API配置 - ## 支持与联系 如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！ diff --git a/docs/README_JA.md b/docs/README_JA.md index 6e08bef..f140d67 100644 --- a/docs/README_JA.md +++ b/docs/README_JA.md @@ -4,18 +4,16 @@ **AI搭載のダイアグラム作成ツール - チャット、描画、可視化** -[English](./README.md) | [中文](./README_CN.md) | 日本語 +[English](../README.md) | [中文](./README_CN.md) | 日本語 -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/) -[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/) +[![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/) + +[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) +[![Next.js](https://img.shields.io/badge/Next.js-16.x-black)](https://nextjs.org/) +[![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) -[🚀 ライブデモ](https://next-ai-drawio.jiang.jp/) - -> 注意：アクセス数が多いため、デモサイトでは現在 minimax-m2 モデルを使用しています。最高の結果を得るには、Claude Sonnet 4.5 または Claude Opus 4.5 でのセルフホスティングをお勧めします。 - -> **自分のAPIキーを使用**：自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。 +[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) @@ -23,6 +21,62 @@ AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 +## 目次 +- [Next AI Draw.io](#next-ai-drawio) + - [目次](#目次) + - [例](#例) + - [機能](#機能) + - [はじめに](#はじめに) + - [オンラインで試す](#オンラインで試す) + - [Dockerで実行（推奨）](#dockerで実行推奨) + - [インストール](#インストール) + - [デプロイ](#デプロイ) + - [マルチプロバイダーサポート](#マルチプロバイダーサポート) + - [仕組み](#仕組み) + - [プロジェクト構造](#プロジェクト構造) + - [サポート＆お問い合わせ](#サポートお問い合わせ) + - [スター履歴](#スター履歴) + +## 例 + +以下はいくつかのプロンプト例と生成されたダイアグラムです： + +
+ + + + + + + + + + + + +
+ アニメーションTransformerコネクタ
+

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

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

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

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

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

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

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

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

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

+ 猫の絵 +
+
+ ## 機能 - **LLM搭載のダイアグラム作成**：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作 @@ -32,78 +86,18 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979 - **AWSアーキテクチャダイアグラムサポート**：AWSアーキテクチャダイアグラムの生成を専門的にサポート - **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成 -## **例** - -以下はいくつかのプロンプト例と生成されたダイアグラムです： - -
- - - - - - - - - - - - -
- アニメーションTransformerコネクタ
-

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

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

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

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

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

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

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

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

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

- 猫の絵 -
-
- -## 仕組み - -本アプリケーションは以下の技術を使用しています： - -- **Next.js**：フロントエンドフレームワークとルーティング -- **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：ストリーミングAIレスポンスとマルチプロバイダーサポート -- **react-drawio**：ダイアグラムの表現と操作 - -ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。 - -## マルチプロバイダーサポート - -- AWS Bedrock（デフォルト） -- OpenAI -- Anthropic -- Google AI -- Azure OpenAI -- Ollama -- OpenRouter -- DeepSeek -- SiliconFlow - -AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。 - -📖 **[詳細なプロバイダー設定ガイド](./docs/ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。 - -**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-4o、Gemini 2.0、DeepSeek V3/R1を推奨します。 - -注：`claude-sonnet-4-5`はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。 - ## はじめに +### オンラインで試す + +インストール不要！デモサイトで直接お試しください： + +[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/) + +> 注意：アクセス数が多いため、デモサイトでは現在 minimax-m2 モデルを使用しています。最高の結果を得るには、Claude Sonnet 4.5 または Claude Opus 4.5 でのセルフホスティングをお勧めします。 + +> **自分のAPIキーを使用**：自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。 + ### Dockerで実行（推奨） ローカルで実行したいだけなら、Dockerを使用するのが最も簡単です。 @@ -120,10 +114,20 @@ docker run -d -p 3000:3000 \ ghcr.io/dayuanjiang/next-ai-draw-io:latest ``` +または env ファイルを使用（`env.example` から作成）： + +```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) で設定オプションをご確認ください。 + ### インストール 1. リポジトリをクローン： @@ -137,8 +141,6 @@ cd next-ai-draw-io ```bash npm install -# または -yarn install ``` 3. AIプロバイダーを設定： @@ -159,7 +161,7 @@ cp env.example .env.local > 警告：`ACCESS_CODE_LIST`を設定しない場合、誰でもデプロイされたサイトに直接アクセスできるため、トークンが急速に消費される可能性があります。このオプションを設定することをお勧めします。 -詳細な設定手順については[プロバイダー設定ガイド](./docs/ai-providers.md)を参照してください。 +詳細な設定手順については[プロバイダー設定ガイド](./ai-providers.md)を参照してください。 4. 開発サーバーを起動： @@ -180,6 +182,38 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成 ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。 + +## マルチプロバイダーサポート + +- AWS Bedrock（デフォルト） +- OpenAI +- Anthropic +- Google AI +- Azure OpenAI +- Ollama +- OpenRouter +- DeepSeek +- SiliconFlow + +AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。 + +📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。 + +**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-4o、Gemini 2.0、DeepSeek V3/R1を推奨します。 + +注：`claude-sonnet-4-5`はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。 + + +## 仕組み + +本アプリケーションは以下の技術を使用しています： + +- **Next.js**：フロントエンドフレームワークとルーティング +- **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：ストリーミングAIレスポンスとマルチプロバイダーサポート +- **react-drawio**：ダイアグラムの表現と操作 + +ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。 + ## プロジェクト構造 ``` @@ -199,14 +233,6 @@ lib/ # ユーティリティ関数とヘルパー public/ # サンプル画像を含む静的アセット ``` -## TODO - -- [x] LLMが毎回ゼロから生成する代わりにXMLを修正できるようにする -- [x] シェイプストリーミング更新の滑らかさを改善 -- [x] 複数のAIプロバイダーサポートを追加（OpenAI, Anthropic, Google, Azure, Ollama） -- [x] 60秒以上のセッションで生成が失敗するバグを解決 -- [ ] UIにAPI設定を追加 - ## サポート＆お問い合わせ このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください！