🌟

GitHub CopilotでDraw.io MCP Tool Serverを使う

に公開
draw.io
GitHub Copilot
MCP サーバー
tech

draw.ioのMCPサーバーが公開されました。これをClaude Codeで使う記事はいくつか見かけたのですが、VisualStudio Code + GitHub Copilotで使った記事はなさそうでしたので、手順と使い方をまとめてみました。
とはいっても、GitHub CopilotもMCP Serverに対応していますから、基本的にはClaude Codeと同じです。

前提

  • Node.jsが入っていること

準備

適当なプロジェクト用のフォルダをVisualStudio Codeで開いておきます。

Packageのインストール

Draw.io MCP Tool Serverはnpmで配布されています。VisualStudio CodeでTerminal(PowerShellでOK)を開き、プロジェクトフォルダ内にインストールします。面倒だったら、CopilotのチャットウィンドウをAgent Modeに切り替えてから「npmで@drawio/mcpをインストールしてください」と依頼するのもよいです。

> npm install @drawio/mcp

mcp.json

プロジェクトフォルダ内の.vscode/mcp.jsonファイルにMCPサーバー定義を追加します。.vscode フォルダやmcp.jsonファイルがなければ新規に作成してください。

{
  "servers": {
    "drawio": {
      "command": "node",
      "args": [
        "./node_modules/@drawio/mcp/src/index.js"
      ],
      "env": {}
    }
  }
}

TOOLの有効化

GitHub CopilotがDraw.io MCP Tool Server使えるように機能を有効化します。これにはいくつか方法があります。いずれかの方法で有効にしてください。

  1. mcp.jsonから起動
    先ほどのmcp.jsonファイルを開くと、"drawio" の箇所に ▶ Start と表示されているのでクリックします。

  2. チャットウィンドウのツールアイコンから有効化
    GitHub Copilotのチャットウィンドウにあるツールアイコンをクリックし、drawioの項目にチェックを入れます。

  3. チャットで指示
    GitHub Copilotのチャットウィンドウで図の作成を指示すると「drawioを使ってよいか？」と聞いてくることがあるので許可します。

使い方（CSVの例）

GitHub Copilotのプロンプトから作図を指示してみます。単純な図だとCSVになるようです。

プロンプト例：

組織図を作成してください。CEO → CTO, CFO; CTO → 3人のエンジニア

出力：

Name,ReportsTo
CEO,
CTO,CEO
CFO,CEO
Engineer 1,CTO
Engineer 2,CTO
Engineer 3,CTO

入力されたプロンプトを元に、CopilotとMCP ServerがCSVを生成し、さらにdraw.ioで開けるURLを作成して、Webブラウザを起動して図を表示します。その際に下記のようなURLが生成されます：

https://app.diagrams.net/?grid=0&pv=0&border=10&edit=_blank#create=%7B%22type%22%3A%22mxfile%22%2C%22version%22%3A%223%22%2C%22mxGraphModel%22%3A%7B%22mx%22%3A%7B...(略)

長いURLの#create=が図の情報そのものです。つまり、drawioのサーバにファイルを生成するような凝ったことは事はしていません。詳しくはのちほど説明します。

使い方（Mermaidの例）

Mermaid構文のまま図を生成できます。

プロンプト例：

Mermaid構文でOAuth2認証フローのシーケンス図を作成してください

出力：

sequenceDiagram
    autonumber
    participant User as User
    participant Client as Client App
    participant Auth as Authorization Server
    participant Resource as Resource Server

    User->>Client: Request protected resource
    Client->>Auth: Redirect to authorize (client_id, scope, state, redirect_uri)
    Auth->>User: Prompt login and consent
    User->>Auth: Submit credentials and consent
    Auth-->>Client: Authorization code (via redirect)
    Client->>Auth: Token request (code, client_secret, redirect_uri)
    Auth-->>Client: Access token (+ refresh token)
    Client->>Resource: Request resource (Authorization: Bearer token)
    Resource-->>Client: Protected data
    Client-->>User: Display data

出来ること＆仕組み

Draw.io MCP Tool Serverは、Mermaid、CSV、draw.io XMLといった入力を受け取り、draw.ioで開ける図を生成できます。draw.ioでファイルをインポートするよりも、GitHub Copilotからダイレクトに図の確認ができることになります。

Draw.io MCP Tool Serverの内部動作ですが、MCPサーバーが入力をdraw.ioの図データ（XML）へ変換し、Deflate圧縮してBase64でエンコードしているようです。このエンコード結果をURLフラグメントとして組み立て、ブラウザでdraw.ioを開くためのURLを返します。データの流れは Copilot → MCPツール → URL生成 → ブラウザ起動 の一方向で、サーバー側に図の状態は保持しません。実行はNode.jsのローカルプロセスで行われます。

生成されるURLの詳細

先に説明した通り、draw.io MCP serverが生成するのは図そのものではなく、draw.ioが読めるURLです。

例）

https://app.diagrams.net/?grid=0&pv=0&border=10&edit=_blank#create=%7B%22type%22%3A%22mxfile%22%2C%22version%22%3A%223%22%2C%22mxGraphModel%22%3A%7B%22mx%22%3A%7B...(略)

#create=... に圧縮済みの図データが入っており、ブラウザ側で展開・描画されます。URLフラグメント（#以降）はHTTPリクエストとしてサーバーに送られないため、基本的にはクライアント側の制約（URL長やブラウザ上限）はあります。

補足

GitHub Copilotのチャットウィンドウ内でもMermaidの図を表示することができます。

また、VisualStudio Codeの拡張機能（Markdown Preview Mermaid Supportなど）を使って表示することもできますから、IDE上からdraw.io MCP serverを使うメリットは少し薄そうです。
GitHub Copilot CLIから呼び出したり、図の加工や共有目的でdraw.ioに引き渡す時には作業時間の短縮になりそうですね。

Discussion