トップ > Claude Code > draw.io公式MCPサーバーをClaude Codeで使う

draw.io公式MCPサーバーをClaude Codeで使う

Claude Code
記事タイトルとURLをコピーする

Claude Code で draw.io を操作！

こんにちは、サーバーワークスで生成AIの活用推進を担当している針生です。

「システム構成図を作って」とClaude Codeに伝えたら、すぐにdraw.ioが開いて編集もできるようになりました！

2026年2月、draw.ioの開発元であるJGraphが、公式MCPサーバー @drawio/mcp を公開しました *1。MCP（Model Context Protocol）は、LLMが外部ツールと標準化されたプロトコルで連携するための仕組みです。このMCPサーバーを使うと、Claude Codeに自然言語で指示するだけで、draw.ioの編集可能なダイアグラムを生成できます。

この記事では、Claude Codeでdraw.io MCPをセットアップする手順と、3つのツールの使い方を解説します。

draw.io MCPサーバーとは何か

@drawio/mcp は、draw.ioチーム自身が開発・公開している公式のMCPサーバーです *2。npmには drawio-mcp-server などコミュニティ製のパッケージも存在しますが、@drawio/mcp はJGraphの公式リポジトリで管理されているため、draw.io側の変更への追随が期待できます。

このMCPサーバーは、3つのツールを提供します。

ツール名 機能 主なユースケース
open_drawio_mermaid Mermaid.js構文をdraw.ioダイアグラムに変換 フローチャート、シーケンス図、状態遷移図
open_drawio_csv CSVデータをダイアグラムに変換 組織図、ネットワークトポロジー、階層構造
open_drawio_xml draw.ioネイティブXML形式でダイアグラムを開く アーキテクチャ図、インフラ構成図、ER図

裏側の仕組み

内部的には、AIが生成したダイアグラムのコンテンツ（XML、CSV、またはMermaid構文）をMCPサーバーが圧縮・エンコードし、そのデータを埋め込んだdraw.io URLを生成します *3。URLを開くとdraw.ioエディタでダイアグラムが表示されます。

ここでポイントなのは、ダイアグラムのデータはURLの #create フラグメントに含まれており、通常のHTTPリクエストではサーバーに送信されない設計という点です。draw.ioのバックエンドに保存されることはありません。ただし、URLの共有やブラウザ履歴には残り得るため、機密性の高い情報を含める場合は取り扱いに注意してください。

Claude Codeでのセットアップ

前提条件はNode.js環境（npxが使えること）のみです。セットアップ方法は2つあります。

方法1: プロジェクトローカル（.mcp.json）

プロジェクトのルートに .mcp.json ファイルを作成します。

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

この方法は、プロジェクト単位で設定を管理したい場合に適しています。.mcp.json をリポジトリにコミットすれば、チーム全員が同じ設定を共有できます。

方法2: CLIコマンドでグローバル登録

すべてのプロジェクトで使いたい場合は、CLIコマンドで登録します。

claude mcp add drawio -- npx -y @drawio/mcp

一度登録すれば、どのプロジェクトでもdraw.io MCPツールが利用可能になります。

セットアップの確認

設定後、Claude Codeに「draw.ioのツールは使えますか？」と聞いてみてください。open_drawio_xml、open_drawio_csv、open_drawio_mermaid の3つが表示されれば準備完了です。

MCPサーバーが認識されない場合は、Claude Codeを再起動してください。.mcp.json のJSON構文エラーもよくある原因の一つです。

実際に使ってみる: 3つのツールの活用例

どのツールを使っても、基本的な流れは同じです。Claude Codeに自然言語で指示すると、AIがダイアグラムのコードを生成し、MCPツールがdraw.io URLを返します。ターミナルに表示されたURLをCmd+クリック（macOS）すると、ブラウザでdraw.ioエディタが開き、そのまま編集できます。

Mermaid: 最も手軽な方法

Mermaid.jsの構文はLLMが生成しやすく、最も手軽に使えるツールです。

open_drawio_mermaid を使って、ユーザーログインフローのフローチャートを作成して

AIがMermaid構文を生成し、MCPサーバーがそれをdraw.ioダイアグラムに変換します。フローチャート、シーケンス図、状態遷移図など、Mermaid構文がサポートする範囲の図に対応しています。

他にも、こんなプロンプトが使えます。

  • 「open_drawio_mermaid でOAuth2フローのシーケンス図を作成して」
  • 「open_drawio_mermaid で注文ライフサイクルの状態遷移図を作成して」

CSV: データ駆動のダイアグラム

既存のデータから図を生成したい場合は、CSVツールが便利です。

open_drawio_csv で手持ちのCSVファイル（team.csv）をもとにチームの組織図を作成して

表形式のデータから、自動レイアウトされたダイアグラムが生成されます。組織図、ネットワークトポロジー、階層構造など、データの関係性を視覚化するのに向いています。

注意： 著者が試した現時点（v1.1.0）では open_drawio_csv にブラウザ側でエラーが発生する不具合がありました。最小限のCSVデータでも Failed to execute 'setAttribute' on 'Element' エラーとなり、ダイアグラムが表示されませんでした。

XML: 最も柔軟なカスタマイズ

draw.ioネイティブのmxGraph XML形式を使うため、レイアウトやスタイルを最も細かく制御できます。

open_drawio_xmlでシステムアーキテクチャ図を作成して。
フロントエンド（React）→ APIゲートウェイ → バックエンドサービス群 → データベース
の構成で、色分けされたセクションと番号付きのステップを含めて

アーキテクチャ図やインフラ構成図など、精密な配置が求められるダイアグラムに向いています。AIがXML全体を生成してくれるため、手でXMLを書く必要はありません。

使いこなすためのTips

ツール名をプロンプトに含める

Claude Codeにはダイアグラムを生成する方法が複数あり得るため、MCPツールを確実に使わせるには、プロンプトにツール名を明示するのが効果的です。

# ツール名なし（MCPが使われない可能性がある）
フローチャートを作成して

# ツール名あり（確実にMCPツールが使われる）
open_drawio_mermaid でフローチャートを作成して

3つのツールの使い分け

重視するポイント 推奨ツール 理由
手軽さ open_drawio_mermaid Mermaid構文はAIが最も生成しやすい
データの可視化 open_drawio_csv 既存データをそのままダイアグラムに変換（※執筆時点で不具合あり）
精密なレイアウト open_drawio_xml draw.ioネイティブ形式で完全な制御が可能

迷ったらまず open_drawio_mermaid から試してみてください。Mermaidで表現しきれない場合にXMLへ切り替える、という流れが実用的です。

生成後はdraw.ioで仕上げる

AIが生成するダイアグラムは構造と情報は正確ですが、配置の微調整、色の変更、アイコンの追加といった仕上げ作業は、draw.ioエディタ上で手動で行うのが現実的です。AIに構造を作らせ、人間が見た目を仕上げる。この分担が最も効率的です。

現時点での注意点

@drawio/mcp は2026年2月2日に公開されたばかりのパッケージです（以下、執筆時点2026年2月12日の情報）。最新バージョンは1.1.0（2月6日リリース）で、公開から4日間で7回のリリースが行われるなど、活発に改善が進んでいます。

GitHubリポジトリにはまだLICENSEファイルが設定されていません（Issue #2で要望中）。業務利用をする場合は、ライセンスの明確化を待った方がいいかもしれません。

また、npmには drawio-mcp-server など名前が似たコミュニティ製のパッケージも存在します。draw.ioチーム公式のパッケージは @drawio/mcp（スコープが @drawio）ですので、インストール時にはパッケージ名を確認してください。

まとめ

draw.io公式MCPサーバーにより、「Claude Codeに指示する → 編集可能なダイアグラムがdraw.ioで開く」というワークフローが実現しました。セットアップは .mcp.json への数行の追加か、CLIコマンド1行で完了します。

Mermaid、CSV、XMLの3つのツールを場面に応じて使い分ければ、フローチャートからアーキテクチャ図まで幅広くカバーできます。まずは open_drawio_mermaid で、手元のプロジェクトの構成図を1枚作ってみてください。

この記事のまとめイラスト

参考文献

*1:JGraph. "@drawio/mcp." npm. https://www.npmjs.com/package/@drawio/mcp

*2:JGraph. "drawio-mcp." GitHub. https://github.com/jgraph/drawio-mcp

*3:Modi, R. (2026). "Vibe Diagramming with draw.io's MCP Server." Medium. https://medium.com/@Modi_Rohan/vibe-diagramming-with-draw-ios-mcp-server-a6ae524f2b3a

針生 泰有(執筆記事の一覧)

サーバーワークスで生成AIの活用推進を担当