draw.io MCPとは？公式MCPサーバーの導入手順とAI作図の活用法を徹底解説
MCPがもたらす作図ワークフローの変革 手作業で図を描く時代は過去のものになりつつあります。MCP（Model Context Protocol）は、LLM（大規模言語モデル）が外部ツールと直接やり取りするための標準プロトコルです。draw.ioの開発元であるdraw.io Ltdは、このMCPに公式対応したサーバー @drawio/mcp を公開しました。 従来はLLMにXMLを生成させ、手動でdraw.ioにインポートする必要がありました。MCPサーバーを使えば、Claude DesktopなどのMCPクライアントから「ネットワーク構成図を描いて」と指示するだけで、draw.ioエディタ上に図が直接表示されます。 draw.io公式MCPサーバーの概要 公式MCPサーバーのリポジトリは jgraph/drawio-mcp です。npmパッケージ名は @drawio/mcp で、以下の3つのツールを提供しています。 ツール名 入力形式 用途の例 open_drawio_xml draw.io XML（mxGraph形式） 既存XMLの編集、LLMが生成したXMLの可視化 open_drawio_csv CSV（カンマ区切りデータ） 組織図やフローチャートの一括生成 open_drawio_mermaid Mermaid記法 フローチャート・シーケンス図・クラス図の変換 3つのツールに共通するオプションパラメータとして、lightbox（読み取り専用モード）と dark（ダークモード："auto" "true" "false"）があります。 内部的には「コンテンツを圧縮 → Base64エンコード → draw.io URLの #create ハッシュに埋め込み → ブラウザで展開」という仕組みで動作します。 インストールと設定手順 必要な環境 Node.js（npxが使える環境） ブラウザまたはdraw.ioデスクトップアプリ 方法1：npxで直接実行（推奨） 追加インストール不要で即座に利用できます。 npx @drawio/mcp 方法2：グローバルインストール 頻繁に使う場合はグローバルインストールが便利です。 npm install -g @drawio/mcp drawio-mcp 方法3：ソースからビルド カスタマイズや開発目的の場合に選択します。 git clone https://github.com/jgraph/drawio-mcp.git cd drawio-mcp npm install npm start Claude Desktopへの接続設定 Claude Desktopの設定ファイルにMCPサーバーを登録します。 ...