drawio-mcp

🎨 Draw.io MCP サーバー

作りたいものを説明するだけで、AI アシスタントが美しい draw.io 図を作成します。

GitHub Copilot（エージェントモード）、Claude Desktop、Cursor、および MCP 互換クライアントで動作する、draw.io／diagrams.net の XML ファイルをプログラムで生成する MCP サーバーです。

---

✨ できること

機能	詳細
🏗️ 図の種類	フローチャート、UML、ER、C4、BPMN、マインドマップ、アーキテクチャ、ネットワーク、Kubernetes など
🎨 スタイル設定	310 種類以上の図形プリセット、44 種類のエッジスタイル、21 種類のカラーテーマ
📐 自動レイアウト	Sugiyama DAG、ツリー、水平、垂直、グリッド、フローチャートの各エンジン
🔀 スマートルーティング	障害物を考慮した直交エッジルーティングとポートの自動分散
✏️ 完全な編集機能	作成後にあらゆる要素の追加、移動、サイズ変更、削除、スタイル変更が可能
📄 複数ページ	複雑な図に対応する複数ページとレイヤー
📥 インポート／エクスポート	既存の .drawio ファイルを読み込み、変更して保存
🧹 ワンクリックで整理	レイアウト、重なり、エッジ、ラベルを自動修正する整理コマンド

---

🚀 クイックスタート

前提条件

• Python 3.11+
• uv（推奨）または pip

PyPI からインストール

pip install drawio-mcp

uv を使う場合：

uvx drawio-mcp

ソースからインストール

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync
uv run drawio-mcp

---

🔌 AI クライアントの設定

VS Code（GitHub Copilot）

VS Code の設定または .vscode/mcp.json に追加します：

{
  "servers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

次に、エージェントモードで Copilot を使用し、図の作成を依頼します。

Claude Desktop

claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

Cursor

Cursor の MCP 設定に追加します：

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

---

💬 プロンプトの例

接続したら、AI チャットで次のように試してみてください：

プロンプト	作成されるもの
「ユーザーログイン処理のフローチャートを作成して」	判断ノードとエラーパスを含むログインフロー
「EC システムの C4 コンテキスト図を作成して」	アクターと外部システムを含むシステムコンテキスト
「User、Order、Product を含む UML クラス図を作成して」	関係を示すクラス図
「ブログデータベースの ER 図を作成して」	テーブルを含むエンティティ関係図
「スタートアップの組織図を作成して」	役職と階層を示すツリーレイアウト
「API Gateway、Lambda、DynamoDB を含む AWS アーキテクチャを描いて」	クラウドアーキテクチャ図
「Kubernetes のデプロイ図を作成して」	Pod、サービス、Ingress を含む K8s 図
「サーバーとファイアウォールを含むネットワークトポロジーを作成して」	デバイスアイコンを含むネットワーク図

💡 ヒント： draw.io で開けるファイルを取得するには、最後に必ず 「…そして filename.drawio として保存して」 と付け加えてください。

---

🛠️ ツールリファレンス

このサーバーは、action パラメーターを持つ 5 つのツールを公開します：

diagram — ライフサイクル

create · save · load · import_xml · list · get_xml · add_page · add_layer

draw — コンテンツ

add_vertices · add_edges · add_group · update_cells · delete_cells · add_title · add_legend · build_dag · build_full

style — 外観

build · apply_theme · list_vertex_presets · list_edge_presets · list_themes

layout — 配置

sugiyama · tree · horizontal · vertical · grid · flowchart · smart_connect · align · distribute · polish · relayout · compact · reroute_edges · resolve_overlaps · fix_labels · optimize_connections · resize_container

inspect — 読み取り専用

cells · overlaps · ports · info

---

🎨 スタイルリファレンス

310 以上の Vertex プリセット（クリックして展開）

基本図形： RECTANGLE ROUNDED_RECTANGLE ELLIPSE CIRCLE DIAMOND TRIANGLE HEXAGON CYLINDER CLOUD PARALLELOGRAM ACTOR PROCESS DOCUMENT DATA_STORE NOTE CARD CALLOUT TEXT CUBE STAR FOLDER など

テーマ別ボックス： BLUE_BOX GREEN_BOX ORANGE_BOX RED_BOX YELLOW_BOX PURPLE_BOX GRAY_BOX DARK_BOX TEAL_BOX WHITE_BOX

フローチャート： FLOWCHART_PROCESS FLOWCHART_DECISION FLOWCHART_TERMINATOR FLOWCHART_DATA FLOWCHART_DOCUMENT FLOWCHART_DATABASE FLOWCHART_START FLOWCHART_END など、さらに 25 種類以上

UML： UML_CLASS UML_INTERFACE UML_ACTOR UML_COMPONENT UML_PACKAGE UML_NODE UML_LIFELINE UML_FRAME

C4： C4_SYSTEM C4_CONTAINER C4_COMPONENT C4_PERSON C4_EXTERNAL C4_DATABASE C4_WEB_BROWSER

ER： ER_ENTITY ER_WEAK_ENTITY ER_ATTRIBUTE ER_KEY_ATTRIBUTE ER_RELATIONSHIP など

BPMN： BPMN_TASK BPMN_START_EVENT BPMN_END_EVENT BPMN_GATEWAY BPMN_POOL BPMN_LANE など

アーキテクチャ： ARCH_SERVICE ARCH_DATABASE ARCH_QUEUE ARCH_CLOUD ARCH_API ARCH_GATEWAY ARCH_CONTAINER ARCH_FIREWALL ARCH_SERVER ARCH_LOAD_BALANCER など、さらに 20 種類以上

ネットワーク： NETWORK_SERVER NETWORK_ROUTER NETWORK_SWITCH NETWORK_FIREWALL NETWORK_CLOUD NETWORK_STORAGE など、さらに 40 種類以上

クラウド／K8s： AWS_CLOUD AWS_LAMBDA AWS_S3 AWS_EC2 AWS_RDS AWS_SQS K8S_POD K8S_SERVICE K8S_DEPLOYMENT K8S_INGRESS など

コンテナ： SWIMLANE GROUP GROUP_TRANSPARENT GROUP_DASHED

その他： ステートマシン、シーケンス図、マインドマップ、DFD、SysML、ArchiMate、Cisco、モックアップ／ワイヤーフレーム、インフォグラフィックなど

44 種類のエッジプリセット（クリックして展開）

一般： DEFAULT ORTHOGONAL STRAIGHT CURVED ENTITY_RELATION DASHED DOTTED BIDIRECTIONAL NO_ARROW

スタイル付き： ROUNDED ROUNDED_DASHED THICK THICK_ROUNDED

色付き： COLORED_BLUE COLORED_GREEN COLORED_RED COLORED_ORANGE COLORED_PURPLE COLORED_YELLOW COLORED_GRAY

UML： UML_ASSOCIATION UML_INHERITANCE UML_IMPLEMENTATION UML_DEPENDENCY UML_AGGREGATION UML_COMPOSITION

ER： ER_ONE_TO_ONE ER_ONE_TO_MANY ER_MANY_TO_MANY ER_ZERO_TO_ONE ER_ZERO_TO_MANY

フロー： DATA_FLOW CONTROL_FLOW ASYNC SYNC BPMN_FLOW BPMN_MESSAGE_FLOW

21 種類のカラーテーマ（クリックして展開）

BLUE GREEN YELLOW ORANGE RED PURPLE GRAY PINK TURQUOISE TEAL DARK_BLUE DARK_GREEN DARK_RED DARK_ORANGE DARK_PURPLE DARK WHITE C4_BLUE C4_LIGHT_BLUE C4_SKY C4_GRAY

接続ポート（クリックして展開）

TOP BOTTOM LEFT RIGHT TOP_LEFT TOP_RIGHT BOTTOM_LEFT BOTTOM_RIGHT TOP_LEFT_THIRD TOP_RIGHT_THIRD BOTTOM_LEFT_THIRD BOTTOM_RIGHT_THIRD LEFT_TOP_THIRD LEFT_BOTTOM_THIRD RIGHT_TOP_THIRD RIGHT_BOTTOM_THIRD

---

🧑‍💻 開発

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync

# Run tests
uv run pytest tests/ -v

# Run the server locally
uv run drawio-mcp

プロジェクト構成

src/drawio_mcp/
├── server.py           # MCP server — 5 tools with 40+ actions
├── models.py           # Core XML model (DrawioFile, Diagram, MxCell)
├── styles.py           # Style builder, presets, and themes
├── layout.py           # Layout helpers (tree, grid, port distribution)
├── layout_engine.py    # Advanced layout (Sugiyama, edge routing, polish)
└── validation.py       # Input validation

---

📝 コントリビューション

バグ報告、機能リクエスト、プルリクエストのガイドラインについては、CONTRIBUTING.md をご覧ください。

📄 ライセンス

MIT © yohasacura