Draw.io公式MCPでできること・できないこと — 3フォーマット比較

SHARE

ども！最近は仕様書×AIの文脈で図解まわりの検証をやってる龍ちゃんです。

Draw.io の開発元である jgraph 社が、公式の MCP サーバーを出しました。jgraph/drawio-mcp リポジトリで Apache 2.0 ライセンスで公開されています。

コミュニティ実装の MCP サーバーはいくつかありましたが、公式となると話が変わってきます。draw.io 本体と同じ開発元が直接メンテしてくれるので、コミュニティ版よりも長くメンテされやすいんですよね。

MCP の基本的な仕組みについては「AIエージェントの進化が分からない？秘書で理解する3段階」で解説しているので、「MCPってなに？」という方はそちらを先にどうぞ。

jgraph/drawio-mcp リポジトリ、中を見てみると実は4つのアプローチが入っていて、それぞれ対象環境や出力形式が異なります（全体像は後半で紹介します）。

この記事では、Claude Code ユーザーに一番スタンダードな MCP Tool Server を試していきます。セットアップ方法、3つの入力フォーマット（Mermaid / XML / CSV）の使用感、そして正直「できないこと」まで、検証した結果をまとめました。

今回の内容です。

  • MCP Tool Server のセットアップ（.mcp.json に数行追加するだけ）
  • 3つの入力フォーマットを実際に試した比較
  • MCP Tool Server の「できないこと」を正直に語る
  • 向いている人・向いていない人の判断材料
龍ちゃん
龍ちゃん

できないことを紹介していますが、それの対処法に関しては「Draw.io公式Skillで設計図をGitHub管理 — VS Code完結のセットアップ」で紹介しています。併せてご一読ください！

目次

セットアップ: .mcp.json に数行追加するだけ

Claude Code なら、ターミナルで以下のコマンドを実行するだけ。

claude mcp add -s project drawio -- npx @drawio/mcp

これで .mcp.json が自動で作られます。手動で書く場合はこう。

{
  "mcpServers": {
    "drawio": {
      "type": "stdio",
      "command": "npx",
      "args": ["@drawio/mcp"]
    }
  }
}

前提として Node.js が必要です（npx を使うので）。検証時の環境は Node.js v25.7.0、npm パッケージ @drawio/mcp v1.1.2 でした。

以前 MCP のトークン消費問題について記事を書いたんですが、draw.io MCP はツール定義が3つしかないので、コンテキストへの負担はかなり軽い部類です。Notion MCP みたいに大量のツールが常駐するタイプとは全然違います。

使えるようになる3つのツール

ツール入力用途
open_drawio_mermaidMermaid.js 構文フローチャート・UML 全般
open_drawio_xmldraw.io XML（mxGraphModel）細かいスタイル制御が必要な図
open_drawio_csvdraw.io CSV インポート形式データ駆動の組織図・ツリー

どのツールも lightbox（読み取り専用モード）と dark（ダークモード）のオプションが付いています。

設定はこれだけで、すぐに使い始められます。

使ってみた: 3つの入力フォーマット

Mermaid で図を生成

まずは Mermaid から。Claude Code に「ロードバランサー構成図を Mermaid で描いて」とお願いしてみました。

すると Claude が Mermaid 構文を生成して、MCP ツール経由で draw.io に渡してくれます。数秒後にブラウザがパッと開いて、draw.io のエディタに図が表示されました。

これ、良いですね。Mermaid の構文自体がシンプルなので、5ノード程度の図なら入力トークンは約100程度で済みます。しかも Mermaid エンジンが自動レイアウトしてくれるので、ノードが重なったり変な配置になったりしない。ノード数が増えても構文が簡潔なぶん、トークン消費は抑えられます。

ブラウザで開いた draw.io エディタ上で、色やフォントを変えたりノードの位置を微調整したりもできます。AI が下書きして、人間が仕上げる感じですね。

XML で図を生成

次に XML。同じ構成図を XML フォーマットで試してみます。

XML だと draw.io の全プロパティを指定できるので、ノードの色、枠線のスタイル、フォントサイズまで細かく制御できます。Mermaid ではテーマに依存する部分も、XML なら自由自在。

ただし、トレードオフがあります。

同じ図を表現するのに XML は約800トークン使います。Mermaid が約100トークンだったので、ざっくり8倍。さらに、AI がノードの座標（x, y）を自分で計算して配置するので、レイアウトが微妙になることもあります。Mermaid なら自動でいい感じに並べてくれるのに、XML だとそこは AI 任せなんですよね。

トークンもレイアウトも Mermaid に分がありますが、「この色で、このフォントで、この位置に」って指定したいなら XML 一択です。

CSV で図を生成

最後に CSV。これは少し特殊で、draw.io 固有の CSV インポート形式に従う必要があります。

CSV ヘッダーに # label: %name% のようなメタ記法を書いて、データ行で親子関係を定義していく形式です。ツリー構造や組織図を作るには向いてるんですが、ただ汎用性はあまり高くないので、フローチャートや UML を CSV で書こうとは思わないですね。

フォーマット比較

3つ試した結果をまとめます。

比較項目MermaidXMLCSV
トークン効率高（XML の約 1/10）低（冗長）中
レイアウト自動手動（AI が座標指定）自動
スタイル制御低（テーマ依存）高中
対応図形flowchart, sequence, class, state, ER 等全てツリー・組織図

結論としては、特別な理由がなければ Mermaid を使うのが正解です。トークン効率が XML の約 1/10、自動レイアウトで配置も綺麗、対応する図形タイプも広い。XML は「どうしても色やスタイルを細かく指定したい」ときの選択肢。CSV は組織図やツリーを大量のデータから生成したいときのニッチ枠です。

正直に言う: MCP Tool Server の「できないこと」

ここまで「Mermaid いいじゃん」って話をしてきましたが、MCP Tool Server には正直「できないこと」も結構あります。

まず仕組みを知っておく

さっき Mermaid で図を生成したとき、ブラウザがパッと開きましたよね。あれ、実はローカルにファイルを作ってるわけじゃないんです。

MCP Tool Server は、AI が生成したコンテンツを圧縮・エンコードして app.diagrams.net の URL に全部詰め込んでいます（ソースコード）。その URL をブラウザで開くと draw.io エディタが表示される、という仕組みです。

つまり すべてが URL に埋め込まれている。ローカルにファイルは一切残りません。

この「URL 方式」が、以下の制約の根本原因です。

できないこと

一番大きいのは、ローカルにファイルが残らないことです。.drawio ファイルが生成されないので、Git で管理したり、VS Code の Draw.io 拡張で開いたりができません。

これに連動して、VS Code 内で作業を完結させることもできません。図を確認するにはブラウザに切り替える必要があるし、PNG や SVG が欲しければ draw.io エディタから手動でエクスポートする手間が発生します。GitHub に図を置きたい場合も、URL からは .drawio ファイルを取り出せないので、リポジトリ管理のワークフローとは噛み合わない。

もう1つの本質的な制約は、差分更新ができないこと。URL は毎回まるごと新規生成されるので、「さっきの図のここだけ修正して」ということができません。修正するには図全体を再生成するか、ブラウザの draw.io エディタ上で手動で直す必要があります。

あとは環境面の話で、app.diagrams.net に接続できないとそもそも動きません。オフラインでは使えないです。

一方で、URL だからこそ便利な面もある

URL をそのまま Slack やチャットに貼れば、相手がブラウザで即座に図を見られます。受け取る側に draw.io のインストールは不要で、ブラウザさえあれば OK。しかも URL を開いた先の draw.io エディタでそのまま編集もできるんですよね。

ファイルを共有してもらって、ツールを入れて、開いて…みたいな手間がゼロ。検証で 27ノードのマイクロサービス構成図を作ったときも、URL 長は 1851 文字でブラウザの制限内に収まっていました。

jgraph/drawio-mcp の4つのアプローチ

ここまで MCP Tool Server を試してきましたが、jgraph/drawio-mcp リポジトリには4つのアプローチが用意されています。

アプローチ対象環境出力形式MCP 必要
MCP Tool ServerClaude Code, Cursor 等URL → ブラウザで draw.io を開く○
MCP App ServerClaude Desktop 等チャット内にインライン描画○
Skill + CLIClaude Code.drawio ファイルをローカル生成×
Project InstructionsClaude ProjectPython コード実行で URL 生成×

「MCP サーバー」と聞くと1つのツールを想像しますが、対象環境と用途に応じて手段が分かれています。MCP Tool Server と MCP App Server は MCP 対応クライアントが必要で、Skill + CLI と Project Instructions は MCP なしで動作します。

まとめ: 向いている人・向いていない人

Draw.io 公式 MCP Tool Server、使い所を選べば便利だけど万能ではない、というのが正直な感想です。

向いていない人を先に挙げておきます。

  • VS Code で作業を完結させたい
  • .drawio ファイルをローカルで管理したい
  • GitHub リポジトリに図を保存したい

向いていない人向けには、上で紹介した Skill + CLI が選択肢になります。MCP なしで .drawio ファイルをローカルに生成できるので、VS Code + Git のワークフローに乗せられます。次回の記事で Skill + CLI のセットアップと MCP Tool Server との比較をやっていく予定です。

逆に、向いている人はこういう方です。

  • ブラウザで draw.io を使い慣れている
  • Mermaid で図を書きたい（トークン効率が圧倒的）
  • セットアップを最小限にしたい（.mcp.json に数行追加するだけ）
  • URL を Slack やチャットで共有したい

最後にもう1つ。Draw.io は Mermaid や PlantUML とは違って GUI エディタなので、AI が生成した図を人間がブラウザ上で手で仕上げるワークフローが成立します。テキストベースのツールだと AI の出力がそのまま最終成果物になりがちですが、draw.io なら色・配置・形状を自由に調整できる。この「AI が 80% 作って、残りを人間が仕上げる」感覚は、他のダイアグラムツールにはないものでした。

ではまた！

関連ブログ

MCP と Skills の使い分け

AI × 図解作成

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。
エンジニア募集中!

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

AzureOpenAI入門：FunctionCallingで生…

次の記事

Draw.io公式Skillで設計図をGitHub管理 — V…