next-ai-draw-io/docs/ja/README_JA.md

Next AI Draw.io

AI とチャットしながら draw.io のダイアグラムを描き、直す。

English | 中文 | 日本語

オンラインデモ · デスクトップアプリ · MCP サーバー

https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec

欲しいダイアグラムを一文で伝えると、AI が本物の draw.io キャンバスに描きます。普通の draw.io ファイルと同じように手で直すことも、図形をいくつか選んで AI に変更を頼むこともできます。AI の変更はすべてバージョンとして残り、比較・復元・取り消しができます。結果は .drawio、.png、.svg で書き出せます。

Web アプリ、Windows / macOS / Linux 向けデスクトップアプリ、そして Claude Code、Cursor、VS Code などの AI エージェントから呼び出せる MCP サーバーとして使えます。

特長

描く

• アーキテクチャ図、フローチャート、シーケンス図などを一文から生成。AWS、Azure、GCP、Kubernetes のアイコンライブラリを内蔵
• コネクタに流れるアニメーションを付けられる
• スクリーンショットや手描きの図をアップロードすると AI が描き直す。PDF、Markdown、コードなどのテキストファイルからも内容を図にできる

直す

• チャットで修正：変更はストリーミングでキャンバスに反映され、AI が変更した図形はハイライト表示
• 選択して頼む：キャンバスで図形を選ぶと、AI はその図形だけを変更
• バージョンと取り消し：AI の変更ごとにサムネイル付きのバージョンカードが残り、キャンバスと比較・復元・取り消しができる。キャンバス上の Ctrl+Z でも AI の変更を一度で戻せる
• ただの draw.io ダイアグラム：ダブルクリックで名前を変え、ドラッグし、スタイルを変え、複数ページを使い、いつでも .drawio、.png、.svg、.drawio.svg に書き出せる

使う

• 24 のモデルプロバイダーに対応。自分の API キーをブラウザに入力でき、キーは端末内にだけ保存される
• 推論するモデルは思考過程を表示
• ダークモード。UI は英語、簡体字中国語、繁体字中国語、日本語に対応

例

アニメーションコネクタ付き Transformer アーキテクチャ Prompt: Give me a animated connector diagram of transformer's architecture.
RAG アーキテクチャ Prompt: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion	React と AWS による認証フロー Prompt: Generate authentication process using React with AWS. Use Serverless architecture.
オープンイノベーションモデル Prompt: Create visualization of Henry Chesbrough's Open Innovation model.	猫のスケッチ Prompt: Draw a cute cat for me.

使い方

オンラインデモ

next-ai-drawio.jiang.jp を開けばすぐ使えます。インストールは不要です。デモサイトには利用上限があります。チャットパネルの設定アイコンから自分のプロバイダーと API キーを入力すると上限なしで使えます。キーはブラウザ内にだけ保存され、サーバーには送られません。

デスクトップアプリ

Releases ページ から Windows、macOS、Linux 向けのインストーラーをダウンロードしてください。

AI エージェントから使う（MCP）

MCP（Model Context Protocol、AI エージェントが外部ツールを呼び出すためのプロトコル）を通して、Claude Desktop、Cursor、VS Code などから直接 draw.io のダイアグラムを描けます。クライアントの MCP 設定に次を追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code ならコマンド一つです。

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

あとは AI に「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを描いて」と頼めば、描かれていく様子がブラウザに表示されます。MCP サーバーには Web アプリの作図機能のほとんどが入っています。

• 同じ作図ルールとアイコンライブラリ（AWS、Azure、GCP、Kubernetes など）
• スクリーンショットツール。AI が描いた結果を確認して自分で直せる
• バージョン履歴、複数ページのダイアグラム、.drawio、.png、.svg、.drawio.svg でのダウンロード
• ~/.next-ai-drawio/ への自動保存。再起動後も続きから描ける

VS Code、Cursor などの設定は MCP サーバーの README を参照してください。

自分でホストする

ローカルで動かす

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local   # プロバイダーと API キーを記入。下の「モデルとプロバイダー」を参照
npm run dev

http://localhost:6002 を開きます。

ワンクリックデプロイ

プラットフォーム	方法
Tencent EdgeOne Pages	デプロイすると DeepSeek モデルの毎日の無料クォータ も付きます
Vercel	.env.local と同じ環境変数を Vercel のダッシュボードで設定してください
Cloudflare Workers	Cloudflare デプロイガイド
Docker	Docker ガイド
オフラインまたは社内ネットワーク	オフラインデプロイ

モデルとプロバイダー

AWS Bedrock（既定）、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、SGLang、Vercel AI Gateway、Tencent EdgeOne、ByteDance Doubao、ModelScope、Zhipu GLM、Qwen、Qiniu、Kimi、MiniMax、Novita、Xiaomi MiMo、Atlas Cloud の 24 プロバイダーに対応しています。各プロバイダーの環境変数と注意点はプロバイダー設定ガイドにあります。

どのモデルを選ぶか：厳密な形式の長いテキスト（draw.io の XML）を生成するタスクなので、能力の高いモデルを選んでください。小さなモデルは壊れた図を出しがちです。

複数モデルと管理パネル：AI_MODEL にモデル ID をカンマ区切りで並べるか、AI_MODELS_CONFIG 環境変数または ai-models.json ファイルで複数プロバイダーのモデルを設定すると、全ユーザーが自分のキーなしで使えます。ADMIN_PASSWORD を設定して /admin を開くと、モデル、アクセスコード、機能の切り替え、オブザーバビリティ、クォータを Web 画面から管理できます。管理パネルガイドを参照してください。

サポート

• 質問や提案：GitHub Issue を立てるか、me[at]jiang.jp までメールしてください
• よくある問題：FAQ
• このプロジェクトが役に立ったら、デモサイトの運営のためにスポンサーをご検討ください