Next AI Draw.io

概要

next-ai-draw-io は、大規模言語モデル（LLM）のパワーと広く利用されているダイアグラム作成ツール draw.io を組み合わせたオープンソースのNext.jsウェブアプリケーションです。チャットインターフェースで自然言語の指示を入力するだけで、手動でのドラッグ＆ドロップなしに、プロフェッショナルなダイアグラムを作成、編集、強化できます。

このプロジェクトは、会話型AIと視覚的なダイアグラム作成のギャップを埋めるために構築され、開発者、アーキテクト、非技術ユーザーが数秒で高品質なダイアグラムを簡単に作成できるようにします。

主な機能

🧠 LLMによるダイアグラム作成

ユーザーは、簡単な英語（または他の言語）で希望する内容を説明するだけで、AIが対応するdraw.io XMLダイアグラムを自動生成します。「フローチャートを描いて」のような簡単なリクエストから、「ロードバランサー、EC2インスタンス、RDSデータベースを備えたAWSアーキテクチャを生成して」のような複雑なリクエストまで対応します。

🖼️ 画像ベースのダイアグラム複製

既存のダイアグラム画像やスクリーンショットをアップロードすると、AIがそれを分析し、編集可能なdraw.ioダイアグラムとして複製します。これは、手書きのスケッチをデジタル化したり、ドキュメントからダイアグラムを再作成したりする場合に特に役立ちます。

📜 ダイアグラムのバージョン履歴

ダイアグラムに加えられたすべての変更が追跡されます。ユーザーは完全なバージョン履歴を閲覧し、以前の状態を復元できるため、AI生成の変更を試す際のセーフティネットとなります。

💬 インタラクティブなチャットインターフェース

リアルタイムのチャットパネルにより、ユーザーはダイアグラムを繰り返し洗練させることができます。「アニメーションの矢印にして」や「APIサーバーに接続されたデータベースノードを追加して」といった指示で、ダイアグラムがそれに応じて更新されます。

☁️ クラウドアーキテクチャのサポート

主要なクラウドプロバイダーのアーキテクチャダイアグラム生成に特化したサポートがあります。

AWS（公式AWSアイコン付き）
GCP（GCPアイコン付き）
Azure（Azureアイコン付き）

🎨 アニメーションコネクタ

ダイアグラムノード間にアニメーション化された動的なコネクタを作成し、より表現力豊かで視覚的に魅力的なダイアグラムを実現します。

テックスタック

テクノロジー	役割
Next.js 15	フロントエンドフレームワーク & APIルーティング
TypeScript	型安全なコードベース
Vercel AI SDK	ストリーミングAI応答、マルチプロバイダー抽象化
react-drawio	ダイアグラムレンダリング & 操作
Tailwind CSS + shadcn/ui	UIコンポーネント & スタイリング
Docker	コンテナ化されたデプロイメント

マルチプロバイダーLLMサポート

アプリケーションはLLMプロバイダーの設定を抽象化し、以下のいずれかを接続できるようにします。

AWS Bedrock（デフォルト）
OpenAI / OpenAI互換API
Anthropic (Claude)
Google AI (Gemini)
Azure OpenAI
Ollama（ローカルLLM）
OpenRouter
DeepSeek

注意: claude-sonnet-4-5 は、AWSロゴ付きのdraw.ioダイアグラムでトレーニングされているため、AWSアーキテクチャダイアグラムに特に推奨されます。

プロジェクト構造

app/
  api/chat/           # AIツール呼び出しを含むチャットAPIエンドポイント
  page.tsx            # メインアプリケーションページ
components/
  chat-panel.tsx      # チャットUI & ダイアグラムコントロール
  chat-input.tsx      # ファイルアップロード対応入力
  history-dialog.tsx  # バージョン履歴ビューア
  ui/                 # 再利用可能なUIコンポーネント
contexts/
  diagram-context.tsx # グローバルダイアグラム状態管理
lib/
  ai-providers.ts     # マルチプロバイダーAI設定
  utils.ts            # XML処理ユーティリティ
public/               # 静的アセット & デモSVG

はじめに

Dockerによるクイックスタート

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

その後、ブラウザで http://localhost:3000 を開きます。

手動インストール

# リポジトリをクローン
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io

# 依存関係をインストール
npm install

# 環境設定
cp env.example .env.local
# .env.local をAIプロバイダー設定で編集

# 開発サーバーを実行
npm run dev

Vercelへのデプロイ

以下のボタンをクリックするか、Next.jsデプロイメントドキュメントに従ってください。

ユースケース例

プロンプト	出力
"トランスフォーマーのアーキテクチャのアニメーションコネクタダイアグラムをください。"	アニメーションコネクタ付きトランスフォーマーアーキテクチャダイアグラム
"GCPアイコン付きのGCPアーキテクチャダイアグラムを生成してください。"	完全なGCPクラウドアーキテクチャSVG
"AWSアイコン付きのAWSアーキテクチャダイアグラムを生成してください。"	公式アイコン付きAWSクラウドアーキテクチャ
"Azureアイコン付きのAzureアーキテクチャダイアグラムを生成してください。"	Azureクラウドアーキテクチャダイアグラム
"かわいい猫を描いてください。"	draw.io形式のかわいい猫のイラスト

コミュニティ & サポート

Issue: https://github.com/DayuanJiang/next-ai-draw-io/issues
スポンサー: https://github.com/sponsors/DayuanJiang