i/next-ai-draw-io

Fork 0

mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-10 11:39:50 +08:00

Files

T

dayuan.jiang 26524276fd docs: keep the TrendShift badge under the language switch

2026-10-10 07:24:22 +09:00

9.9 KiB

Raw Blame History

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
このプロジェクトが役に立ったら、デモサイトの運営のためにスポンサーをご検討ください

9.9 KiB Raw Blame History Unescape Escape