はじめに
この記事は、Claude Desktop から draw.io（diagrams.net） を操作できるようにするまでを“最短ルート”でまとめたものです。
MCP（Model Context Protocol）の知識がなくても問題ありません。
この設定を行う事で、Claude Desktopに自然言語で指示しdraw.io上に描画させる事ができます。
また、複雑な文章や仕様書などを添付し描画させる事で、直感的に分かりやすいダイアグラム図の作成が可能になります。
前提
- mac/Windows/Linux のいずれかに Claude Desktop が入っている
- Google Chrome / Edge / Firefox の拡張機能が使える
※ ブラウザ拡張機能を経由してMCPサーバーと連携します。 - Node.js v20+ が入っている（ClaudeがMCPサーバーを起動するのに必要）
手順
draw.ioのMCPパッケージをインストール
以下をターミナルで入力し、パッケージのインストールを行う。
npm i -g drawio-mcp-server
Claude Desktopの設定ファイルに「drawio MCPサーバー」を登録
設定ファイルの場所：
- macOS：
~/Library/Application Support/Claude/claude_desktop_config.json - Windows：
%APPDATA%/Claude/claude_desktop_config.json - Linux：
~/.config/Claude/claude_desktop_config.json
設定ファイルに以下を追記
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": [
"-y",
"drawio-mcp-server"
]
}
}
}
※すでに他のMCP（例：n8n）を登録済みなら、mcpServers の中に 並べて追加 するだけでOK。
ブラウザ拡張機能「Draw.io MCP Extension」をインストール
- Chrome/Edge：ウェブストアから追加
- Firefox：addonsから追加
- 拡張機能のポップアップが 緑の接続表示 になればOK（
localhost:3333に接続している状態）
Claude を再起動→ draw.io を開く
- Claudeを一度終了→再起動
※画面上部の閉じるボタンだと完全には終了されていない為「アイコンを右クリック→終了」や、メニューバーの「Claude→終了」を行う必要がある。 - ブラウザで app.diagrams.net を開き、空の図を作成（保存先はローカル/Google Driveなど任意）
動作確認（Claudeに話しかける）
- 新規チャットで：
- 「drawio で新しいページを作って、矩形を2つ置き、矢印でつないで」
- 「選択中の図形のサイズとテキストを教えて」
- 図に 矩形/線が追加 されたり、選択図形の情報 が返れば接続完了です。
-
- 自然言語で指示
-
- ダイアグラム図を自動生成
トラブルシューティング（詰まりがちなところ）
拡張機能のインジケータが赤い
Claudeの設定が反映されていないか、MCPサーバーが起動していません。
Claudeを再起動→新規チャットで draw.io に関する指示を出すと、Claudeが npx drawio-mcp-server を自動起動 します。
Claude Desktop起動時にエラーが発生
拡張機能が使用するポート:3333を別プロセスが使っている可能性。
ブラウザ再起動→他のdraw.io関連拡張機能を無効化→OS再起動で解消することがあります。
Node.js のバージョンでエラー
node -v が v20 未満なら更新が必要です。
セキュリティと運用の注意
- 図の保存先は draw.io 側の設定に依存（ローカル、Google Drive、OneDrive など）。
機密図面の保存先と共有範囲に注意。 - MCPサーバーはローカルで動作します。拡張機能が接続するのは
ws://localhost:3333。
外部に公開しない構成にしておくのが基本です。 - 複数の図面を開いている場合、アクティブなタブに対して操作が行われます。
最後に
株式会社アディエムでは、kintone × 生成AIで日々の業務改善に取り組んでいます。
今回ご紹介したようなワークフローの他にも、お客様の業務に合った改善をご提案させて頂きます。
無料相談も行なっておりますので、お気軽にお問い合わせ頂ければ幸いです。