Next AI Draw.io

Next AI Draw.io MCP Server

Claude Code、Cursor、VS Code、その他の AI エージェントがプロジェクトのファイルをもとに draw.io 図を作成できる MCP サーバーです。ブラウザーでライブプレビューを確認できます。プレビューは Next AI Draw.io web app のキャンバスです。AI による変更は枠で示され、Ctrl+Z で元に戻せます。また、いつでも手動で編集できます。

https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678

インストール

VS Code または Cursor では、ワンクリックで追加できます：

AI エージェントにインストールさせる

次の内容を Claude Code、Codex、Cursor、VS Code、Cline、またはファイルの編集とコマンドの実行が可能なエージェントに貼り付けてください：

Install the drawio MCP server for the client you are running in, following
https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/packages/mcp-server/README.md
Install it for all my projects (user scope, for Claude Code "--scope user"),
name the server "drawio" and keep the servers that are already configured.
Then tell me how to reload so its tools show up.

手動でインストールする

Claude Code

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

--scope user を指定すると、すべてのプロジェクトでツールを利用できます。指定しない場合、コマンドを実行したフォルダー内でのみ利用できます。

または、Claude Code コミュニティマーケットプレイスからプラグインとしてインストールします（Claude Code 2.1.275 以降）：

/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community

Codex CLI

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

Codex は、図を変更する drawio ツールを実行するたびに確認を求めます。また、完全なアクセス権がない状態で codex exec を実行すると、"MCP tool call requires approval" というエラーが発生します。drawio ツールの実行時に確認を求めないようにするには、~/.codex/config.toml にあるサーバーのセクションに次の1行を追加します：

[mcp_servers.drawio]
command = "npx"
args = ["@next-ai-drawio/mcp-server@latest"]
default_tools_approval_mode = "approve"

一部のツールだけを承認するには、代わりに [mcp_servers.drawio.tools.<tool name>] を使用し、approval_mode = "approve" を設定します。

VS Code（.vscode/mcp.json）

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

Cursor、Claude Desktop、Cline、その他ほとんどのクライアント（~/.cursor/mcp.json、claude_desktop_config.json、cline_mcp_settings.json）

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

クライアントを再起動し、「このリポジトリを読み込んで、アーキテクチャを図にしてください」などと依頼します。ブラウザーでプレビューが開き、図が描画されていく様子を確認できます。

機能

• プロジェクトをもとに図を作成：エージェントは独自のツールを使ってコードやドキュメントを読み込みます。既存の .drawio ファイルや .drawio.svg ファイルは load_diagram で開けます。
• ウェブアプリのキャンバス：AI による変更は数秒間枠で示されます（エクスポートには表示されません）。Ctrl+Z を1回押すと元に戻せます。図形を選択して「これら」と指示できます（get_selection）。AI が次の編集を行う前に、手動での編集内容が読み込まれます。
• 実際のアイコン：ウェブアプリの描画ルールと図形ライブラリ（AWS、Azure、GCP、Kubernetes、Cisco など）を利用するため、AI は実際のアイコン名を使います。
• 自己チェック：AI は描画された図のスクリーンショットを確認し、重なりを修正できます（screenshot: true、または screenshot_diagram）。
• バージョン：キャンバスの横に直近20件のバージョンがカードで表示されます。以前のバージョンに復元したり、比較したり、AI に元に戻すよう依頼したりできます（restore_version）。
• ページとエクスポート：複数ページの図に対応しています。.drawio、.png、.svg、.drawio.svg として保存できます。画像には20 px の余白が付き、PNG は白背景になります（背景をなくすには transparent: true を指定します）。
• オフライン：draw.io エディターはパッケージに同梱されています。

draw.io MCP サーバーの選び方

draw.io の図を描画する MCP サーバーはいくつかあります。2026 年 10 月時点での違いは次のとおりです。

サーバー	図の表示と編集方法	適しているケース
このサーバー、@next-ai-drawio/mcp-server	ブラウザーに表示される draw.io のライブキャンバスです。AI は手動編集や選択内容も含めて図を読み取り、AI による変更は枠線で示されます。Ctrl+Z で変更を元に戻せ、以前のバージョンも復元できます	あなたと AI が同じ図を交互に編集する場合
draw.io の公式 @drawio/mcp	XML、CSV、または Mermaid から各図を draw.io エディターの新しいタブで開きます。図を読み戻すツールはありません	図を完全な draw.io エディターで開き、そこから自分で編集したい場合
draw.io のホスト型 MCP アプリ、https://mcp.draw.io/mcp	インストール不要で、Claude.ai、ChatGPT、VS Code、または Cursor のチャット内に図を表示します。図は draw.io のサーバーに送信されます	チャットアプリを使っていて、会話内で図を確認したい場合
Claude Code、Codex CLI、Copilot CLI 用の draw.io プラグイン	.drawio ファイルを書き込むスキルです。PNG、SVG、PDF へのエクスポートには draw.io Desktop が必要です	MCP サーバーを使わず、リポジトリに図のファイルを保存したい場合
lgazo/drawio-mcp-server	localhost 上の draw.io エディター、またはブラウザー拡張機能を使った独自の draw.io です。ツールは個々の図形、レイヤー、ページを作成、読み取り、更新、削除します	細かく操作できるツール、複数のドキュメントの同時操作、または Mermaid のインポートが必要な場合

保存された図

すべての変更は、直近 20 バージョンとともに ~/.next-ai-drawio/<session-id>.drawio に保存されます。新しい順に 50 件の図が保持されます。後の会話で図を続けるには、AI に図を頼んでください。AI は list_saved_diagrams で図を探し、start_session で再度開きます。

独自の作図ルール

たとえば「常に最小限のスタイルを使う」のようなルールを ~/.next-ai-drawio/instructions.md に記述します。ルールは呼び出しのたびに作図ガイドに追加されるため、再起動しなくても編集に適用されます。先頭から 5000 文字が使用されます。

ツール

ツール	動作
start_session	プレビューを開いて作図ガイドを返します。session_id を指定すると、保存済みの図を続けられます
create_new_diagram	mxCell XML から新しい図を描画します
edit_diagram	ID でセルを追加、更新、または削除します。すべて成功するか、何も変更されないかのどちらかです
get_diagram	ブラウザーでの編集内容を含む現在の XML を返します
get_selection	プレビューで選択した図形を返します
screenshot_diagram	AI が確認するためのページの PNG を返します
load_diagram、export_diagram	.drawio または .drawio.svg ファイルを開きます。.drawio、.png、.svg、または .drawio.svg として保存します
restore_version	以前のバージョンに戻します。やり直しも可能です
list_saved_diagrams	以前のセッションで保存された図を新しい順に表示します
get_drawing_guide、get_shape_library	作図ルールを再度表示します。aws4 などのライブラリのアイコンスタイルも確認できます
list_pages、add_page、rename_page、delete_page	ページ（タブ）を操作します

設定

サーバー用のクライアントの env に設定する環境変数：

変数	デフォルト	説明
PORT	6002	プレビューのポートです。使用中の場合は、6020 までの次に空いているポートが使われます
DRAWIO_DATA_DIR	~/.next-ai-drawio	保存した図と instructions.md の保存先フォルダーです。off にすると保存が無効になります
DRAWIO_AUTO_SCREENSHOT	未設定	true にすると、作成および編集の結果ごとにスクリーンショットが添付されます（呼び出しごとに 2～10 秒かかります）
DRAWIO_BASE_URL	バンドル版 draw.io	セルフホスト版など、別の draw.io を使用します（下記を参照）
DRAWIO_LANG	未設定	エディターとプレビューの言語を固定します。en、zh、zh-tw、ja、de などを指定します
DRAWIO_UI	未設定	draw.io のテーマを固定します。kennedy、atlas、dark、min、sketch、simple のいずれかを指定します
DRAWIO_DARK	auto	1 はダークモードで起動し、0 はライトモードで起動します。auto はシステム設定に従います
BROWSER	未設定	none にするとプレビューを自動で開きません。start_session は引き続き URL を返します
DRAWIO_PREVIEW_UI	shell	classic にすると、アウトライン、Ctrl+Z、get_selection のない以前のプレビューページが開きます
DEBUG	未設定	true にすると、デバッグメッセージを stderr に記録します

セルフホスト版 draw.io

docker run -d -p 8080:8080 jgraph/drawio

次に、DRAWIO_BASE_URL=http://localhost:8080 を設定します。プレビューから別オリジンの draw.io にアクセスできないため、AI による変更のアウトライン表示はされず、Ctrl+Z で変更を取り消すこともできず（バージョンカードを使用してください）、get_selection も動作しません。バンドル版では、組織図レイアウトなど、コードをオンデマンドで読み込む一部の機能が省かれています。また、画像プロキシがないため、ウェブアドレスから挿入した画像はエクスポート画像に含まれません。オフラインデプロイを参照してください。

トラブルシューティング

• VS Code Simple Browser または Cursor のブラウザーでプレビューが真っ白になる：このページは他のページへの埋め込みを拒否します。通常のブラウザーで URL を開いてください。
• スクリーンショットまたは PNG／SVG のエクスポートがタイムアウトする：プレビュータブで描画されます。ブラウザーではバックグラウンドのタブの動作が遅くなるため、タブを前面に表示して再試行してください。
• 「No active session」：AI は最初に start_session を呼び出す必要があります。
• プレビューが更新されない：start_session が返した URL を開いてください。URL の ?mcp= 部分によって、ページがセッションに接続されます。

仕組み

サーバーは stdio 経由でエージェントと通信し、プレビューページとバンドル版 draw.io を配信する HTTP サーバーを 127.0.0.1 で実行します。ページは変更をポーリングします。すべての /api リクエストには、プレビューページだけが持つトークンが必要なため、他のウェブサイトが図を読み取ったり変更したりすることはできません。

ライセンス

Apache-2.0