MCPサーバ - Draw.io

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=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の場合

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

Mozilla Firefoxの場合

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

app.diagrams.netへのアクセス

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

設定とカスタマイズ

ポート設定

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

※注意
各MCPサーバインスタンスが独自のWebSocketサーバを起動しようとするため、同じポートを使う複数のインスタンスは共存できない。
例えば、複数のClaude CodeおよびClaude Desktopを起動してDraw.io MCP Serverを使用する場合、同じポート番号を使用するとエラーになる。
そのため、異なるポート番号を指定する必要がある。

カスタムポートの設定例を以下に示す。

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

この設定により、ポート4000でWebSocket通信を行う。

また、ブラウザ拡張機能側も同じポート番号を設定する必要がある。

ブラウザ拡張機能のポート設定
1. ブラウザ拡張機能のアイコンをクリックする。
2. 設定画面が表示される。
3. WebSocketポート番号を4000に変更する。
4. 保存して拡張機能を再読み込みする。

HTTPトランスポートの使用

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

HTTPトランスポートの有効化例を以下に示す。

 {
   "mcpServers": {
     "drawio": {
       "command": "npx",
       "args": ["@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 <指示内容>

プロンプト内で、作成するダイアグラムの種類、含めるべき要素、レイアウト、スタイル等を指定する。
Claude AIが自動的に適切なツールを選択して実行する。

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

# プロンプト例 :

@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アプリケーション

通信フロー

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

データフロー

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

トラブルシューティング

サーバに接続できない

以下の項目を確認する。

ブラウザ拡張機能がインストールされているか確認
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 (jgraph/drawio-mcp)

JGraph Ltd (Draw.ioの開発元) が公式に提供するMCPサーバである。
npmパッケージ名は @drawio/mcp であり、Apache 2.0ライセンスで配布されている。

前述の@lgazo/drawio-mcp-serverがブラウザ拡張機能経由でリアルタイムにDraw.ioを操作するのに対し、jgraph版はブラウザ拡張機能を必要としない。

代わりに、以下に示す4つの統合アプローチを提供する。

Draw.io 統合方式の一覧
方式	説明
MCP App Server	チャット内にインラインでダイアグラムを表示する方式インストール不要で、公式ホストエンドポイント (https://mcp.draw.io/mcp) を使用する。
MCP Tool Server	WebブラウザでDraw.ioエディタを開いてダイアグラムを表示する方式 @drawio/mcp パッケージをnpxで実行する。
Skill + CLI	`.drawio` ファイルを生成し、draw.io DesktopアプリでPNG / SVG / PDFにエクスポートする方式 draw.io Desktopアプリのインストールが必要
Project Instructions	インストール不要で、Pythonスクリプトを使用してDraw.ioのURLを生成する方式

対応する入力フォーマットは、XML、CSV、Mermaid.jsの3種類である。
Node.js 18.0.0以上が必要である (MCP Tool ServerおよびSkill + CLI使用時)。

対応するMCPクライアントは以下の通りである。

Claude Desktop
Claude Code (CLI)
Cursor
Windsurf
その他のMCP対応クライアント

jgraph版 : 4つの統合アプローチ

jgraph版Draw.io MCPは、4つの異なる統合アプローチを提供している。
用途に応じて適切なアプローチを選択する。

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	全クライアント	インストールなしでダイアグラムを生成したい場合

jgraph版 : 動作要件

共通要件

インターネット接続
Draw.ioのWebアプリケーション (https://app.diagrams.net) へのアクセスが必要
MCPクライアント
Claude Desktop、Claude Code、Cursor、Windsurf等のMCP対応クライアント

MCP Tool Serverの要件

Node.js 18.0.0以上
npm (npxコマンドが利用可能であること)

Skill + CLIの要件

Node.js 18.0.0以上
npm または pnpm
draw.io Desktopアプリ
エクスポート機能 (PNG / SVG / PDF) を使用する場合に必要

MCP App Serverの要件

追加のインストールは不要
公式ホストエンドポイント (https://mcp.draw.io/mcp) を使用

Project Instructionsの要件

Python 3の実行環境
追加のパッケージインストールは不要

jgraph版 : MCP Tool Serverのインストール

npxでの実行 (推奨)

グローバルインストール不要で、常に最新バージョンを使用できる。

npx @drawio/mcp

グローバルインストール

npmでグローバルにインストールする場合は、以下のコマンドを実行する。

npm install -g @drawio/mcp

インストール後、以下のコマンドで実行する。

drawio-mcp

ソースからのインストール

GitHubリポジトリからソースコードを取得してビルドする場合は、以下のコマンドを実行する。

git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp
npm install
npm run build

ビルド後、以下のコマンドで実行する。

node dist/tool-server.js

Claude Desktopでの設定

Claude Desktopの設定ファイルを編集して、MCP Tool Serverを登録する。

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

Linux
~/.config/Claude/claude_desktop_config.json
MacOS
~/Library/Application Support/Claude/claude_desktop_config.json
Windows
%APPDATA%\Claude\claude_desktop_config.json

設定内容を以下に示す。

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

Claude Desktopを再起動して設定を反映する。

Claude Codeでの設定

Claude Codeで使用する場合は、以下のコマンドを実行する。

claude mcp add drawio-mcp -- npx -y @drawio/mcp

または、設定ファイルを直接編集する。

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

MacOS / Linux
~/.config/claude/config.json
Windows
%APPDATA%\claude\config.json

設定内容は、Claude Desktopと同じJSONフォーマットを使用する。

その他のMCPクライアントでの設定

Cursor、Windsurf等の他のMCPクライアントでも使用できる。
各クライアントの設定方法に従い、以下の情報を設定する。

コマンド
npx
引数
-y, @drawio/mcp

jgraph版 : MCP App Serverの設定

MCP App Serverは、チャット内にダイアグラムをインラインで表示する方式である。
インストール不要で、公式ホストのエンドポイントを使用する。

公式ホストエンドポイント

JGraphが提供する公式エンドポイントを使用する。

https://mcp.draw.io/mcp

Claude Desktopの設定で、上記URLをMCP App Serverとして登録する。

セルフホスト (Node.js)

MCP App Serverをセルフホストする場合は、以下のコマンドを実行する。

npx @drawio/mcp --app-server

デフォルトでは、ポート3000でHTTPサーバが起動する。

Claude Desktopでの設定 (stdio)

stdioトランスポートを使用してMCP App Serverを起動する場合は、以下の設定を使用する。

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

Cloudflare Workersへのデプロイ

MCP App ServerをCloudflare Workersにデプロイすることも可能である。

リポジトリのクローンとデプロイは以下のコマンドで実行する。

git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp
npm install
npx wrangler deploy

デプロイ後、Cloudflare WorkersのURLをMCPクライアントに設定する。

jgraph版 : Skill + CLIの設定

Skill + CLIは、.drawioファイルを生成し、draw.io DesktopアプリでPNG / SVG / PDFにエクスポートする方式である。

前提条件

Node.js 18.0.0以上
draw.io Desktopアプリ
エクスポート機能を使用するために必要

draw.io Desktop公式リリースページからダウンロード可能

インストール

グローバルにインストールする場合は、以下のコマンドを実行する。

npm install -g @drawio/mcp

プロジェクト単位でインストールする場合は、以下のコマンドを実行する。

npm install @drawio/mcp

draw.io CLIの場所

draw.io Desktopアプリのコマンドライン実行ファイルの場所は、OSにより異なる。

MacOS
/Applications/draw.io.app/Contents/MacOS/draw.io
Linux
drawio (PATHに含まれている場合)

または、AppImageの場所を直接指定する
Windows
C:\Program Files\draw.io\draw.io.exe

エクスポートフォーマット

Skill + CLIで対応しているエクスポートフォーマットを以下に示す。

エクスポートフォーマット
フォーマット	拡張子	説明
Draw.io	.drawio	Draw.ioネイティブ形式 (XML)
PNG	.png	ラスター画像形式
SVG	.svg	ベクター画像形式
PDF	.pdf	PDF文書形式

jgraph版 : Project Instructionsの設定

Project Instructionsは、インストール不要でダイアグラムを生成する方式である。
Pythonスクリプトを使用してDraw.ioのURLを生成し、ブラウザで開く。

概要

MCPサーバのインストールが不要であり、全てのMCPクライアントで動作する。
プロジェクトの指示ファイル (CLAUDE.mdやcursor rules等) にDraw.io URLの生成方法を記述することで、LLMがPythonスクリプトを実行してダイアグラムを生成する。

セットアップ方法

プロジェクトの指示ファイルに以下の内容を追記する。

 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}'

動作の仕組み

LLMがDraw.io互換のXMLを生成する。
Pythonのzlibで圧縮 (deflateRaw) を行う。
base64でURLセーフエンコードを行う。
https://app.diagrams.net/#create= の後にエンコード済みデータを付加してURLを生成する。
生成されたURLをWebブラウザで開くと、Draw.ioエディタにダイアグラムが表示される。

jgraph版 : MCP Tool Serverのツール

MCP Tool Serverは、3つのツールを提供する。
各ツールは、異なる入力フォーマットに対応している。

open_drawio_xml

Draw.io XML形式のダイアグラムをブラウザで開く。

open_drawio_xmlのパラメータ
パラメータ	型	必須	説明
content	string	はい	Draw.io XML形式のダイアグラムデータ
lightbox	boolean	いいえ	読み取り専用のライトボックスモードで開く。(デフォルト: false)
dark	boolean	いいえ	ダークモードで表示する。(デフォルト: false)

open_drawio_csv

CSV形式のデータからダイアグラムをWebブラウザで開く。

open_drawio_csvのパラメータ
パラメータ	型	必須	説明
content	string	はい	CSV形式のダイアグラムデータ
lightbox	boolean	いいえ	読み取り専用のライトボックスモードで開く。(デフォルト: false)
dark	boolean	いいえ	ダークモードで表示する。(デフォルト: false)

open_drawio_mermaid

Mermaid.js形式のダイアグラムをブラウザで開く。

open_drawio_mermaidのパラメータ
パラメータ	型	必須	説明
content	string	はい	Mermaid.js形式のダイアグラムデータ
lightbox	boolean	いいえ	読み取り専用のライトボックスモードで開く。(デフォルト: false)
dark	boolean	いいえ	ダークモードで表示する。(デフォルト: false)

jgraph版 : 使用方法

MCP Tool Serverでの使用例

MCP Tool Serverを使用する場合のプロンプト例を以下に示す。

Mermaidダイアグラムの場合

 # プロンプト例 :
 
 以下のMermaid形式でシーケンス図をDraw.ioで作成してください。
 sequenceDiagram
    Client->>Server: HTTPリクエスト
    Server->>Database: クエリ実行
    Database-->>Server: 結果返却
    Server-->>Client: HTTPレスポンス

CSVデータからダイアグラムを作成する場合

 # プロンプト例 :
 
 以下の組織データからCSV形式で組織図をDraw.ioで作成してください。
 CEO配下にCTO、CFO、COOの3つのポジションがあります。

XMLダイアグラムの場合

 # プロンプト例 :
 
 Webアプリケーションの3層アーキテクチャ図をDraw.io XMLで作成してください。
 フロントエンド、バックエンド、データベースの3層を含めてください。

Skill + CLIでの使用例

Claude Code (CLI) でSkill + CLIを使用する場合は、/drawio コマンドを使用する。

# 使用例 :

/drawio マイクロサービスのアーキテクチャ図を作成してください。
各サービス間の通信方式も記載してください。

エクスポートを含む使用例を以下に示す。

# 使用例 :

/drawio ネットワーク構成図を作成して、PNGファイルとしてエクスポートしてください。

Project Instructionsでの使用例

Project Instructionsを使用する場合のプロンプト例を以下に示す。

# プロンプト例 :

システムのデプロイメントフロー図を作成して、Draw.ioで開けるURLを生成してください。

jgraph版 : 動作の仕組み

MCP Tool Serverの処理フロー

MCP Tool Serverは、以下の手順でダイアグラムを表示する。

MCPクライアントからダイアグラムデータ (XML / CSV / Mermaid) を受信する。
pakoライブラリを使用して、データをdeflateRaw圧縮する。
圧縮データをBase64エンコードする。
https://app.diagrams.net/#create= の後にエンコード済みデータを付加したURLを生成する。
生成されたURLをWebブラウザで開き、Draw.ioエディタにダイアグラムを表示する。

MCP App Serverの処理フロー

MCP App Serverは、以下の手順でダイアグラムを表示する。

MCPクライアントからダイアグラムデータを受信する。
サーバ側でダイアグラムデータを処理する。
チャットインターフェース内にダイアグラムをインラインで描画する。
ユーザはチャット内で直接ダイアグラムを確認できる。

URLの安全性

MCP Tool ServerおよびProject Instructionsで生成されるURLは、ハッシュフラグメント方式 (#create=) を使用している。

ハッシュフラグメント (# 以降のデータ) は、Webブラウザからサーバに送信されない
そのため、ダイアグラムデータがDraw.ioのサーバに送信されることはない
全てのデータ処理はブラウザ内で完結する
機密性の高いダイアグラムデータも安全に扱うことができる

jgraph版 : トラブルシューティング

npxが見つからない場合

以下の項目を確認する。

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

node --version コマンドでバージョンを確認する。
npxの確認
npx --version コマンドでnpxが利用可能であることを確認する。

npxが見つからない場合は、Node.jsを再インストールする。

ダイアグラムが開かない場合

以下の項目を確認する。

インターネット接続の確認
https://app.diagrams.net にアクセスできることを確認する。
Webブラウザの確認
デフォルトブラウザが設定されていることを確認する。

ポップアップブロッカーがURLの展開を妨げていないか確認する。
URLの長さ制限
非常に大きなダイアグラムの場合、URLの長さがブラウザの制限を超える可能性がある。

その場合は、Skill + CLIアプローチを使用してファイルとして生成することを推奨する。

draw.io CLIでのエクスポートが失敗する場合

以下の項目を確認する。

draw.io Desktopの確認
draw.io Desktopアプリがインストールされていることを確認する。

CLIコマンドがPATHに含まれていることを確認する。
ディスプレイ環境の確認 (Linux)
LinuxでGUIなし環境の場合、xvfb-run が必要になることがある。

xvfb-run drawio --export --format png diagram.drawio

Claude Desktopで認識されない場合

以下の項目を確認する。

設定ファイルの確認
claude_desktop_config.jsonファイルのJSON形式が正しいことを確認する。

mcpServers キーの下に正しく設定されていることを確認する。
Claude Desktopの再起動
設定ファイル編集後、Claude Desktopを再起動する。
ログの確認
Claude Desktopのデバッグコンソール ([View] - [Toggle Developer Tools]) でエラーログを確認する。

MCPサーバ - Draw.io

概要

Draw.io MCP Serverの機能

ダイアグラム検査機能

ダイアグラム編集機能

スタイルとデータ管理

対応ダイアグラムタイプ

動作要件

システム要件

必須コンポーネント

ネットワーク要件

インストール

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

Claude Desktopでの設定

Claude Codeでの設定

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

Google Chromeの場合

Mozilla Firefoxの場合

app.diagrams.netへのアクセス

設定とカスタマイズ

ポート設定

HTTPトランスポートの使用

利用可能なツール

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

使用方法

プロンプトの基本形式

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

アーキテクチャ図の作成

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

スタイル指定を含む作成

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

システムアーキテクチャ

アーキテクチャ概要

トラブルシューティング

サーバに接続できない

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

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

Firefox拡張機能が動作しない

Draw.io MCP Extension

ブラウザ拡張機能の役割

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

関連リソース

Draw.io MCP Server (jgraph/drawio-mcp)

jgraph版 : 4つの統合アプローチ

jgraph版 : 動作要件

共通要件

MCP Tool Serverの要件

Skill + CLIの要件

MCP App Serverの要件

Project Instructionsの要件

jgraph版 : MCP Tool Serverのインストール

npxでの実行 (推奨)

グローバルインストール

ソースからのインストール

Claude Desktopでの設定

Claude Codeでの設定

その他のMCPクライアントでの設定

jgraph版 : MCP App Serverの設定

公式ホストエンドポイント

セルフホスト (Node.js)

Claude Desktopでの設定 (stdio)

Cloudflare Workersへのデプロイ

jgraph版 : Skill + CLIの設定

前提条件

インストール

draw.io CLIの場所

エクスポートフォーマット

jgraph版 : Project Instructionsの設定

概要

セットアップ方法