MCPサーバ - Draw.io

概要

Draw.io MCP Server は、AI システムがDraw.io ダイアグラムをプログラマティックに制御・検査できるようにするMCP (Model Context Protocol) サーバである。
このMCPを使用することにより、Claude等のLLMがDraw.io上でフローチャート、シーケンス図、アーキテクチャ図、ネットワーク図等の様々なダイアグラムを自動的に作成・編集することができる。

Draw.io MCP Serverは、以下に示すような機能を提供する。

• ダイアグラムの検査機能 (選択セル取得、シェイプカテゴリ列挙、ページモデル取得)
• ダイアグラムの編集機能 (矩形追加、エッジ追加、カスタムシェイプ追加、セル削除)
• セルのプロパティ編集とスタイル適用
• カスタム属性の保存と管理

Draw.io MCP Serverは、WebSocket (デフォルトポート: 3333) を使用してブラウザ拡張機能経由でDraw.ioと通信する。
これにより、Claude Desktop、oterm、Zed等のMCPクライアントと統合することができる。

Draw.io MCP Serverの最大の特徴は、Webブラウザ拡張機能を介してリアルタイムにDraw.ioダイアグラムを操作できることである。
全てのダイアグラム処理機能は、TypeScriptで実装されており、Node.js 20以上で動作する。

Draw.io MCP Serverの機能

ダイアグラム検査機能

• 選択されたセルの取得 (get-selected-cells)
• シェイプカテゴリの列挙 (get-shape-categories)
• 特定のシェイプ情報の取得 (get-specific-shapes)
• ページ分割されたダイアグラムモデルの取得 (list-paged-model)

ダイアグラム編集機能

• 矩形の追加 (add-rectangle)
• エッジ (接続線) の追加 (add-edge)
• カスタムシェイプの追加 (add-custom-shape)
• セルの削除 (delete-cell)
• セルのプロパティ編集 (edit-cell)

スタイルとデータ管理

• ライブラリスタイルの適用 (apply-library-style)
• カスタム属性の保存 (set-cell-data)
• シェイプのプロパティ変更

対応ダイアグラムタイプ

Draw.io MCP Serverは、Draw.ioで作成可能なすべてのダイアグラムタイプをサポートしている。

対応ダイアグラムタイプ

タイプ	説明
フローチャート	プロセスフローと意思決定を視覚化
シーケンス図	システムコンポーネント間の相互作用を時系列で表現
アーキテクチャ図	システムアーキテクチャとコンポーネント構成を記述
ネットワーク図	ネットワークトポロジーとデバイス接続を表現
データベース設計図	データベーススキーマとER図を記述
UML図	クラス図、アクティビティ図、ユースケース図等
マインドマップ	アイデアと概念の階層構造を視覚化
組織図	組織構造と報告関係を表現
Ganttチャート	プロジェクトタイムラインとタスク管理

動作要件

システム要件

• Node.js 20以上
• Draw.io MCP Browser Extension (Chrome または Firefox)
• MCPクライアント (Claude Desktop、oterm、Zed等)

必須コンポーネント

• Draw.io MCP Server (TypeScript実装)
• Draw.io MCP Extension (ブラウザ拡張機能)
• app.diagrams.net へのアクセス

ネットワーク要件

• WebSocketポート (デフォルト: 3333) の利用可能性
• ファイアウォールでの指定ポートの開放
• ブラウザ拡張機能とサーバ間の通信許可

インストール

Draw.io MCP Serverのインストール

Draw.io MCP Serverは、MCPクライアントの設定ファイルを編集することにより、自動的にインストールされる。
以下に示す設定例を参照すること。

Claude Desktopでの設定

Claude Desktopの設定ファイルを編集する。

設定ファイルの場所は、以下の通りである。

• Linux

  ~/.config/Claude/claude_desktop_config.json

• Windows

  %APPDATA%\Claude\claude_desktop_config.json

npmを使用する場合の設定を以下に示す。

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

pnpmを使用する場合の設定を以下に示す。

 {
   "mcpServers": {
     "drawio": {
       "command": "pnpm",
       "args": ["dlx", "@lgazo/drawio-mcp-server"]
     }
   }
 }

yarnを使用する場合の設定を以下に示す。

 {
   "mcpServers": {
     "drawio": {
       "command": "yarn",
       "args": ["dlx", "@lgazo/drawio-mcp-server"]
     }
   }
 }

Claude Desktopを再起動して、Draw.io MCP Serverが利用可能であることを確認する。

Claude Codeでの設定

Claude Code (CLI) でも、Claude Desktopと同様の設定ファイルを使用してDraw.io MCP Serverを利用できる。

設定ファイルの場所は、以下の通りである。

• Linux

  ~/.config/claude/config.json

• Windows

  %APPDATA%\claude\config.json

設定内容は、Claude Desktopと同じである。

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

ブラウザ拡張機能のインストール

Draw.io MCP Extensionをブラウザにインストールする必要がある。

Google Chromeの場合

1. Chrome Web Storeから「Draw.io MCP Extension」を検索
2. [追加] ボタンをクリックしてインストール
3. 拡張機能がアクティブであることを確認

Mozilla Firefoxの場合

1. Firefox Add-onsから "Draw.io MCP Extension" を検索する。
2. [Firefoxに追加]ボタンを押下してインストールする。
3. 拡張機能がアクティブであることを確認する。

app.diagrams.netへのアクセス

1. Webブラウザで app.diagrams.net を開く。
2. Draw.io MCP Serverは、このページ上でダイアグラムを操作する。

設定とカスタマイズ

ポート設定

Draw.io MCP Serverは、デフォルトでWebSocketポート3333を使用してブラウザ拡張機能と通信する。
このポート番号は、カスタマイズすることができる。

# カスタムポートの設定例 :
npx @lgazo/drawio-mcp-server --extension-port 4000

この設定により、ポート4000でWebSocket通信を行う。
ブラウザ拡張機能側も同じポート番号を設定する必要がある。

HTTPトランスポートの使用

リモートアクセス用にHTTPトランスポートを有効化することができる。
デフォルトポートは3000である。

# HTTPトランスポートの有効化例 :
npx @lgazo/drawio-mcp-server --transport http

この設定により、HTTP経由でMCPサーバにアクセスできる。

利用可能なツール

get-selected-cells

選択されたセルの情報を取得する。

• 機能

  ダイアグラム上で選択されているセル (シェイプ、エッジ) の詳細情報を取得する

  セルID、スタイル、位置、サイズ等の属性を返す

# 使用例 :

選択されているセルの情報を取得してください。

get-shape-categories

利用可能なシェイプカテゴリの一覧を取得する。

• 機能

  Draw.ioライブラリで利用可能なシェイプカテゴリを列挙する

  各カテゴリに含まれるシェイプタイプを確認できる

# 使用例 :

利用可能なシェイプカテゴリを一覧表示してください。

get-specific-shapes

特定のシェイプ情報を取得する。

• 機能

  指定されたシェイプタイプの詳細情報を取得する

  スタイルプロパティ、デフォルト設定、カスタマイズオプションを確認できる

# 使用例 :

矩形シェイプの詳細情報を取得してください。

list-paged-model

ページ分割されたダイアグラムモデルを取得する。

• 機能

  複数ページを持つダイアグラムの構造を取得する

  各ページのセル、階層、接続関係を確認できる

# 使用例 :

ダイアグラムの全ページモデルを取得してください。

add-rectangle

ダイアグラムに矩形を追加する。

パラメータ

パラメータ	型	説明
x	number	X座標位置
y	number	Y座標位置
width	number	矩形の幅
height	number	矩形の高さ
style	string	スタイル設定 (オプション)
value	string	表示テキスト (オプション)

# 使用例 :

座標 (100, 100) に幅200、高さ100の矩形を追加してください。

add-edge

2つのセルを接続するエッジ (接続線) を追加する。

パラメータ

パラメータ	型	説明
source	string	接続元のセルID
target	string	接続先のセルID
style	string	エッジのスタイル設定 (オプション)
value	string	エッジのラベル (オプション)

# 使用例 :

セルAとセルBを矢印で接続してください。

add-custom-shape

カスタムシェイプを追加する。

パラメータ

パラメータ	型	説明
shapeType	string	シェイプタイプ (円、菱形、楕円等)
x	number	X座標位置
y	number	Y座標位置
width	number	シェイプの幅
height	number	シェイプの高さ
style	string	スタイル設定 (オプション)
value	string	表示テキスト (オプション)

# 使用例 :

座標 (200, 200) に円形シェイプを追加してください。

delete-cell

指定されたセルを削除する。

パラメータ

パラメータ	型	説明
cellId	string	削除するセルのID

# 使用例 :

セルID「cell-123」を削除してください。

edit-cell

既存のセルのプロパティを編集する。

パラメータ

パラメータ	型	説明
cellId	string	編集するセルのID
style	string	新しいスタイル設定 (オプション)
value	string	新しい表示テキスト (オプション)
geometry	object	新しい位置・サイズ情報 (オプション)

# 使用例 :

セルID「cell-123」のテキストを「データベース」に変更してください。

apply-library-style

ライブラリで定義されたスタイルをセルに適用する。

パラメータ

パラメータ	型	説明
cellId	string	スタイルを適用するセルのID
libraryName	string	ライブラリ名
styleName	string	スタイル名

# 使用例 :

セルID「cell-123」にAWSライブラリのEC2スタイルを適用してください。

set-cell-data

セルにカスタム属性データを保存する。

パラメータ

パラメータ	型	説明
cellId	string	データを保存するセルのID
key	string	属性のキー
value	string	属性の値

# 使用例 :

セルID「cell-123」にカスタム属性「type=server」を保存してください。

使用方法

プロンプトの基本形式

Claude DesktopでDraw.io MCP Serverを使用する場合は、以下の形式でプロンプトを記述する。

# 基本形式 :

@Draw.io MCP Server <指示内容>

プロンプト内で、作成するダイアグラムの種類、含めるべき要素、レイアウト、スタイル等を指定する。

シンプルなフローチャートの作成

# プロンプト例 :

@Draw.io MCP Server フローチャートを作成してください。
スタートノード、処理ステップ3つ、判定ノード1つ、終了ノードを含めてください。

アーキテクチャ図の作成

# プロンプト例 :

@Draw.io MCP Server データベースアーキテクチャ図を作成してください。
ユーザサーバ、アプリケーションサーバ、データベースサーバを矩形で表現し、矢印で接続関係を示してください。

マイクロサービス図の作成

# プロンプト例 :

@Draw.io MCP Server マイクロサービスのシステムアーキテクチャを描画してください。
各サービスを異なる色の矩形で表現し、それぞれの通信プロトコルをラベル付きの矢印で示してください。

スタイル指定を含む作成

# プロンプト例 :

@Draw.io MCP Server ネットワーク図を作成してください。
ルータ、スイッチ、サーバを適切なアイコンで表現し、VLANごとに異なる背景色を使用してください。

複数ページのダイアグラム

# プロンプト例 :

@Draw.io MCP Server システム設計書を作成してください。
ページ1に概要図、ページ2に詳細アーキテクチャ、ページ3にデータフロー図を配置してください。

システムアーキテクチャ

Draw.io MCP Serverは、3層アーキテクチャで構成されている。

アーキテクチャ概要

コンポーネント構成

• MCPクライアント層

  Claude Desktop、oterm、Zed 等

• Draw.io MCP Server層

  Node.jsベースのTypeScript実装

• ブラウザ拡張機能層

  Draw.io MCP Extension (Chrome / Firefox)

• Draw.io層

  app.diagrams.net のWebアプリケーション

通信フロー

1. Claude DesktopからDraw.io MCP Serverにツール呼び出しを送信する。
2. Draw.io MCP ServerがWebSocket (ポート3333) 経由でブラウザ拡張機能に接続する。
3. ブラウザ拡張機能がDraw.io APIを使用してダイアグラムを操作する。
4. 結果がサーバ経由でClaudeに返却される。

データフロー

1. プロンプトを入力する。(Claude Desktop)
2. MCPツールを呼び出す。(Claude → Draw.io MCP Server)
3. WebSocket通信を開始する。(Draw.io MCP Server → ブラウザ拡張機能)
4. ダイアグラム操作 (ブラウザ拡張機能 → Draw.io)
5. 結果が返却 (逆方向)

トラブルシューティング

サーバに接続できない

以下の項目を確認する。

• ブラウザ拡張機能がインストールされているか確認

  Chrome Web StoreまたはFirefox Add-onsから正しくインストールされていることを確認

• ブラウザ拡張機能がアクティブであるか確認

  拡張機能のアイコンが表示され、有効化されていることを確認

• Claude Desktopが再起動されているか確認

  設定ファイル編集後、必ずClaude Desktopを再起動する

• デフォルトポート3333が使用可能か確認

  他のアプリケーションがポート3333を使用していないか確認

  ファイアウォールでポート3333が開放されているか確認

ダイアグラムが更新されない

以下の項目を確認する。

• app.diagrams.netがブラウザで開かれているか確認

  ブラウザで app.diagrams.net が開かれていることが必須

• WebSocket接続が確立されているか確認

  ブラウザの開発者ツールでWebSocket接続状態を確認

• ペイロードサイズを確認

  大規模なダイアグラム操作の場合、処理に時間がかかる可能性がある

ツール呼び出しエラーが発生する

以下の項目を確認する。

• Node.jsのバージョンの確認

  Node.js 20以上がインストールされていることを確認する。

  node --version コマンドでバージョンを確認する。

• MCP Server設定ファイルの確認

  claude_desktop_config.jsonファイルの設定が正しいかどうかを確認する。

  JSON形式のエラーがないかどうかを確認する。

• サーバログの確認

  Claude Desktopのデバッグコンソールでエラーログを確認する。

  View > Toggle Developer Tools でコンソールを開く。

Firefox拡張機能が動作しない

以下の項目を確認する。

• 拡張機能のバージョンの確認

  バージョン1.3.0以降を使用していることを確認する。

• 拡張機能の権限の確認

  app.diagrams.net へのアクセス権限が付与されているか確認する。

Draw.io MCP Extension

ブラウザ拡張機能の役割

Draw.io MCP Extensionは、Draw.io MCP ServerとDraw.io間の橋渡しを行うコンポーネントである。

主要機能は以下の通りである。

• WebSocket経由でDraw.io MCP Serverと通信
• Draw.io APIを使用してダイアグラムを操作
• セル選択、シェイプ追加、エッジ追加、セル削除等の操作を実行
• ダイアグラムの状態をサーバに返却

拡張機能のインストール場所

• Google Chrome
  • Chrome Web Store から「Draw.io MCP Extension」を検索してインストール
  • URL: chrome.google.com/webstore (検索キーワード: Draw.io MCP Extension)

  
  

• Mozilla Firefox
  • Firefox Add-onsから Draw.io MCP Extension を検索してインストール
  • URL: addons.mozilla.org (検索キーワード: Draw.io MCP Extension)

関連リソース

• Draw.io MCP ServerのGitHub
• Draw.io MCP Server on GLAMA
• Model Context Protocol公式サイト
• Draw.io公式サイト