draw.io の MCP サーバーを Claude Code から使ってみた
はじめに
draw.io (diagrams.net) が公式の MCP サーバー @drawio/mcp を公開していました。Claude Code から直接ダイアグラムを生成できるとのことで、さっそく試してみました。
セットアップ
Claude Code の CLI から 1 コマンドで追加できます。
claude mcp add drawio -- npx @drawio/mcp
これだけで準備完了です。
提供されるツール
@drawio/mcp は 3 つのツールを提供しています。
open_drawio_xml は draw.io のネイティブ XML 形式でダイアグラムを開くツールです。レイアウトやスタイルを細かく制御したい場合に向いています。
open_drawio_csv は CSV データからダイアグラムを生成します。組織図やツリー構造など、表形式のデータを図に変換したいときに使えます。
open_drawio_mermaid は Mermaid.js の構文からダイアグラムを生成します。フローチャートやシーケンス図を手軽に作りたいときに便利です。
いずれのツールも content（図の内容）が必須パラメータで、オプションとして lightbox（読み取り専用で表示）と dark（ダークモード設定）が指定できます。内部的にはコンテンツを deflateRaw で圧縮し、Base64 エンコードした draw.io の URL を生成してブラウザで開く仕組みです。
試してみる
iOS プロジェクトのアーキテクチャ図を生成してみました。マルチモジュールの SPM パッケージ構成になっているプロジェクトです。
Claude Code に「プロジェクト構成を調査してダイアグラムを生成して」と伝えると、まず Package.swift やソースコードを読み取ってモジュール間の依存関係を把握し、Mermaid 記法でダイアグラムを生成してくれました。
ただ、モジュール間の矢印が多くてやや見づらかったので「もっとわかりやすく」とリクエストしたところ、今度は open_drawio_xml を使ってレイヤーごとに色分けした図を生成してくれました。
レイヤー間の依存だけに矢印を絞ったことで、全体の構造がすっきり見えるようになっています。生成後に draw.io のエディタ上で微調整もできるので、大枠を AI に作らせて細部は手動で仕上げるという使い方が現実的だと感じました。
セキュリティ面の話
URL を生成してブラウザで開くという仕組みを見て、ダイアグラムのデータが draw.io のサーバーに送られるのでは、と気になりました。調べてみると、実際には送られていないようです。
生成される URL は次のような形式です。
https://app.diagrams.net/#create=<圧縮・エンコードされたデータ>
# 以降は URL フラグメントと呼ばれる部分で、RFC 3986 の仕様によりブラウザは HTTP リクエストに含めません。つまり app.diagrams.net のサーバーには GET / しか届かず、ダイアグラムのデータは渡りません。HTTP の Referer ヘッダーにもフラグメントは含まれないため、サーバーのアクセスログにも記録されません。
データの展開はブラウザ内の JavaScript のみが行います。Claude が生成した draw.io XML を MCP サーバーが pako（deflateRaw）で圧縮・Base64 エンコードし、それをブラウザが受け取って解凍・描画するという流れです。この動作は mcp-tool-server の README の「How It Works」に明記されています。ネットワーク越しにダイアグラムの内容が外部に渡るタイミングはありません。
draw.io 自体もダイアグラムを保存しません。ユーザーが選んだ保存先（ローカル、Google Drive、OneDrive など）に直接保存される設計になっています。この考え方は draw.io が以前から採用しているもので、公式ブログにも詳しく書かれています。機密性の高い構成図を扱う場合でも安心して使える理由になっています。
まとめ
draw.io の MCP サーバーを使うことで、Claude Code の会話の中からダイアグラムを生成できるようになりました。コードを読み取ってそのまま図に変換してくれるので、手作業でノードを配置するよりも手軽です。アーキテクチャ図の更新が面倒で後回しにしがちな方は試してみてください。