最近、draw.ioが公式のMCP Toolを公開しました。
draw.io はアーキテクチャ図を作成する際によく使われるツールで、主要なクラウドサービス（Azure、AWS、GCP など）のアイコンが豊富に揃っているため、とても便利です。
ただし、アーキテクチャ図を作る作業自体は意外と時間がかかります。
頭の中で構成を考えるのはそれほど難しくないのですが、実際にアイコンを探して配置し、接続して図を完成させるまでにはそれなりの手間がかかります。
そこでこのdraw.io の MCP Toolを使うと、LLMから直接アーキテクチャ図を生成することができます。
実際に試してみたところ、かなり良い感じだったので、今回は簡単に紹介しつつ、私の使用例も共有したいと思います。
インストール方法
インストールはとても簡単で、以下のURLを参考に 1行のコマンドを実行するだけです。
1. 利用可能な draw.io MCP tools を確認する
まず、Agentに対して「利用可能な draw.io の MCP tools は何か」を確認します。
すると、上記のように 3つの tool が利用可能であることが分かります。
2. 基本的な RAG アーキテクチャを生成してもらう
次に、簡単なRAGアーキテクチャの生成を試しました。
今回は「Azureのサービスを中心にしたRAG構成」という程度のシンプルな要求だけを出しました。
生成された結果はこちらです。
全体的にはうまくできています。処理の流れも問題なく、使われているサービスもおおむね妥当です。
ただ、ツールを指定していなかったため Mermaid形式で生成されており、少し見づらい印象があります。そこで、XML形式で再生成してみました。
3. XML形式で再生成
生成されたXML図を見ると、なかなか良い出来ですね。
Mermaidでは5つのブロックに分かれていたため、XMLでも 5つのレイヤー構造として整理されています。
全体のフローも特に問題はありません。ただし、自分で図を書く場合であれば、左から右へ流れるレイアウトのほうが読みやすいと感じるので、さらに以下のような追加条件を指定してみました。
- フローを 左 → 右 にする
- Azure公式アイコンを使う
少し調整した結果⇩
かなり見やすくなりました。
ただ、いくつかのアイコンは古いサービスのものが使われていました。おそらく新しいサービスのアイコンにはまだ対応していない可能性がありますが、最初から手動で作図することを考えると、かなり作業時間を短縮できると感じました。
まとめ
いかがでしょうか。実際に使ってみるとかなり便利で、アーキテクチャ図作成の時間を大幅に短縮できそうです。
また、数日前には draw.io の Skills機能もアップデートされました。MCPをインストールしなくても、Skillsを使って同様の作図が可能です。
興味がある方は試してみてください。