mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-02 01:20:23 +08:00
a3814f702d
Extends the declarative engine past cloud architecture. The tool routing was
divided by icon library — AWS through the engine, everything else hand-written
XML — which is the wrong axis. What matters is the LAYOUT SHAPE.
Measured first: a six-step approval flow declared in its natural order comes out
as one column, because the layout only arranges what nesting tells it to and
never looked at the arrows. That forces the arrow from the decision to its second
branch to jump over the first branch.
graph.ts computes what the layout should have looked at: layer assignment by
longest path, cycle breaking so a loop is drawn without setting the order, and
barycentre sweeping to cut edge crossings. It emits ordinary container
operations, so layout, routing and round-tripping are unchanged — reaching zero
arrows-through-boxes on a 14-node pipeline and zero crossings on a bipartite
graph whose declared order forces three.
Three new container kinds, each because one layout rule cannot serve them all:
pool — swimlanes. Lanes are real cells and each step is parented to its
band, so dragging a step to another role records the change.
sequence — participants across the top, one lifeline cell per participant so
head and line stay together on a drag. Messages bypass the router:
a message's height IS its order.
radial — mind maps and org charts. Children are a flat list and the
hierarchy comes from the links, because a branch is a box and a box
cannot hold children.
Flowchart box shapes (diamond, stadium, parallelogram, document) so a reader can
tell a branch from a step.
Two bugs the new tests caught: the duplicate-link guard blocked a sequence
diagram from having two messages between the same pair, and the fallback message
numbering was shared across containers, pushing a second diagram's messages off
its own lifelines.
523 unit tests and 17 diagram e2e tests pass. Every kind verified round-trip
stable to a fixed point, and rendered in a real browser — draw.io keeps the
lifeline shape and the lane markers.
263 lines
14 KiB
Markdown
263 lines
14 KiB
Markdown
# Next AI Draw.io
|
||
|
||
<div align="center">
|
||
|
||
**AI搭載のダイアグラム作成ツール - チャット、描画、可視化**
|
||
|
||
[English](../../README.md) | [中文](../cn/README_CN.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機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
|
||
|
||
> 注：<img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) のご支援により、デモサイトに強力な glm-4.7 モデルを導入しました！
|
||
|
||
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へのデプロイ)
|
||
- [マルチプロバイダーサポート](#マルチプロバイダーサポート)
|
||
- [仕組み](#仕組み)
|
||
- [サポート＆お問い合わせ](#サポートお問い合わせ)
|
||
- [よくある質問](#よくある質問)
|
||
- [スター履歴](#スター履歴)
|
||
|
||
## 例
|
||
|
||
以下はいくつかのプロンプト例と生成されたダイアグラムです：
|
||
|
||
<div align="center">
|
||
<table width="100%">
|
||
<tr>
|
||
<td colspan="2" valign="top" align="center">
|
||
<strong>アニメーションTransformerコネクタ</strong><br />
|
||
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
|
||
<img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<strong>RAG技術ダイアグラム</strong><br />
|
||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
|
||
<img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" />
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<strong>ReactとAWSによる認証</strong><br />
|
||
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
|
||
<img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" />
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<strong>オープンイノベーション</strong><br />
|
||
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
|
||
<img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" />
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<strong>猫のスケッチ</strong><br />
|
||
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
|
||
<img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
## 機能
|
||
|
||
- **LLM搭載のダイアグラム作成**：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
|
||
- **画像ベースのダイアグラム複製**：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
|
||
- **PDFとテキストファイルのアップロード**：PDFドキュメントやテキストファイルをアップロードして、既存のドキュメントからコンテンツを抽出し、ダイアグラムを生成
|
||
- **AI推論プロセス表示**：サポートされているモデル（OpenAI o1/o3、Gemini、Claudeなど）のAIの思考プロセスを表示
|
||
- **ダイアグラム履歴**：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
|
||
- **インタラクティブなチャットインターフェース**：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
|
||
- **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
|
||
- **レイアウトの自動計算**：アーキテクチャ図、フローチャート、スイムレーン図／BPMN、シーケンス図、マインドマップ、組織図では、AI は構造だけ——何が何を含むか、何が何を指すか——を指定し、座標・サイズ・矢印の経路はすべてアプリが計算します。コンテナは必ず中身が収まるサイズになり、同じ階層の要素が重なることはなく、矢印は本来通り抜けてしまう図形を避けて引かれます。その後に手で動かしたり色を変えた部分は図の一部として読み戻されるため、次の編集で元に戻されることはありません。
|
||
- **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
|
||
|
||
## MCPサーバー
|
||
|
||
MCP（Model Context Protocol）を介して、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キーを使用**：自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。
|
||
|
||
### デスクトップアプリケーション
|
||
|
||
[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へのデプロイ
|
||
|
||
[Tencent EdgeOne Pages](https://pages.edgeone.ai/)を使用してワンクリックでデプロイできます。
|
||
|
||
このボタンでデプロイ：
|
||
|
||
[](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||
|
||
詳細は[Tencent EdgeOne Pagesドキュメント](https://pages.edgeone.ai/document/deployment-overview)をご覧ください。
|
||
|
||
また、Tencent EdgeOne Pagesでデプロイすると、[DeepSeekモデルの毎日の無料クォータ](https://pages.edgeone.ai/document/edge-ai)が付与されます。
|
||
|
||
### 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)を使用することです。ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。
|
||
|
||
詳細は[Next.jsデプロイメントドキュメント](https://nextjs.org/docs/app/building-your-application/deploying)をご覧ください。
|
||
|
||
### Cloudflare Workersへのデプロイ
|
||
|
||
[Cloudflare デプロイガイドを参照](./cloudflare-deploy.md)
|
||
|
||
|
||
## マルチプロバイダーサポート
|
||
|
||
- [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
|
||
- AWS Bedrock（デフォルト）
|
||
- OpenAI
|
||
- Anthropic
|
||
- Google AI
|
||
- Google Vertex AI
|
||
- Azure OpenAI
|
||
- Ollama
|
||
- OpenRouter
|
||
- AIHubMix
|
||
- DeepSeek
|
||
- SiliconFlow
|
||
- ModelScope
|
||
- SGLang
|
||
- Vercel AI Gateway
|
||
|
||
AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。
|
||
|
||
📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。
|
||
|
||
### サーバーサイドマルチモデル設定
|
||
|
||
管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。`AI_MODELS_CONFIG` 環境変数（JSON文字列）または `ai-models.json` ファイルで設定します。同一プロバイダー内の複数モデルだけが必要な場合は、`AI_MODEL` にカンマ区切りでモデルIDを列挙する簡易設定も使えます。
|
||
|
||
**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1を推奨します。
|
||
|
||
注：`claude`シリーズはAWS、Azure、GCPなどのクラウドアーキテクチャロゴ付きのdraw.ioダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。
|
||
|
||
### 管理パネル
|
||
|
||
`ADMIN_PASSWORD` 環境変数を設定して `/admin` にアクセスすると、`.env` を手動で編集する代わりに Web パネルでサーバー設定（モデル、アクセスコード、機能、可観測性、クォータ）を管理できます。
|
||
|
||
📖 **[管理パネルガイド](./admin-panel.md)** — 有効化の方法、優先順位ルール、注意事項。
|
||
|
||
|
||
## 仕組み
|
||
|
||
本アプリケーションは以下の技術を使用しています：
|
||
|
||
- **Next.js**：フロントエンドフレームワークとルーティング
|
||
- **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：ストリーミングAIレスポンスとマルチプロバイダーサポート
|
||
- **react-drawio**：ダイアグラムの表現と操作
|
||
|
||
ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
|
||
|
||
|
||
## サポート＆お問い合わせ
|
||
|
||
**デモサイトのAPIトークン使用を支援してくださった[ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)に特別な感謝を申し上げます！** ARKプラットフォームに登録すると、50万トークンが無料でもらえます！
|
||
|
||
このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください！
|
||
|
||
サポートやお問い合わせについては、GitHubリポジトリでissueを開くか、メンテナーにご連絡ください：
|
||
|
||
- メール：me[at]jiang.jp
|
||
|
||
## よくある質問
|
||
|
||
一般的な問題と解決策については [FAQ](./FAQ.md) をご覧ください。
|
||
|
||
## スター履歴
|
||
|
||
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
||
|
||
---
|