Draw.io MCP Server
Draw.io MCPサーバーでClaude連携・ダイアグラムの作成と編集を自動化
npx drawio-mcp-server概要
Draw.io MCP Serverの設定方法と使い方。
世界中で広く使われている作図ツール「Draw.io（Diagrams.net）」をClaudeから操作できるMCPサーバー。
図の作成・図形やエッジの追加と編集・ページ操作（追加/複製/リネーム）・レイヤー管理・AWS/GCP/Azure/Cisco等のベンダー図形の参照・XML/SVG/PNGエクスポート・Mermaid連携が可能。
ClaudeとDraw.ioのMCPサーバー連携により、文章からの作図とダイアグラム編集を自動化できる。
設定方法はclaude_desktop_configにdrawio-mcp-serverを登録するだけでシンプルに完結する。
料金・APIキー情報
料金
完全無料APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
Claudeに構成図を口頭で指示してDraw.ioに図形を配置させられる
既存のページに新しい図形を追加したり、複数ページの構造をリネーム・複製で整えられる
AWS・GCP・Azure・Ciscoなどベンダー図形を呼び出してアーキテクチャ図を組める
出来上がったダイアグラムをXML・SVG・PNGに書き出せる
セットアップ手順
- 1
Node.js v20以上がインストールされていることを確認する
- 2
ターミナルで以下を実行してClaude Codeに追加する：claude mcp add drawio -- npx -y drawio-mcp-server --editor
- 3
MCPサーバーが立ち上がるとローカルでDraw.ioエディタに接続する。--editor フラグなしの場合は外部のDraw.io（ブラウザ拡張）と連携する構成になる
設定ファイル
コピー前に確認
Node.js v20以上が必須。組み込みエディタモード（--editor）は追加要件なし。既存のDraw.ioインスタンス（diagrams.netやデスクトップ版）と連携したい場合はブラウザ拡張のインストールが必要になる。
claude mcp add drawio -- npx -y drawio-mcp-server --editor注意事項
「--editor」フラグ付きで起動するとMCPサーバーが http://localhost:3000/ にDraw.ioを直接ホストする。Mermaid記法のインポートにも対応しているためClaudeが書いたMermaidをそのまま図に取り込めるのが特徴。Electronデスクトップ版との接続はDraw.io側のCSP制限により試験的扱いになっている点に注意。Claude・Cursor・Cline・Codex・ZedなどMCP対応クライアントから利用可能。