MCPサーバ - Draw.ioのソースを表示

== 概要 ==
Draw.io MCP Server は、AI システムがDraw.io ダイアグラムをプログラマティックに制御・検査できるようにするMCP (Model Context Protocol) サーバである。<br>
このMCPを使用することにより、Claude等のLLMがDraw.io上でフローチャート、シーケンス図、アーキテクチャ図、ネットワーク図等の様々なダイアグラムを自動的に作成・編集することができる。<br>
<br>
Draw.io MCP Serverは、以下に示すような機能を提供する。<br>
* ダイアグラムの検査機能 (選択セル取得、シェイプカテゴリ列挙、ページモデル取得)
* ダイアグラムの編集機能 (矩形追加、エッジ追加、カスタムシェイプ追加、セル削除)
* セルのプロパティ編集とスタイル適用
* カスタム属性の保存と管理
<br>
Draw.io MCP Serverは、WebSocket (デフォルトポート: 3333) を使用してブラウザ拡張機能経由でDraw.ioと通信する。<br>
これにより、Claude Desktop、oterm、Zed等のMCPクライアントと統合することができる。<br>
<br>
Draw.io MCP Serverの最大の特徴は、Webブラウザ拡張機能を介してリアルタイムにDraw.ioダイアグラムを操作できることである。<br>
全てのダイアグラム処理機能は、TypeScriptで実装されており、Node.js 20以上で動作する。<br>
<br><br>

== Draw.io MCP Serverの機能 ==
==== ダイアグラム検査機能 ====
* 選択されたセルの取得 (get-selected-cells)
* シェイプカテゴリの列挙 (get-shape-categories)
* 特定のシェイプ情報の取得 (get-specific-shapes)
* ページ分割されたダイアグラムモデルの取得 (list-paged-model)
<br>
==== ダイアグラム編集機能 ====
* 矩形の追加 (add-rectangle)
* エッジ (接続線) の追加 (add-edge)
* カスタムシェイプの追加 (add-custom-shape)
* セルの削除 (delete-cell)
* セルのプロパティ編集 (edit-cell)
<br>
==== スタイルとデータ管理 ====
* ライブラリスタイルの適用 (apply-library-style)
* カスタム属性の保存 (set-cell-data)
* シェイプのプロパティ変更
<br><br>

== 対応ダイアグラムタイプ ==
Draw.io MCP Serverは、Draw.ioで作成可能なすべてのダイアグラムタイプをサポートしている。<br>
<br>
<center>
{| class="wikitable"
|+ 対応ダイアグラムタイプ
|-
! タイプ !! 説明
|-
| フローチャート || プロセスフローと意思決定を視覚化
|-
| シーケンス図 || システムコンポーネント間の相互作用を時系列で表現
|-
| アーキテクチャ図 || システムアーキテクチャとコンポーネント構成を記述
|-
| ネットワーク図 || ネットワークトポロジーとデバイス接続を表現
|-
| データベース設計図 || データベーススキーマとER図を記述
|-
| UML図 || クラス図、アクティビティ図、ユースケース図等
|-
| マインドマップ || アイデアと概念の階層構造を視覚化
|-
| 組織図 || 組織構造と報告関係を表現
|-
| Ganttチャート || プロジェクトタイムラインとタスク管理
|}
</center>
<br><br>

== 動作要件 ==
==== システム要件 ====
* Node.js 20以上
* Draw.io MCP Browser Extension (Chrome または Firefox)
* MCPクライアント (Claude Desktop、oterm、Zed等)
<br>
==== 必須コンポーネント ====
* Draw.io MCP Server (TypeScript実装)
* Draw.io MCP Extension (ブラウザ拡張機能)
* app.diagrams.net へのアクセス
<br>
==== ネットワーク要件 ====
* WebSocketポート (デフォルト: 3333) の利用可能性
* ファイアウォールでの指定ポートの開放
* ブラウザ拡張機能とサーバ間の通信許可
<br><br>

== インストール ==
==== Draw.io MCP Serverのインストール ====
Draw.io MCP Serverは、MCPクライアントの設定ファイルを編集することにより、自動的にインストールされる。<br>
以下に示す設定例を参照すること。<br>
<br>
==== Claude Desktopでの設定 ====
Claude Desktopの設定ファイルを編集する。<br>
<br>
設定ファイルの場所は、以下の通りである。<br>
* Linux
*: ~/.config/Claude/claude_desktop_config.json
* Windows
*: %APPDATA%\Claude\claude_desktop_config.json
<br>
npmを使用する場合の設定を以下に示す。<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "drawio": {
       "command": "npx",
       "args": ["-y", "drawio-mcp-server"]
     }
   }
 }
 </syntaxhighlight>
<br>
pnpmを使用する場合の設定を以下に示す。<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "drawio": {
       "command": "pnpm",
       "args": ["dlx", "drawio-mcp-server"]
     }
   }
 }
 </syntaxhighlight>
<br>
yarnを使用する場合の設定を以下に示す。<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "drawio": {
       "command": "yarn",
       "args": ["dlx", "drawio-mcp-server"]
     }
   }
 }
 </syntaxhighlight>
<br>
Claude Desktopを再起動して、Draw.io MCP Serverが利用可能であることを確認する。<br>
<br>
==== Claude Codeでの設定 ====
Claude Code (CLI) でも、Claude Desktopと同様の設定ファイルを使用してDraw.io MCP Serverを利用できる。<br>
<br>
設定ファイルの場所は、以下の通りである。<br>
* Linux
*: ~/.config/claude/config.json
* Windows
*: %APPDATA%\claude\config.json
<br>
設定内容は、Claude Desktopと同じである。<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "drawio": {
       "command": "npx",
       "args": ["-y", "drawio-mcp-server"]
     }
   }
 }
 </syntaxhighlight>
<br>
==== ブラウザ拡張機能のインストール ====
Draw.io MCP Extensionをブラウザにインストールする必要がある。<br>
<br>
===== Google Chromeの場合 =====
# Chrome Web Storeから「Draw.io MCP Extension」を検索
# [追加] ボタンをクリックしてインストール
# 拡張機能がアクティブであることを確認
<br>
===== Mozilla Firefoxの場合 =====
# Firefox Add-onsから <u>"Draw.io MCP Extension"</u> を検索する。
# [Firefoxに追加]ボタンを押下してインストールする。
# 拡張機能がアクティブであることを確認する。
<br>
==== app.diagrams.netへのアクセス ====
# Webブラウザで https://app.diagrams.net を開く。
# Draw.io MCP Serverは、このページ上でダイアグラムを操作する。
<br><br>

== 設定とカスタマイズ ==
==== ポート設定 ====
Draw.io MCP Serverは、デフォルトでWebSocketポート3333を使用してブラウザ拡張機能と通信する。<br>
このポート番号は、カスタマイズすることができる。<br>
<br>
<u>※注意</u><br>
<u>各MCPサーバインスタンスが独自のWebSocketサーバを起動しようとするため、同じポートを使う複数のインスタンスは共存できない。</u><br>
<u>例えば、複数のClaude CodeおよびClaude Desktopを起動してDraw.io MCP Serverを使用する場合、同じポート番号を使用するとエラーになる。</u><br>
<u>そのため、異なるポート番号を指定する必要がある。</u><br>
<br>
カスタムポートの設定例を以下に示す。<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "drawio": {
       "command": "npx",
       "args": ["-y", "drawio-mcp-server", "--extension-port", "4000"]
     }
   }
 }
 </syntaxhighlight>
<br>
この設定により、ポート4000でWebSocket通信を行う。<br>
<br>
また、ブラウザ拡張機能側も同じポート番号を設定する必要がある。<br>
* ブラウザ拡張機能のポート設定
*# ブラウザ拡張機能のアイコンをクリックする。
*# 設定画面が表示される。
*# WebSocketポート番号を4000に変更する。
*# 保存して拡張機能を再読み込みする。
<br>
<br>

==== HTTPトランスポートの使用 ====
リモートアクセス用にHTTPトランスポートを有効化することができる。<br>
デフォルトポートは3000である。<br>
<br>
HTTPトランスポートの有効化例を以下に示す。<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
     "drawio": {
       "command": "npx",
       "args": ["-y", "drawio-mcp-server", "--transport", "http"]
     }
   }
 }
 </syntaxhighlight>
<br>
この設定により、HTTP経由でMCPサーバにアクセスできる。<br>
<br><br>

== 利用可能なツール ==
==== get-selected-cells ====
選択されたセルの情報を取得する。<br>
<br>
* 機能
*: ダイアグラム上で選択されているセル (シェイプ、エッジ) の詳細情報を取得する
*: セルID、スタイル、位置、サイズ等の属性を返す
<br>
 # 使用例 :
 
 選択されているセルの情報を取得してください。
<br>
==== get-shape-categories ====
利用可能なシェイプカテゴリの一覧を取得する。<br>
<br>
* 機能
*: Draw.ioライブラリで利用可能なシェイプカテゴリを列挙する
*: 各カテゴリに含まれるシェイプタイプを確認できる
<br>
 # 使用例 :
 
 利用可能なシェイプカテゴリを一覧表示してください。
<br>
==== get-specific-shapes ====
特定のシェイプ情報を取得する。<br>
<br>
* 機能
*: 指定されたシェイプタイプの詳細情報を取得する
*: スタイルプロパティ、デフォルト設定、カスタマイズオプションを確認できる
<br>
 # 使用例 :
 
 矩形シェイプの詳細情報を取得してください。
<br>
==== list-paged-model ====
ページ分割されたダイアグラムモデルを取得する。<br>
<br>
* 機能
*: 複数ページを持つダイアグラムの構造を取得する
*: 各ページのセル、階層、接続関係を確認できる
<br>
 # 使用例 :
 
 ダイアグラムの全ページモデルを取得してください。
<br>
==== add-rectangle ====
ダイアグラムに矩形を追加する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| x || number || X座標位置
|-
| y || number || Y座標位置
|-
| width || number || 矩形の幅
|-
| height || number || 矩形の高さ
|-
| style || string || スタイル設定 (オプション)
|-
| value || string || 表示テキスト (オプション)
|}
</center>
<br>
 # 使用例 :
 
 座標 (100, 100) に幅200、高さ100の矩形を追加してください。
<br>
==== add-edge ====
2つのセルを接続するエッジ (接続線) を追加する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| source || string || 接続元のセルID
|-
| target || string || 接続先のセルID
|-
| style || string || エッジのスタイル設定 (オプション)
|-
| value || string || エッジのラベル (オプション)
|}
</center>
<br>
 # 使用例 :
 
 セルAとセルBを矢印で接続してください。
<br>
==== add-custom-shape ====
カスタムシェイプを追加する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| shapeType || string || シェイプタイプ (円、菱形、楕円等)
|-
| x || number || X座標位置
|-
| y || number || Y座標位置
|-
| width || number || シェイプの幅
|-
| height || number || シェイプの高さ
|-
| style || string || スタイル設定 (オプション)
|-
| value || string || 表示テキスト (オプション)
|}
</center>
<br>
 # 使用例 :
 
 座標 (200, 200) に円形シェイプを追加してください。
<br>
==== delete-cell ====
指定されたセルを削除する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || 削除するセルのID
|}
</center>
<br>
 # 使用例 :
 
 セルID「cell-123」を削除してください。
<br>
==== edit-cell ====
既存のセルのプロパティを編集する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || 編集するセルのID
|-
| style || string || 新しいスタイル設定 (オプション)
|-
| value || string || 新しい表示テキスト (オプション)
|-
| geometry || object || 新しい位置・サイズ情報 (オプション)
|}
</center>
<br>
 # 使用例 :
 
 セルID「cell-123」のテキストを「データベース」に変更してください。
<br>
==== apply-library-style ====
ライブラリで定義されたスタイルをセルに適用する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || スタイルを適用するセルのID
|-
| libraryName || string || ライブラリ名
|-
| styleName || string || スタイル名
|}
</center>
<br>
 # 使用例 :
 
 セルID「cell-123」にAWSライブラリのEC2スタイルを適用してください。
<br>
==== set-cell-data ====
セルにカスタム属性データを保存する。<br>
<br>
<center>
{| class="wikitable"
|+ パラメータ
|-
! パラメータ !! 型 !! 説明
|-
| cellId || string || データを保存するセルのID
|-
| key || string || 属性のキー
|-
| value || string || 属性の値
|}
</center>
<br>
 # 使用例 :
 
 セルID「cell-123」にカスタム属性「type=server」を保存してください。
<br><br>

== 使用方法 ==
==== プロンプトの基本形式 ====
Claude DesktopでDraw.io MCP Serverを使用する際は、自然言語でダイアグラムの作成を依頼できる。<br>
<br>
 # 基本形式 :
 
 @Draw.io MCP Server <指示内容>
<br>
プロンプト内で、作成するダイアグラムの種類、含めるべき要素、レイアウト、スタイル等を指定する。<br>
Claude AIが自動的に適切なツールを選択して実行する。<br>
<br>
==== シンプルなフローチャートの作成 ====
 # プロンプト例 :
 
 @Draw.io MCP Server フローチャートを作成してください。
 スタートノード、処理ステップ3つ、判定ノード1つ、終了ノードを含めてください。
<br>
==== アーキテクチャ図の作成 ====
 # プロンプト例 :
 
 @Draw.io MCP Server データベースアーキテクチャ図を作成してください。
 ユーザサーバ、アプリケーションサーバ、データベースサーバを矩形で表現し、矢印で接続関係を示してください。
<br>
==== マイクロサービス図の作成 ====
 # プロンプト例 :
 
 @Draw.io MCP Server マイクロサービスのシステムアーキテクチャを描画してください。
 各サービスを異なる色の矩形で表現し、それぞれの通信プロトコルをラベル付きの矢印で示してください。
<br>
==== スタイル指定を含む作成 ====
 # プロンプト例 :
 
 @Draw.io MCP Server ネットワーク図を作成してください。
 ルータ、スイッチ、サーバを適切なアイコンで表現し、VLANごとに異なる背景色を使用してください。
<br>
==== 複数ページのダイアグラム ====
 # プロンプト例 :
 
 @Draw.io MCP Server システム設計書を作成してください。
 ページ1に概要図、ページ2に詳細アーキテクチャ、ページ3にデータフロー図を配置してください。
<br><br>

== システムアーキテクチャ ==
Draw.io MCP Serverは、3層アーキテクチャで構成されている。<br>
<br>
==== アーキテクチャ概要 ====
コンポーネント構成<br>
* MCPクライアント層
*: Claude Desktop、oterm、Zed 等
* Draw.io MCP Server層
*: Node.jsベースのTypeScript実装
* ブラウザ拡張機能層
*: Draw.io MCP Extension (Chrome / Firefox)
* Draw.io層
*: app.diagrams.net のWebアプリケーション
<br>
通信フロー<br>
# Claude DesktopからDraw.io MCP Serverにツール呼び出しを送信する。
# Draw.io MCP ServerがWebSocket (ポート3333) 経由でブラウザ拡張機能に接続する。
# ブラウザ拡張機能がDraw.io APIを使用してダイアグラムを操作する。
# 結果がサーバ経由でClaudeに返却される。
<br>
データフロー<br>
# プロンプトを入力する。(Claude Desktop)
# MCPツールを呼び出す。(Claude → Draw.io MCP Server)
# WebSocket通信を開始する。(Draw.io MCP Server → ブラウザ拡張機能)
# ダイアグラム操作 (ブラウザ拡張機能 → Draw.io)
# 結果が返却 (逆方向)
<br><br>

== トラブルシューティング ==
==== サーバに接続できない ====
以下の項目を確認する。<br>
* ブラウザ拡張機能がインストールされているか確認
*: Chrome Web StoreまたはFirefox Add-onsから正しくインストールされていることを確認
* ブラウザ拡張機能がアクティブであるか確認
*: 拡張機能のアイコンが表示され、有効化されていることを確認
* Claude Desktopが再起動されているか確認
*: 設定ファイル編集後、必ずClaude Desktopを再起動する
* デフォルトポート3333が使用可能か確認
*: 他のアプリケーションがポート3333を使用していないか確認
*: ファイアウォールでポート3333が開放されているか確認
<br>
==== ダイアグラムが更新されない ====
以下の項目を確認する。<br>
* app.diagrams.netがブラウザで開かれているか確認
*: ブラウザで app.diagrams.net が開かれていることが必須
* WebSocket接続が確立されているか確認
*: ブラウザの開発者ツールでWebSocket接続状態を確認
* ペイロードサイズを確認
*: 大規模なダイアグラム操作の場合、処理に時間がかかる可能性がある
<br>
==== ツール呼び出しエラーが発生する ====
以下の項目を確認する。<br>
* Node.jsのバージョンの確認
*: Node.js 20以上がインストールされていることを確認する。
*: <code>node --version</code> コマンドでバージョンを確認する。
* MCP Server設定ファイルの確認
*: claude_desktop_config.jsonファイルの設定が正しいかどうかを確認する。
*: JSON形式のエラーがないかどうかを確認する。
* サーバログの確認
*: Claude Desktopのデバッグコンソールでエラーログを確認する。
*: View > Toggle Developer Tools でコンソールを開く。
<br>
==== Firefox拡張機能が動作しない ====
以下の項目を確認する。<br>
* 拡張機能のバージョンの確認
*: バージョン1.3.0以降を使用していることを確認する。
* 拡張機能の権限の確認
*: app.diagrams.net へのアクセス権限が付与されているか確認する。
<br><br>

== Draw.io MCP Extension ==
==== ブラウザ拡張機能の役割 ====
Draw.io MCP Extensionは、Draw.io MCP ServerとDraw.io間の橋渡しを行うコンポーネントである。<br>
<br>
主要機能は以下の通りである。<br>
* WebSocket経由でDraw.io MCP Serverと通信
* Draw.io APIを使用してダイアグラムを操作
* セル選択、シェイプ追加、エッジ追加、セル削除等の操作を実行
* ダイアグラムの状態をサーバに返却
<br>
==== 拡張機能のインストール場所 ====
* Google Chrome
** Chrome Web Store から「Draw.io MCP Extension」を検索してインストール
** URL: chrome.google.com/webstore (検索キーワード: Draw.io MCP Extension)
*: <br>
* Mozilla Firefox
** Firefox Add-onsから <u>Draw.io MCP Extension</u> を検索してインストール
** URL: addons.mozilla.org (検索キーワード: Draw.io MCP Extension)
<br><br>

== 関連リソース ==
* [https://github.com/lgazo/drawio-mcp-server Draw.io MCP ServerのGitHub]
* [https://glama.ai/mcp/servers/@lgazo/drawio-mcp-server Draw.io MCP Server on GLAMA]
* [https://modelcontextprotocol.io/ Model Context Protocol公式サイト]
* [https://app.diagrams.net/ Draw.io公式サイト]
<br><br>

== Draw.io MCP Server (jgraph/drawio-mcp) ==
JGraph Ltd (Draw.ioの開発元) が公式に提供するMCPサーバである。<br>
npmパッケージ名は <u>@drawio/mcp</u> であり、Apache 2.0ライセンスで配布されている。<br>
<br>
前述の@lgazo/drawio-mcp-serverがブラウザ拡張機能経由でリアルタイムにDraw.ioを操作するのに対し、jgraph版はブラウザ拡張機能を必要としない。<br>
<br>
代わりに、以下に示す4つの統合アプローチを提供する。<br>
<br>
<center>
{| class="wikitable"
|+ Draw.io 統合方式の一覧
! 方式 !! 説明
|-
| MCP App Server || チャット内にインラインでダイアグラムを表示する方式<br>インストール不要で、公式ホストエンドポイント (https://mcp.draw.io/mcp) を使用する。
|-
| MCP Tool Server || WebブラウザでDraw.ioエディタを開いてダイアグラムを表示する方式<br><u>@drawio/mcp</u> パッケージをnpxで実行する。
|-
| Skill + CLI || <code>.drawio</code> ファイルを生成し、draw.io DesktopアプリでPNG / SVG / PDFにエクスポートする方式<br>draw.io Desktopアプリのインストールが必要
|-
| Project Instructions || インストール不要で、Pythonスクリプトを使用してDraw.ioのURLを生成する方式
|}
</center>
<br>
対応する入力フォーマットは、XML、CSV、Mermaid.jsの3種類である。<br>
Node.js 18.0.0以上が必要である (MCP Tool ServerおよびSkill + CLI使用時)。<br>
<br>
対応するMCPクライアントは以下の通りである。<br>
* Claude Desktop
* Claude Code (CLI)
* Cursor
* Windsurf
* その他のMCP対応クライアント
<br><br>

== jgraph版 : 4つの統合アプローチ ==
jgraph版Draw.io MCPは、4つの異なる統合アプローチを提供している。<br>
用途に応じて適切なアプローチを選択する。<br>
<br>
<center>
{| class="wikitable"
|+ 4つの統合アプローチの比較
! アプローチ !! 動作方法 !! 出力形式 !! インストール !! 対応フォーマット !! 対応クライアント !! ベストユースケース
|-
| MCP App Server || チャット内にインライン表示 || インラインダイアグラム || 不要 (公式ホスト使用) || XML, CSV, Mermaid || Claude Desktop || チャット内でダイアグラムを確認したい場合
|-
| MCP Tool Server || ブラウザでDraw.ioエディタを開く || ブラウザ表示 || npxで実行 || XML, CSV, Mermaid || Claude Desktop, Cursor, Windsurf等 || ダイアグラムをDraw.ioエディタで編集したい場合
|-
| Skill + CLI || .drawioファイル生成 + エクスポート || .drawio, PNG, SVG, PDF || npm install + draw.io Desktop || XML || Claude Code || ファイルとして保存・エクスポートしたい場合
|-
| Project Instructions || PythonでURL生成 || ブラウザ表示 || 不要 (Pythonのみ) || XML || 全クライアント || インストールなしでダイアグラムを生成したい場合
|}
</center>
<br><br>

== jgraph版 : 動作要件 ==
==== 共通要件 ====
* インターネット接続
*: Draw.ioのWebアプリケーション (https://app.diagrams.net) へのアクセスが必要
* MCPクライアント
*: Claude Desktop、Claude Code、Cursor、Windsurf等のMCP対応クライアント
<br>
==== MCP Tool Serverの要件 ====
* Node.js 18.0.0以上
* npm (npxコマンドが利用可能であること)
<br>
==== Skill + CLIの要件 ====
* Node.js 18.0.0以上
* npm または pnpm
* draw.io Desktopアプリ
*: エクスポート機能 (PNG / SVG / PDF) を使用する場合に必要
<br>
==== MCP App Serverの要件 ====
* 追加のインストールは不要
* 公式ホストエンドポイント (https://mcp.draw.io/mcp) を使用
<br>
==== Project Instructionsの要件 ====
* Python 3の実行環境
* 追加のパッケージインストールは不要
<br><br>

== jgraph版 : MCP Tool Serverのインストール ==
==== npxでの実行 (推奨) ====
グローバルインストール不要で、常に最新バージョンを使用できる。<br>
<br>
 npx @drawio/mcp
<br>
==== グローバルインストール ====
npmでグローバルにインストールする場合は、以下のコマンドを実行する。<br>
<br>
 npm install -g @drawio/mcp
<br>
インストール後、以下のコマンドで実行する。<br>
<br>
 drawio-mcp
<br>
==== ソースからのインストール ====
GitHubリポジトリからソースコードを取得してビルドする場合は、以下のコマンドを実行する。<br>
<br>
 git clone https://github.com/jgraph/drawio-mcp.git
 cd drawio-mcp
 npm install
 npm run build
<br>
ビルド後、以下のコマンドで実行する。<br>
<br>
 node dist/tool-server.js
<br>
==== Claude Desktopでの設定 ====
Claude Desktopの設定ファイルを編集して、MCP Tool Serverを登録する。<br>
<br>
設定ファイルの場所は、以下の通りである。<br>
* Linux
*: ~/.config/Claude/claude_desktop_config.json
* MacOS
*: ~/Library/Application Support/Claude/claude_desktop_config.json
* Windows
*: %APPDATA%\Claude\claude_desktop_config.json
<br>
設定内容を以下に示す。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
      "drawio-mcp": {
         "command": "npx",
         "args": ["-y", "@drawio/mcp"]
      }
   }
 }
 </syntaxhighlight>
<br>
Claude Desktopを再起動して設定を反映する。<br>
<br>
==== Claude Codeでの設定 ====
Claude Codeで使用する場合は、以下のコマンドを実行する。<br>
<br>
 claude mcp add drawio-mcp -- npx -y @drawio/mcp
<br>
または、設定ファイルを直接編集する。<br>
<br>
設定ファイルの場所は、以下の通りである。<br>
* MacOS / Linux
*: ~/.config/claude/config.json
* Windows
*: %APPDATA%\claude\config.json
<br>
設定内容は、Claude Desktopと同じJSONフォーマットを使用する。<br>
<br>
==== その他のMCPクライアントでの設定 ====
Cursor、Windsurf等の他のMCPクライアントでも使用できる。<br>
各クライアントの設定方法に従い、以下の情報を設定する。<br>
* コマンド
*: <code>npx</code>
* 引数
*: <code>-y</code>, <code>@drawio/mcp</code>
<br><br>

== jgraph版 : MCP App Serverの設定 ==
MCP App Serverは、チャット内にダイアグラムをインラインで表示する方式である。<br>
インストール不要で、公式ホストのエンドポイントを使用する。<br>
<br>
==== 公式ホストエンドポイント ====
JGraphが提供する公式エンドポイントを使用する。<br>
* https://mcp.draw.io/mcp
<br>
Claude Desktopの設定で、上記URLをMCP App Serverとして登録する。<br>
<br>
==== セルフホスト (Node.js) ====
MCP App Serverをセルフホストする場合は、以下のコマンドを実行する。<br>
<br>
 npx @drawio/mcp --app-server
<br>
デフォルトでは、ポート3000でHTTPサーバが起動する。<br>
<br>
==== Claude Desktopでの設定 (stdio) ====
stdioトランスポートを使用してMCP App Serverを起動する場合は、以下の設定を使用する。<br>
<br>
 <syntaxhighlight lang="json">
 {
   "mcpServers": {
      "drawio-app": {
         "command": "npx",
         "args": ["-y", "@drawio/mcp", "--app-server"]
      }
   }
 }
 </syntaxhighlight>
<br>
==== Cloudflare Workersへのデプロイ ====
MCP App ServerをCloudflare Workersにデプロイすることも可能である。<br>
<br>
リポジトリのクローンとデプロイは以下のコマンドで実行する。<br>
<br>
 git clone https://github.com/jgraph/drawio-mcp.git
 cd drawio-mcp
 npm install
 npx wrangler deploy
<br>
デプロイ後、Cloudflare WorkersのURLをMCPクライアントに設定する。<br>
<br><br>

== jgraph版 : Skill + CLIの設定 ==
Skill + CLIは、<code>.drawio</code>ファイルを生成し、draw.io DesktopアプリでPNG / SVG / PDFにエクスポートする方式である。<br>
<br>
==== 前提条件 ====
* Node.js 18.0.0以上
* draw.io Desktopアプリ
*: エクスポート機能を使用するために必要
*: [https://github.com/jgraph/drawio-desktop/releases draw.io Desktop公式リリースページ] からダウンロード可能
<br>
==== インストール ====
グローバルにインストールする場合は、以下のコマンドを実行する。<br>
<br>
 npm install -g @drawio/mcp
<br>
プロジェクト単位でインストールする場合は、以下のコマンドを実行する。<br>
<br>
 npm install @drawio/mcp
<br>
==== draw.io CLIの場所 ====
draw.io Desktopアプリのコマンドライン実行ファイルの場所は、OSにより異なる。<br>
<br>
* MacOS
*: <code>/Applications/draw.io.app/Contents/MacOS/draw.io</code>
* Linux
*: <code>drawio</code> (PATHに含まれている場合)
*: または、AppImageの場所を直接指定する
* Windows
*: <code>C:\Program Files\draw.io\draw.io.exe</code>
<br>
==== エクスポートフォーマット ====
Skill + CLIで対応しているエクスポートフォーマットを以下に示す。<br>
<br>
<center>
{| class="wikitable"
|+ エクスポートフォーマット
! フォーマット !! 拡張子 !! 説明
|-
| Draw.io || .drawio || Draw.ioネイティブ形式 (XML)
|-
| PNG || .png || ラスター画像形式
|-
| SVG || .svg || ベクター画像形式
|-
| PDF || .pdf || PDF文書形式
|}
</center>
<br><br>

== jgraph版 : Project Instructionsの設定 ==
Project Instructionsは、インストール不要でダイアグラムを生成する方式である。<br>
Pythonスクリプトを使用してDraw.ioのURLを生成し、ブラウザで開く。<br>
<br>
==== 概要 ====
MCPサーバのインストールが不要であり、全てのMCPクライアントで動作する。<br>
プロジェクトの指示ファイル (CLAUDE.mdやcursor rules等) にDraw.io URLの生成方法を記述することで、LLMがPythonスクリプトを実行してダイアグラムを生成する。<br>
<br>
==== セットアップ方法 ====
プロジェクトの指示ファイルに以下の内容を追記する。<br>
<br>
 <syntaxhighlight lang="text">
 When generating diagrams, create a draw.io compatible XML representation
 and then generate a URL using the following Python code:
 
 import zlib, base64
 xml = '<your draw.io XML>'
 compressed = zlib.compress(xml.encode('utf-8'), 9)[2:-4]
 encoded = base64.urlsafe_b64encode(compressed).decode('utf-8')
 url = f'https://app.diagrams.net/#create={encoded}'
 </syntaxhighlight>
<br>
==== 動作の仕組み ====
# LLMがDraw.io互換のXMLを生成する。
# Pythonのzlibで圧縮 (deflateRaw) を行う。
# base64でURLセーフエンコードを行う。
# https://app.diagrams.net/#create= の後にエンコード済みデータを付加してURLを生成する。
# 生成されたURLをWebブラウザで開くと、Draw.ioエディタにダイアグラムが表示される。
<br><br>

== jgraph版 : MCP Tool Serverのツール ==
MCP Tool Serverは、3つのツールを提供する。<br>
各ツールは、異なる入力フォーマットに対応している。<br>
<br>
==== open_drawio_xml ====
Draw.io XML形式のダイアグラムをブラウザで開く。<br>
<br>
<center>
{| class="wikitable"
|+ open_drawio_xmlのパラメータ
! パラメータ !! 型 !! 必須 !! 説明
|-
| content || string || はい || Draw.io XML形式のダイアグラムデータ
|-
| lightbox || boolean || いいえ || 読み取り専用のライトボックスモードで開く。(デフォルト: false)
|-
| dark || boolean || いいえ || ダークモードで表示する。(デフォルト: false)
|}
</center>
<br>
==== open_drawio_csv ====
CSV形式のデータからダイアグラムをWebブラウザで開く。<br>
<br>
<center>
{| class="wikitable"
|+ open_drawio_csvのパラメータ
! パラメータ !! 型 !! 必須 !! 説明
|-
| content || string || はい || CSV形式のダイアグラムデータ
|-
| lightbox || boolean || いいえ || 読み取り専用のライトボックスモードで開く。(デフォルト: false)
|-
| dark || boolean || いいえ || ダークモードで表示する。(デフォルト: false)
|}
</center>
<br>
==== open_drawio_mermaid ====
Mermaid.js形式のダイアグラムをブラウザで開く。<br>
<br>
<center>
{| class="wikitable"
|+ open_drawio_mermaidのパラメータ
! パラメータ !! 型 !! 必須 !! 説明
|-
| content || string || はい || Mermaid.js形式のダイアグラムデータ
|-
| lightbox || boolean || いいえ || 読み取り専用のライトボックスモードで開く。(デフォルト: false)
|-
| dark || boolean || いいえ || ダークモードで表示する。(デフォルト: false)
|}
</center>
<br><br>

== jgraph版 : 使用方法 ==
==== MCP Tool Serverでの使用例 ====
MCP Tool Serverを使用する場合のプロンプト例を以下に示す。<br>
<br>
* Mermaidダイアグラムの場合
*: <syntaxhighlight lang="text">
 # プロンプト例 :
 
 以下のMermaid形式でシーケンス図をDraw.ioで作成してください。
 sequenceDiagram
    Client->>Server: HTTPリクエスト
    Server->>Database: クエリ実行
    Database-->>Server: 結果返却
    Server-->>Client: HTTPレスポンス
 </syntaxhighlight>
*: <br>
* CSVデータからダイアグラムを作成する場合
*: <syntaxhighlight lang="text">
 # プロンプト例 :
 
 以下の組織データからCSV形式で組織図をDraw.ioで作成してください。
 CEO配下にCTO、CFO、COOの3つのポジションがあります。
 </syntaxhighlight>
*: <br>
* XMLダイアグラムの場合
*: <syntaxhighlight lang="text">
 # プロンプト例 :
 
 Webアプリケーションの3層アーキテクチャ図をDraw.io XMLで作成してください。
 フロントエンド、バックエンド、データベースの3層を含めてください。
 </syntaxhighlight>
<br>
==== Skill + CLIでの使用例 ====
Claude Code (CLI) でSkill + CLIを使用する場合は、<code>/drawio</code> コマンドを使用する。<br>
<br>
 # 使用例 :
 
 /drawio マイクロサービスのアーキテクチャ図を作成してください。
 各サービス間の通信方式も記載してください。
<br>
エクスポートを含む使用例を以下に示す。<br>
 # 使用例 :
 
 /drawio ネットワーク構成図を作成して、PNGファイルとしてエクスポートしてください。
<br>
==== Project Instructionsでの使用例 ====
Project Instructionsを使用する場合のプロンプト例を以下に示す。<br>
<br>
 # プロンプト例 :
 
 システムのデプロイメントフロー図を作成して、Draw.ioで開けるURLを生成してください。
<br><br>

== jgraph版 : 動作の仕組み ==
==== MCP Tool Serverの処理フロー ====
MCP Tool Serverは、以下の手順でダイアグラムを表示する。<br>
<br>
# MCPクライアントからダイアグラムデータ (XML / CSV / Mermaid) を受信する。
# pakoライブラリを使用して、データをdeflateRaw圧縮する。
# 圧縮データをBase64エンコードする。
# https://app.diagrams.net/#create= の後にエンコード済みデータを付加したURLを生成する。
# 生成されたURLをWebブラウザで開き、Draw.ioエディタにダイアグラムを表示する。
<br>
==== MCP App Serverの処理フロー ====
MCP App Serverは、以下の手順でダイアグラムを表示する。<br>
<br>
# MCPクライアントからダイアグラムデータを受信する。
# サーバ側でダイアグラムデータを処理する。
# チャットインターフェース内にダイアグラムをインラインで描画する。
# ユーザはチャット内で直接ダイアグラムを確認できる。
<br>
==== URLの安全性 ====
MCP Tool ServerおよびProject Instructionsで生成されるURLは、ハッシュフラグメント方式 (<code>#create=</code>) を使用している。<br>
<br>
* ハッシュフラグメント (<code>#</code> 以降のデータ) は、Webブラウザからサーバに送信されない
*: そのため、ダイアグラムデータがDraw.ioのサーバに送信されることはない
* 全てのデータ処理はブラウザ内で完結する
* 機密性の高いダイアグラムデータも安全に扱うことができる
<br><br>

== jgraph版 : トラブルシューティング ==
==== npxが見つからない場合 ====
以下の項目を確認する。<br>
<br>
* Node.jsのバージョン確認
*: Node.js 18.0.0以上がインストールされていることを確認する。
*: <code>node --version</code> コマンドでバージョンを確認する。
* npxの確認
*: <code>npx --version</code> コマンドでnpxが利用可能であることを確認する。
*: npxが見つからない場合は、Node.jsを再インストールする。
<br>
==== ダイアグラムが開かない場合 ====
以下の項目を確認する。<br>
<br>
* インターネット接続の確認
*: https://app.diagrams.net にアクセスできることを確認する。
* Webブラウザの確認
*: デフォルトブラウザが設定されていることを確認する。
*: ポップアップブロッカーがURLの展開を妨げていないか確認する。
* URLの長さ制限
*: 非常に大きなダイアグラムの場合、URLの長さがブラウザの制限を超える可能性がある。
*: その場合は、Skill + CLIアプローチを使用してファイルとして生成することを推奨する。
<br>
==== draw.io CLIでのエクスポートが失敗する場合 ====
以下の項目を確認する。<br>
<br>
* draw.io Desktopの確認
*: draw.io Desktopアプリがインストールされていることを確認する。
*: CLIコマンドがPATHに含まれていることを確認する。
* ディスプレイ環境の確認 (Linux)
*: LinuxでGUIなし環境の場合、<code>xvfb-run</code> が必要になることがある。
*: <code>xvfb-run drawio --export --format png diagram.drawio</code>
<br>
==== Claude Desktopで認識されない場合 ====
以下の項目を確認する。<br>
<br>
* 設定ファイルの確認
*: <u>claude_desktop_config.jsonファイル</u> のJSON形式が正しいことを確認する。
*: <code>mcpServers</code> キーの下に正しく設定されていることを確認する。
* Claude Desktopの再起動
*: 設定ファイル編集後、Claude Desktopを再起動する。
* ログの確認
*: Claude Desktopのデバッグコンソール ([View] - [Toggle Developer Tools]) でエラーログを確認する。
<br><br>


{{#seo:
|title={{PAGENAME}} : Draw.io MCP Server | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,MCP,Model Context Protocol,Draw.io,Diagram,Flowchart,Architecture,UML,Sequence Diagram,Network Diagram,Claude,AI,Machine Learning,Node.js,TypeScript,Browser Extension,WebSocket,Visualization,jgraph,@drawio/mcp,MCP App Server,Mermaid,CSV,Skill,CLI
|description={{PAGENAME}} - Draw.io MCP Serverに関する包括的なガイド、コミュニティ版とJGraph公式版の両方を網羅したAIアシスタントによるダイアグラム作成と編集の自動化 | This page is {{PAGENAME}} in our wiki about Draw.io MCP servers and AI-powered diagram creation
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:設定]]