記事公開日
【2026年最新版】draw.io公式「MCPサーバー」で構成図を自動生成
この記事のポイント
draw.io公式MCPサーバーのリリースに伴い、AWS系IDE「Kiro」を活用してAWS構成図を自動生成・編集する手法を検証した技術レポートです。
- draw.io公式MCPサーバーの機能：
npmおよびGitHubで公開された公式ツールにより、外部エディタからAIエージェントを介したダイアグラム操作（新規作成・編集）が可能になりました。 - 自然言語とコードによる作図の検証：
KiroのVPC構成指示や既存のCDKコードを読み込ませることで、AWS公式アイコンを用いた構成図が生成できることを実証しました。 - 自動化の有効性と所感：
生成後のレイアウト微調整は必要であるものの、ゼロからの作図作業と比較して大幅な工数削減と効率化が見込めます。
はじめに
こんにちは。DXソリューション営業本部の岡田です。
先日、draw.ioの公式MCPサーバーがリリースされました。
これまでは、手作業でアイコンを配置し、線を引いたり、生成AIにコードを出力させて手動でコードの貼り付けを行っていました。
しかし、公式MCPサーバーがリリースされたことにより、AIエージェントが直接draw.ioを操作し、AWSなどの構成図を作成、編集が可能になります。
※draw.ioとはブラウザ上で動作する無料・高機能な作図ツールです。
https://www.npmjs.com/package/@drawio/mcp
draw.io公式からMCPがリリースされました。
GitHub - jgraph/drawio-mcp: Model Context Protocol server for draw.io
draw.io MCPサーバーの公式リポジトリです。ソースコードの確認や、詳細な技術仕様などの確認はこちらから可能です。
今回は、このMCPサーバーをAWS製のIDEであるKiroに組み込んで、自然言語やCDKからAWSアイコンを用いた構成図が正確に作成できるか検証したいと思います。
Kiroの概要については下記ブログをご覧ください。
MCPサーバーの概要
MCP（Model Context Protocol）とは
まず、MCPについて解説します。
MCPとは、AIエージェントと外部ツールを接続するためのオープンな共通規格です。
この共通規格が登場したことで、一度MCPサーバーとして機能を公開すれば、Kiroなどのエディタから共通の規格でツール（今回はdraw.io）を操作できるようになります。
Introduction - Model Context Protocol
MCPについて詳しく知りたい方はこちら
draw.io 公式 MCP サーバーの機能
今回draw.ioから公式にMCPサーバーがリリースされたことで、AIが直接draw.ioの図を作成、編集できるようになりました。単に自然言語で構成図を作成してくれるだけではなく、既存のYAMLやJSONなどのCloudFormation、CDKを読み取って構成図を作成することも可能になります。
※今回のdraw.io公式MCPサーバを動作させるには、Node.jsのインストールが必要です。インストールしていない方はNode.js公式サイトからインストーラーをダウンロードして実行してください。
できること
1.AWS公式アイコンを用いた構成図を含むダイアグラムの新規作成
2.既存の図面の読み取り、修正
スペック一覧
| 項目 | 内容 |
|---|---|
| 主な機能 | AIによるダイアグラムの新規作成、既存図面の読み取り、編集 |
| 入力フォーマット | プロンプト(自然言語)/yaml/JSON |
| 出力フォーマット | .drawio形式（XML）/CSV/Mermaid/PNG |
実践準備
上記で紹介したMCPサーバーを、先述したように今回はAWS製のIDEであるKiroを使用して検証したいと思います。
接続設定
最初にKiroの設定ファイルに、draw.io MCPサーバーを起動するためのJSONコードを追記します。
{
"mcpServers": {
"drawio": {
"command": "cmd",
"args": ["/c", "npx", "@drawio/mcp@latest"]
}
}
}
今回の検証エディタであるKiroを起動して、上記JSONコードを下記にあるファイルに貼り付け、保存を押します。
C:\Users\****(ユーザー名)\.kiro\settings\mcp.json
※mcpServers セクションが既に存在する場合は、その中に追記してください。
貼り付けが完了したら、Kiroアイコンをクリックします。MCP SERVERSを見てみると、draw.ioが適用されています！
これで準備完了です。実際に検証してみましょう。
実践
①自然言語入力し構成図を作成
まずはKiroのVibe機能を使用して、自然言語でAWSの構成図が作成できるか下記の指示を出します。
【指示文】
VPC内に2つのAZ（AZ-A, AZ-C）を作成し、それぞれにパブリックとプライベートのサブネットを1つずつ配置して。
パブリックにALB、各AZのプライベートにEC2を1台ずつ。RDSとS3も配置して。
AWS公式アイコンを使用して、通信の流れを矢印でつないだ構成図を描いて。
指示文を実行すると下記のようにMCPサーバーが起動します。
画面に表示された「Run」を選択します。
「Run」を選択するとdraw.ioのブラウザが自動で開き、指示した構成図が表示されました。
AZの分割や各リソースの配置などこちらが意図した通りの構成図が作成されましたが、アイコンや直線など若干の修正は必要です。
KiroにAWSの公式アイコンを使用することと、線が重なっている部分の修正を加えてもらいます。
若干改善しましたが、まだAWSアイコン公式アイコンが使用されていない箇所や線や文字が重なっている部分があるので手動で修正します。
手動で修正しました。修正しましたが、一から構成図を作成する訳ではないのでかなりの時短になりました。
②CDKで構成図を生成
次に既存のCDKを任意のディレクトリに配置し、読み込ませて、構成図が作成できるか検証したいと思います。
以前のブログで検証した、Powersを使用して作成したCDKコードを利用したいと思います。
【指示文】
CDKコードを読み取ってその構成をdraw.ioで図解して。AWS公式アイコンを使用して、通信の流れを矢印でつないだ構成図を描いて。
自然言語で指示した際と同様にMCPサーバーが起動し、「Run」が表示されました。「Run」を選択すると、同様にdraw.ioのブラウザが自動で開き、構成図が表示されました。
CDKコードの複雑なソース関係の視覚化をあっという間にしてくれましたが、細かい修正は必要です。
同様に手動で修正してみます。
修正しました。作成された構成図が完璧でなくても手動で修正できる点が素晴らしいと思いました。
まとめ
今回はdraw.ioが新たにリリースした公式のMCPサーバーを使用して構成図を作成できるか検証してみました。
アイコンの重なりや矢印の微調整など、人間による仕上げは若干必要ですが、ゼロから図形を並べる手間に比べればかなりの時短になります。
今回はdraw.ioのMCPサーバーの紹介でしたが、今後は複数のMCPを組み合わせた設計などを検証したいと思います。
もし「このサービスについて知りたい」「AWS環境の構築、移行」などのリクエストがございましたら、弊社お問合せフォームまでお気軽にご連絡ください。 複雑な内容に関するお問い合わせの場合には直接営業からご連絡を差し上げます。 また、よろしければ以下のリンクもご覧ください！
＜QES関連ソリューション/ブログ＞
＜QESが参画しているAWSのセキュリティ推進コンソーシアムがホワイトペーパーを公開しました＞
※Amazon Web Services、”Powered by Amazon Web Services”ロゴ、およびブログで使用されるその他のAWS商標は、米国その他の諸国における、Amazon.com, Inc.またはその関連会社の商標です。
