検証しようと思ったキッカケ
- 案件でAWS構成図を作成することがあるのですが、PoCやRFPの段階で、あまり時間をかけずにパパっと作りたいなぁと考えていました。
- そこで、AIの力でどうにか自動化できないか試行錯誤していたのですが、対話形式でプロンプトを投げてみても作り直しが必要になったり、AWSアイコンが使われなかったりしていたので、KiroのIDE上でDraw.ioのMCPサーバ構築してみたら満足いく構成図を作ってくれるのではないかと考えました。
事前準備
- Kiroのインストール
https://kiro.dev/downloads/ - Node.jsとnpmを準備する
MCPサーバーはnpx経由で起動するためNode.jsが必須。
Node.js 18 以上をインストール - node -v と npm -v で確認
既に入っていればこのステップは完了
KiroでMCPを使うための手順
- draw.ioのMCPサーバーをインストール
npm install -g @drawio/mcp
- MCP サーバーを起動する
npx @drawio/mcp
- KiroにMCPサーバーを登録する
- 左メニュー → Settings → MCP Servers を開く
- Open Workspace MCP Config (JSON),Open User MCP Config (JSON)を開き、下記のJSONを貼り付ける。
*VSCodeの場合、settings.jsonに追加します。
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@drawio/mcp"]
}
}
}
- Kiroを再起動する。
Kiroを使用してAWS構成図の作成
- 下記の内容をプロンプトに投げる。
draw.io を使って以下の AWS 構成図を作成してください。
VPC(10.0.0.0/16)
2つのAZ(1a,1c)
Public Subnet に ALB
Private Subnet に EC2
RDS(Multi-AZ)
AWS公式アイコンを使用してください。
感想
- プロンプトに与えた要件通りの構成図が作成されていて、改めてAIってすごいなあと感じました。
- 完成度でいうと、改善しなければならない点(NW周りのリソースがAWSアイコンになっていない等)がありますが今回の目的でしたPoCやRFP向けの説明資料としては満足のいくものができたので、同じ苦労をしているエンジニアの方たちの少しでも役に立てたらいいなあと思いました。
