Draw.io MCPサーバー

最も広く普及しているダイアグラム作成ツールであるDraw.io (Diagrams.net) を使って、快適なダイアグラム作成（Vibe Diagramming）を始めましょう。

主なハイライト

• XML、SVG（XML埋め込み）、PNG（XML埋め込み）形式でのダイアグラムのインポートとエクスポート

• ウェイポイントと自動自己コネクタルーティングによるエッジジオメトリ制御

• ネストされたシェイプとグループ化のための親子関係

• サーバーと拡張機能を同一モノレポで統合

• Draw.ioエディタ内蔵 - ブラウザ拡張機能は不要

• AIエージェントがDraw.ioのダイアグラムを制御できるMCPサーバー

• MCPツールを介したプログラムによるダイアグラムの作成、検査、変更

• 複雑なダイアグラムのためのレイヤー管理

• あらゆるMCPクライアント（Claude Desktop、Claude Code、Zed、Codexなど）で動作

はじめに

Draw.io MCPサーバーは、AIエージェントにDraw.ioのダイアグラム作成機能を提供します。ダイアグラム要素の作成、読み取り、更新、削除が可能なMCPツールを提供し、AIアシスタントがアーキテクチャ図、フローチャート、視覚的なドキュメントを自動的に構築できるようにします。

利用方法は2通りあります：

1. 内蔵エディタ - サーバーが直接Draw.ioをホストし、ブラウザからアクセス可能

2. ブラウザ拡張機能 - 拡張機能を通じてブラウザで実行中のDraw.ioに接続

要件

• Node.js (v20以上) - MCPサーバーの実行環境

• MCPクライアント - Claude Desktop、Claude Code、Zed、Codex、OpenCode、またはMCP互換ホスト

内蔵エディタの場合

追加要件はありません。--editorフラグを付けて実行するだけです。

ブラウザ拡張機能の場合

• ブラウザ拡張機能 - drawio-mcp-extension

• ブラウザでDraw.ioを開いていること

オプション

• pnpm - 推奨パッケージマネージャー（npmでも動作します）

クイックスタート

1. MCPホストの設定

MCPクライアントの設定にサーバーを追加します：

~/Library/Application Support/Claude/claude_desktop_config.json を編集します：

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

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

~/.config/zed/settings.json に追加します：

{
  "context_servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"],
      "env": {}
    }
  }
}

~/.codex/config.toml を編集します：

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

プロジェクトルートまたは ~/.config/opencode/opencode.json の opencode.json に追加します：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

その他のMCPクライアントや詳細な設定（pnpmオプションを含む）については、Configuration を参照してください。

2. エディタを開く

MCPホストを再起動した後、以下を開きます： http://localhost:3000/

3. ダイアグラム作成を開始

試せるプロンプトの例：

"プロデューサー、コンシューマー、3つのバックエンドサービスを持つメッセージキューを示すイベント駆動型アーキテクチャ図を作成して"

"データベース、APIゲートウェイ、およびエンドポイントを持つ4つのマイクロサービスを含むCRUD API図を描いて"

"'Background'という新しいレイヤーを追加して装飾要素をすべてそこに移動し、注釈用の新しいレイヤーを作成して"

これで、AIアシスタントがMCPツールを使用してダイアグラムを制御できるようになります。

機能

サーバーは以下のためのMCPツールを提供します：

• ダイアグラムの検査 - シェイプ、レイヤー、セルプロパティの読み取り

• ダイアグラムの変更 - シェイプ、エッジ、ラベルの追加/編集/削除

• レイヤー管理 - レイヤーの作成、切り替え、整理

利用可能なツールの完全なリストについては、Tools Reference を参照してください。

インストール

サーバーはMCPホストの一部として実行されます。npmおよびpnpmオプションを含む、サポートされているすべてのクライアント（Claude Desktop、Claude Code、Zed、Codex、oterm）の詳細な設定は Configuration で確認できます。

代替手段：ブラウザ拡張機能

内蔵エディタの代わりに、ブラウザ拡張機能 を使用して、ブラウザで実行中のDraw.ioに接続することもできます。これは --editor フラグの有無にかかわらず動作します。

1. ブラウザでDraw.ioを開く

2. Draw.io MCPブラウザ拡張機能をインストール：

   • Chrome Web Store

   • Firefox Add-ons

3. 拡張機能が接続されていることを確認（アイコンに緑色の信号オーバーレイが表示されます）

--editor を使用しない設定：

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

詳細については、拡張機能のドキュメント を参照してください。

関連リソース

Configuration - CLIフラグと高度なオプション

Tools Reference - MCPツールの完全なドキュメント

Troubleshooting

Prompt examples

Contributing

Architecture

Development

スターの推移

評価