Drawio MCP Server

🚀 Draw.io MCP サーバー

最も広く使用されているダイアグラムツールである Draw.io（Diagrams.net）を使って、雰囲気あふれるダイアグラムを描いてみましょう。

🚀 クイックスタート

Draw.io MCP サーバーは、モデルコンテキストプロトコル (MCP) に準拠した実装です。これにより、強力な描画機能を AI 機能化システムに導入することができます。この統合により、以下のことが可能になります。

• Draw.io のシームレスな統合：豊富な描画機能を通じて、MCP アプリを Draw.io に接続します。
• プログラムによるダイアグラムの制御：MCP コマンドを使用して、ダイアグラムの内容を作成、変更、管理します。
• スマートなダイアグラム分析：AI 処理で使用するために、ダイアグラムとそのコンポーネントの詳細情報を取得します。
• 機能化システムの構築：アーキテクチャ図の生成、複雑な関係の可視化、技術文書の注釈付け、およびプログラムによるフローチャートとプロセスマップの作成を行います。

MCP 標準に準拠したツールであるため、任意の MCP クライアントと互換性があります。この実装は、以下の操作を必要とする AI システムに特に適しています。

• アーキテクチャ図の生成
• 結合関係の可視化
• 技術文書の注釈付け
• プログラムによるフローチャートとプロセスマップの作成

このツールは双方向通信をサポートしており、Draw.io インスタンスの制御と、さらなる処理のためのダイアグラム情報の抽出が可能です。

✨ 主な機能

基本的な機能

• add-cell-of-shape：特定の形状のセルを追加します。
  • パラメータ：
    • shape_name - 形状名
    • x, y - 座標（オプション）
    • width, height - サイズ（オプション）
    • text - テキスト内容（オプション）
    • style - 追加のスタイル属性（オプション）

高度な機能

• add-edge：2 つのセル間の接続を作成します。
  • パラメータ：
    • source_id - ソースセルの ID
    • target_id - ターゲットセルの ID
    • text - エッジのテキストラベル（オプション）
    • style - エッジのスタイル属性（オプション）

📦 インストール

Claude Desktop への接続

1. Claude Desktop をインストールします。
2. 設定ファイルを開きます。
3. 以下の内容を追加します。

{
  "architectures": {
    "default": "x64"
  },
  "proxies": {}
}

oterm への接続

1. ターミナルで以下のコマンドを実行します。

npm install -g mcp-server

2. サーバーを起動します。

mcp-server start

📚 ドキュメント

必要条件

Draw.io MCP サーバーを使用するには、以下のコンポーネントが必要です。

コアコンポーネント

• Node.js（v18 以上） - ランタイム環境
• Draw.io MCP ブラウザ拡張 - Draw.io と MCP サーバー間の通信を実現します。

MCP エコシステム

• MCP クライアント（例：MCP インスペクター） - 統合のテストとデバッグに使用します。
• サポートツールの LLM - MCP ツール呼び出しを処理できる任意の言語モデル（例：GPT - 4、Claude 3 など）

開発オプションコンポーネント

• pnpm - 推奨されるパッケージマネージャー（npm/yarn もサポート）
• Chrome DevTools - --inspect フラグを使用する場合のデバッグツール

注意：Draw.io のデスクトップアプリケーションまたはウェブバージョンは、MCP サーバーを実行するシステム上で利用可能である必要があります。

関連リソース

アーキテクチャ

開発ガイド