MochiuWiki : SUSE, EC, PCB

「MCPサーバ - Draw.io」の版間の差分

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の4版が非表示)
103行目: 103行目:
     "drawio": {
     "drawio": {
       "command": "npx",
       "command": "npx",
       "args": ["@lgazo/drawio-mcp-server"]
       "args": ["-y", "drawio-mcp-server"]
     }
     }
   }
   }
115行目: 115行目:
     "drawio": {
     "drawio": {
       "command": "pnpm",
       "command": "pnpm",
       "args": ["dlx", "@lgazo/drawio-mcp-server"]
       "args": ["dlx", "drawio-mcp-server"]
     }
     }
   }
   }
127行目: 127行目:
     "drawio": {
     "drawio": {
       "command": "yarn",
       "command": "yarn",
       "args": ["dlx", "@lgazo/drawio-mcp-server"]
       "args": ["dlx", "drawio-mcp-server"]
     }
     }
   }
   }
150行目: 150行目:
     "drawio": {
     "drawio": {
       "command": "npx",
       "command": "npx",
       "args": ["@lgazo/drawio-mcp-server"]
       "args": ["-y", "drawio-mcp-server"]
     }
     }
   }
   }
170行目: 170行目:
<br>
<br>
==== app.diagrams.netへのアクセス ====
==== app.diagrams.netへのアクセス ====
# Webブラウザで app.diagrams.net を開く。
# Webブラウザで https://app.diagrams.net を開く。
# Draw.io MCP Serverは、このページ上でダイアグラムを操作する。
# Draw.io MCP Serverは、このページ上でダイアグラムを操作する。
<br><br>
<br><br>
190行目: 190行目:
     "drawio": {
     "drawio": {
       "command": "npx",
       "command": "npx",
       "args": ["@lgazo/drawio-mcp-server", "--extension-port", "4000"]
       "args": ["-y", "drawio-mcp-server", "--extension-port", "4000"]
     }
     }
   }
   }
217行目: 217行目:
     "drawio": {
     "drawio": {
       "command": "npx",
       "command": "npx",
       "args": ["@lgazo/drawio-mcp-server", "--transport", "http"]
       "args": ["-y", "drawio-mcp-server", "--transport", "http"]
     }
     }
   }
   }
570行目: 570行目:
* [https://modelcontextprotocol.io/ Model Context Protocol公式サイト]
* [https://modelcontextprotocol.io/ Model Context Protocol公式サイト]
* [https://app.diagrams.net/ Draw.io公式サイト]
* [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>
<br><br>


575行目: 1,032行目:
{{#seo:
{{#seo:
|title={{PAGENAME}} : Draw.io MCP Server | MochiuWiki
|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
|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に関する包括的なガイド、AIアシスタントによるダイアグラム作成と編集の自動化 | This page is {{PAGENAME}} in our wiki about Draw.io MCP servers and AI-powered diagram creation
|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
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}
}}
「https://mochiu.net/index.php/MCPサーバ_-_Draw.io」から取得