Next AI Draw.io

チャットで指示するだけで draw.io 互換の図を生成・編集する Next.js アプリ

1 — 概要
何ができるか

Next AI Draw.io は、自然言語のチャット指示で draw.io 互換の XML（mxCell）図をリアルタイムに生成・編集するウェブアプリ。左ペインのエディタと右ペインのチャットを組み合わせ、LLM のストリーミングツール呼び出しで図の変更を即座に反映する。Electron でデスクトップ版、OpenNext + Cloudflare でエッジデプロイにも対応。

10+AI プロバイダー
4AI ツール
4対応言語 (i18n)
3デプロイ先

入力はテキストのほか、画像・PDF・URL にも対応。生成した図は draw.io 形式（.drawio）・SVG・PNG でエクスポートでき、VLM による図の自動検証も備える。

2 — アーキテクチャ
データフロー

ブラウザ・API サーバー・外部サービスの 3 層構成。LLM のストリーミングツールコールがクライアント側で図 XML に変換される。

flowchart TD subgraph browser ["ブラウザ"] Chat["チャットパネル\nuseChat"] Ctx["DiagramContext\nXML 状態"] UI["DrawIO エディタ\nreact-drawio"] end subgraph api ["Next.js API Route"] ChatAPI["/api/chat\nstreamText + ツール"] ValAPI["/api/validate-diagram\nVLM 検証"] end subgraph ext ["外部サービス（任意）"] LLM["LLM プロバイダー\nOpenAI / Anthropic / 他"] LF["Langfuse\nトレース"] DDB["DynamoDB\nクォータ管理"] end Chat -->|"messages + XML"| ChatAPI ChatAPI --> LLM LLM -->|"ツールストリーム"| ChatAPI ChatAPI -->|"display_diagram 等"| Chat Chat --> Ctx Ctx --> UI ChatAPI -.-> LF ChatAPI -.-> DDB UI -->|"PNG"| ValAPI ValAPI --> LLM
ツール実行はクライアント側: display_diagram / edit_diagram / append_diagram は LLM がストリームした後、ブラウザの use-diagram-tool-handlers フックで DiagramContext に反映される。サーバー実行は get_shape_library のみ。
3 — 主要機能
AI チャット

Vercel AI SDK useChat + DefaultChatTransport で /api/chat にストリーム POST。図の XML とヒストリーをコンテキストに含め LLM に送信する。

多様な入力

テキスト入力に加え、画像・PDF（テキスト抽出）・URL（SSRF 対策済み記事取得）を受け付ける。入力内容に合わせてシステムプロンプトを最適化。

マルチモデル

クライアントが API キー・プロバイダー・モデルを選択できる UI を提供。サーバー側 getAIModel がリクエストヘッダーを解析し、OpenAI / Anthropic / Google / Bedrock / Vertex / DeepSeek 等 10+ プロバイダーに対応。

VLM 図検証

生成した図の PNG を撮影して /api/validate-diagram に送り、ビジョン対応 LLM で内容を検証。エラー検知時は自動リトライし、図の品質を担保する。

デプロイ選択肢

Vercel / Cloudflare Workers（OpenNext）/ Electron の 3 通り。Electron はオフライン用に draw.io をローカルバンドルし、ネット不要で動作。

運用・可観測性

Langfuse によるトレース、DynamoDB による日次リクエスト／TPM クォータ管理、アクセスコード認証。図のスナップショット履歴も保持。

4 — AI ツール
LLM が呼び出す 4 つのツール
ツール名実行場所引数説明
display_diagram クライアント xml 図全体を新しい XML で置き換える。初回生成・全面改訂に使用。
edit_diagram クライアント operations[] 差分操作（追加・更新・削除）で既存の図を部分編集。大きな図の効率的な更新に使用。
append_diagram クライアント xml 既存の図に要素を追加する。display_diagram との違いは既存要素を保持する点。
get_shape_library サーバー library docs/shape-libraries/*.md からシェイプ一覧を読み込み LLM に渡す。図の正確性を上げるために呼ばれる。
ツール設計の特徴

display_diagram は全面書き換えのため初回に最適。edit_diagram は操作単位の差分で送信コストを抑える。append_diagram は既存レイアウトを崩さず要素を追加できる。この 3 ツールの組み合わせで、大きな図でもコンテキスト長を最小化しながら精度を保つ。

5 — 技術スタック
主要ライブラリ・サービス
カテゴリ技術用途
フレームワークNext.js 16 (App Router)、React 19UI + API Route
スタイリングTailwind CSS 4、Radix UI、Motionコンポーネント・アニメーション
AI SDKai v6、@ai-sdk/reactLLM ストリーミング・ツール呼び出し
AI プロバイダーOpenAI / Anthropic / Google / Azure / Bedrock / Vertex / DeepSeek / OpenRouter / Ollama 等各 LLM への接続
図エディタreact-drawio（DrawIoEmbed）draw.io iframe 埋め込み
バリデーションZod 4スキーマ・型検証
可観測性Langfuse（任意）、OTELLLM トレース・コスト追跡
クォータ管理AWS SDK DynamoDB（任意）日次リクエスト・TPM 制限
デスクトップElectron + esbuildオフライン対応デスクトップ版
エッジデプロイOpenNext + Cloudflare Workersエッジでの高速配信
テストVitest、Playwright、Biomeユニット・E2E テスト・Lint
MCP@next-ai-drawio/mcp-server（別パッケージ）MCP 経由の外部連携
主な環境変数
変数名説明
NEXT_PUBLIC_DRAWIO_BASE_URLdraw.io ホスト URL（未設定時は embed.diagrams.net）
ACCESS_CODE_LISTカンマ区切りのアクセスコード一覧（簡易認証）
DYNAMODB_QUOTA_TABLEクォータ管理用 DynamoDB テーブル名
LANGFUSE_PUBLIC_KEY / LANGFUSE_SECRET_KEYLangfuse 接続情報
ENABLE_VLM_VALIDATIONVLM による図検証の有効化
MAX_OUTPUT_TOKENS最大出力トークン数の制限
DAILY_REQUEST_LIMIT / TPM_LIMIT日次リクエスト数・TPM の上限
公式・関連