draw.io × Claude Code MCP連携｜「構成図を描いて」で本格的なAWS図が出てくる

わさびです。

「構成図を描くの、地味にめんどくさい」

エンジニアなら誰でも思ったことがあるはず。draw.ioを開いて、四角を並べて、矢印を引いて、位置を揃えて。中身は分かっているのに、作図に時間を取られる。

draw.io公式がMCPサーバーをリリースした。Claude Codeと接続すれば、「このTerraformからAWS構成図を作って」と言うだけで、編集可能なdraw.io図が出てくる。

背景と経緯

draw.ioはJGraphが開発するオープンソースの作図ツールで、AWSなどのクラウドアーキテクチャ図からUMLまで幅広く使われている。エンジニアの間では事実上の標準的な作図ツールの一つといえる。

MCPが普及するにつれて、各ツールがMCPサーバーを公開する動きが加速している。draw.io公式がMCPサーバーを提供したのもその流れだ。GitHub、Figma、Jiraなど開発ツールのMCP対応が次々と発表されており、Claude Codeを中心に「開発ツールのAI統合」という生態系が形成されつつある。

今回のdraw.io MCPは特に「IaCコードと構成図のギャップ」を埋めることができる点で注目されている。Terraformを書いた後に構成図を手動で更新する作業は、エンジニアの「隠れた工数」として長年問題視されてきたからだ。

draw.io MCP とは

draw.io（diagrams.net）の公式チームが提供するMCPサーバーだ。Claude CodeやClaude Desktopから、draw.ioの図を直接作成・編集できるようになる。

3つの方式がある。

対応フォーマットはXML、CSV、Mermaid.jsの3つ。既存のMermaid記法がそのまま使えるのがありがたい。

セットアップ（1分で終わる）

Claude Codeの場合、リモートMCPサーバーを追加するだけ。

claude mcp add --transport http drawio-mcp https://mcp.draw.io/mcp

これだけ。インストール不要で、すぐに使い始められる。

ローカルで動かしたい場合は npx 方式もある。

npx @drawio/mcp

実例で見る3つの使い方

パターン1: Terraformから構成図を自動生成

既存のTerraformコードを読ませて「AWS構成図を作って」と言うだけ。VPC、サブネット、EC2、RDS、ALBなどのリソースを自動で配置してくれる。

実際にClaude CodeがTerraformファイルを読み、リソースを1つずつ図に追加していく。4分ほどで完成する。手で描くと30分はかかる作業だ。Terraformのstateファイルやmoduleの構造も解釈してくれるので、複雑な構成でも対応できる。

パターン2: フローチャートをテキストで指示

業務フローやアルゴリズムを言葉で説明するだけで、整った図になる。

「ユーザー登録→メール認証→ログイン」みたいなざっくりした指示でも、分岐や条件を含むフローチャートを生成してくれる。「エラー時は再送信、3回失敗でロック」といった条件を追加で指示すれば、その分岐も加えた図になる。

パターン3: 既存の図を読み取って修正

draw.ioのファイルを渡して「ここにキャッシュ層を追加して」と指示することもできる。既存の図を壊さずに、要素を追加・変更できる。

コードレビューの場で「この構成図、ここ変えたほうがよくない？」という議論から、その場で図を更新できる。ドキュメントとコードの乖離をリアルタイムで修正できるのは、開発チームにとって大きなメリットだ。

Figma MCPとの違い

先日紹介したFigma MCPがUIデザインの双方向変換なのに対して、draw.io MCPはインフラ・アーキテクチャ図に特化している。

用途が違うので、両方入れておくのがおすすめだ。

僕の分析

draw.io MCPが実現するのは「コードと図の同期」という開発者の長年の課題解決だ。IaC（Infrastructure as Code）が普及したことで、インフラ構成はコードで管理されるようになったが、ドキュメントとしての構成図は手動更新が続いていた。コードが変わっても図を更新し忘れる、という状況はどの開発チームでもあるはずだ。

MCPを使ってClaudeがTerraformコードを読み、構成図を自動生成・更新する仕組みが整えば、「コードを変えたら図も自動で更新」というCI/CDパイプラインに組み込むことも将来的には可能になる。技術的な実現可能性は十分あり、あとはチームのワークフローに組み込む意志の問題だ。

ただし現時点では、生成される図の品質は指示の精度に依存する。複雑な構成では意図と異なる配置になることもあるため、出力を必ず確認する習慣は持ち続けてほしい。完全に任せるのではなく、叩き台を作ってもらって手動で仕上げるというスタンスが今の段階では現実的だ。

MCPの「1コマンド追加」が効いてくる

draw.ioもFigmaも、セットアップは claude mcp add の1行だけ。この手軽さがMCPの強みだ。

従来なら、draw.ioのAPIを調べて、認証を実装して、XMLを組み立てて…という開発が必要だった。MCPなら「追加して使う」だけ。Claude Codeが対応するMCPサーバーは今後も増えていく。1つ追加するたびに、AIの「できること」が広がる。

あわせて読みたい

• Figma × Claude Code MCP連携 — UIデザインの双方向変換
• Claude MCP完全ガイド — MCPの仕組みと使い方の基礎
• Claude Code完全ガイド — MCP対応のコーディングエージェント
• Claudeニュースまとめ — Claude関連の最新ニュース

見てもらえるだけで応援になります

このブログはアフィリエイトリンクで運営されています。以下のリンクから気になるサービスをチェックしてもらえると、僕たちの活動の支えになります。

• Value AI Writer byGMO — AIブログ記事作成ツール
• ConoHa — ブログ・開発環境に必要な機能が揃ったVPS

この記事を書いたのは わさび（ニホンイシガメ / 3歳 / VTuberあかはら。の家族）です。

あかはらVラボ — Claude特化の情報を発信中。