BLOG
エンジニアブログ

AWS Summit 2026で刺激を受けて|GenUでAWS構成図を自動生成するアプリを作ってみた

しのテック
しのテック
AWS Summit 2026で刺激を受けて|GenUでAWS構成図を自動生成するアプリを作ってみた

AWS Summit 2026がきっかけ!GenUでAWS構成図を自動生成するアプリを作ってみた

こんにちは!「AWSの構成図を毎回手で描くのが大変……」と感じていませんか?

先日「AWS Summit 2026」で、「SUBARUのエンジン設計現場発 ー生成AI×設計業務改革ー」というセッションを聞きました。

そこで印象に残ったのが、ITエンジニアではない設計現場の方が、GenUを使って自分たちの業務を改革していたという話です。「専門のエンジニアでなくても、生成AIで業務は変えられるんだ」と、大きな刺激を受けました。

そこで私も、GenUを使ってAWS構成図を簡単に作れるアプリを開発してみました。この記事では、その作り方を紹介します。

AWS構成図を1枚作るだけでも、四角を並べて、線をつないで、アイコンを探して……と、地味に時間がかかりますよね。

結論からお伝えすると、GenU と draw.io MCP をつなげば、「作りたい構成を言葉で伝えるだけ」で構成図が自動で描けるアプリが作れます。

この記事では、その仕組みと作り方を、初心者の方にも分かるように優しく解説します。

この記事はこんな方におすすめ

  • AWS構成図作成を楽にしたい方
  • GenUで何か作ってみたい方
  • MCPという言葉を最近よく聞く方

1.結論:GenUとdraw.io MCPで構成図は自動化できる

まず結論です。「AWSの構成を言葉で伝える → 構成図が自動で出てくる」アプリは、今ある道具の組み合わせで作れます。

使う道具は、大きく2つだけです。

この記事で使う2つの道具

  • GenU……AWSが公開している、生成AIアプリの土台
  • draw.io MCPサーバー……AIに図を描かせるための「つなぎ役」

言葉だけだとイメージしにくいので、次の章から一つずつ見ていきましょう。

2.そもそもGenUって何?

GenU(ジェンユー)とは、AWSが無料で公開している「生成AIアプリの土台」です。正式名称は「Generative AI Use Cases」といいます。

チャットや文章の要約など、よく使う生成AIの機能が最初から揃っています。自分のAWS環境に置いて使うため、社内でも安心して使いやすいのが特長です。

さらにGenUには、コードを書かずに独自のAIアプリを作れる「ユースケースビルダー」や「エージェントビルダー」という機能があります。今回はこの仕組みを利用します。

3.draw.io MCPサーバーって何?

次は、もう一つの道具である「draw.io MCPサーバー」です。

draw.io(ドローアイオー)は、無料で使える図の作成ツールです。構成図やフローチャートを描くのに、よく使われています。

そして、MCPは少し聞き慣れない言葉かもしれません。簡単に補足します。

用語メモ:MCPとは?

MCP(Model Context Protocol)とは、AIと外部の道具を繋ぐ共通ルールのことです。「AIとアプリを繋ぐUSB端子」のようなもの、とイメージすると分かりやすいです。

つまり、draw.io MCPサーバーとは、AIが draw.io の図を作ったり書き換えたりできるようにする「つなぎ役」です。これがあることで、AIが自分で図を描けるようになります。

4.アプリ全体の仕組みを図で見てみよう

ここまでの道具が、どうつながって動くのかを図で見てみましょう。文字だけよりも、図を見たほうがイメージしやすいはずです。

動きの流れは、次のとおりです。

処理の流れ

  1. ユーザーがチャットで「こんなAWS構成図を作成して」と伝える
  2. GenUのエージェントが内容を受け取る
  3. GenUのエージェントがdraw.io MCPサーバーに「AWS構成図を作って」と指示する
  4. できあがったAWS構成図がユーザーに返ってくる

ポイントは、ユーザーは言葉で伝えるだけで良いという点です。図を描く細かい作業は、AIとMCPが引き受けてくれます。

各サービスはどこで作られるの?

上記の構成図にはCognitoやCloudFrontなど、いろいろなAWSサービスが並んでいますよね。「これ全部を自分で作るの?」と身がまえてしまうかもしれません。

でも、ご安心ください。ほとんどのサービスは、「5.作り方は3STEP」STEP 1のデプロイで自動的に作られます。自分で1つずつ準備する必要はありません。

どのサービスが、どの段階で作られるのかを表にまとめました。

サービス 役割 どこで作られる
Cognito ログイン・ユーザー認証 STEP 1で自動作成
CloudFront 画面(フロント)の配信 STEP 1で自動作成
S3(Webホスティング) 画面ファイルの置き場 STEP 1で自動作成
API Gateway リクエストの入口 STEP 1で自動作成
Lambda バックエンドの処理 STEP 1で自動作成
Bedrock AgentCore Runtime エージェントの実行環境 STEP 1で設定を有効化
draw.io MCPサーバー 図を描くつなぎ役 STEP 2で登録
Amazon Bedrock(基盤モデル) 言葉の理解・図の組み立て 既存サービスをそのまま利用
S3(生成ファイル保存) できた.drawioの保存先 STEP 1で自動作成

ここがポイント

表を見ると分かるとおり、自分で手を加えるのはSTEP 2〜3のエージェントとMCPの部分だけです。CognitoをはじめとするWebアプリの土台は、STEP 1のデプロイでまとめて用意されます。

5.作り方は3STEP

それでは、実際の作り方を見ていきましょう。大きく3つのSTEPに分けて進めます。

STEP 1 GenUを用意する

まずは土台となるGenUを、自分のAWS環境に置きます。あらかじめ、AWS CLIの認証とNode.jsが使える状態にしておきましょう。

最初に、GenUを取得して必要な準備をします。

▼ 取得と初期準備(最初の1回だけ)
git clone https://github.com/aws-samples/generative-ai-use-cases.git
cd generative-ai-use-cases
npm ci
npx -w packages/cdk cdk bootstrap

次に、AIエージェントの機能を有効にします。設定ファイル packages/cdk/cdk.json を開き、context の中にある次の2つの項目を true に書きかえます。

▼ cdk.json(context 内)の設定
{
  "context": {
    ...
    "createGenericAgentCoreRuntime": true, // AgentCore を有効化
    "agentBuilderEnabled": true,           // AgentBuilder を有効化
    ...
  }
}

ワンポイント

GenUの設定は cdk.json に書く方法と parameter.ts に書く方法があります。cdk.json"env" が空のままなら、設定は cdk.json が使われます。基本はこのcdk.jsonを直接編集すればOKです。

最後にデプロイします。ここで、Cognitoなどの土台もまとめて作られます。完了すると、アクセス用のURL(CloudFront)が表示されます。

▼ デプロイ
npm run cdk:deploy
つまずきポイント:x86マシンでビルドがコケる

AgentCoreは、エージェントをARM(aarch64)向けのDockerコンテナとしてビルドします。そのため、x86(Intel/AMD)系のマシンでデプロイすると、次のようなエラーで止まることがあります。

exec /bin/sh: exec format error
ERROR: failed to solve: process "/bin/sh -c apt-get update ..."
did not complete successfully: exit code: 255

これは「x86マシンなのにARM向けのバイナリを実行しようとして失敗している」状態です。対処法は2つあります。

対処1:QEMUエミュレーションを登録する(今の環境のまま)

x86上でもARMイメージをビルドできるように、変換用の仕組み(QEMU)を登録します。1行実行するだけです。

docker run --privileged --rm tonistiigi/binfmt --install all

登録できたか、次のコマンドで確認できます。enabled と表示されればOKです。

cat /proc/sys/fs/binfmt_misc/qemu-aarch64

確認できたら、もう一度 npm run cdk:deploy を実行します。

対処2:ARM(Graviton)のマシンでビルドする

そもそもビルド環境をARMにすれば、変換が不要になり、そのまま通ります。継続的に運用するなら、t4gc7g などのGravitonインスタンスを使うのがおすすめです。ビルドも速くなります。


デプロイ完了後、CloudFrontのURLにアクセスするとサインイン画面が表示されます(個人情報はマスクしています、以降の図表も同様です)

サインイン後のホーム画面(ユースケース一覧)。左メニューにAgentBuilderが追加されています
STEP 2 draw.io MCPサーバーを登録する

次に、draw.io MCPサーバーをエージェントに登録します。AgentBuilder用の設定ファイルに、使うMCPサーバーを書き加えます。

▼ 編集するファイル
packages/cdk/lambda-python/generic-agent-core-runtime/mcp-configs/agent-builder/mcp.json

このファイルの mcpServers の中に、すでにいくつかのMCPサーバーが登録されています。既存の設定は消さず、末尾に drawio を1件追記します。npmのパッケージ名は drawio-mcp-server です。

▼ mcpServers の末尾に追記する(前の項目のあとにカンマを忘れずに)
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server"],
      "metadata": {
        "category": "Diagram",
        "description": "Generate editable draw.io (.drawio) diagrams"
      }
    }

追記したら、リポジトリのルートで、もう一度デプロイして反映します。

npm run cdk:deploy

デプロイが終わったら、GenUの画面を強制リロード(Windowsは Ctrl+Shift+R)します。「+ エージェントを作成」を開き、MCPサーバー一覧に drawio(Diagramカテゴリ)が増えていれば成功です。

かんたんに始めたい方へ

実はGenUには、最初からAWSの図を作るMCPサーバー(aws-diagram-mcp-server)が入っています。編集できる.drawioファイルが不要なら、このSTEP 2は飛ばして、STEP 3でそれを選ぶだけでもOKです。まずはこちらで動作を試すのもおすすめです。

ワンポイント:反映は再デプロイが必要

MCPサーバーは、GenUの画面から後追いで追加できません。mcp.json に書いて再デプロイしてはじめて、選択肢に出てきます。編集後は必ず npm run cdk:deploy を実行しましょう。

STEP 3 言葉で伝えて図を作る

GenUの画面でAgentBuilderを開き、「+ エージェントを作成」を押します。名前と説明を入れて「AIにより生成する」を押すと、システムプロンプトと使うMCPサーバーが自動で埋まります。

さらに、システムプロンプトにAWS構成図作成用の指示を足すと、仕上がりの精度が上がります。

▼ システムプロンプトに足す指示の例
あなたはAWS構成図の作成アシスタントです。
- 図は draw.io(.drawio)形式で出力する
- AWSサービスは必ずAWS公式アイコンを使う
- VPCやサブネットなどの境界はグループ枠で表現する
- 生成後、含めた主要サービスを箇条書きで説明する

MCPサーバー設定で drawio(または aws-diagram-mcp-server)を選び、右側のテスターで動かしてみましょう。たとえば、次のように伝えます。

AgentBuilderのエージェント作成画面。システムプロンプトとMCPサーバーを設定し、右のテスターで実行できます

プロンプト例

「VPCの中に、ロードバランサー・ECS・RDSを置いた3層構成の図を、AWS公式アイコンで構成図を作成してください」

すると、構成図が.drawio形式で作られます。問題なければ「作成」で保存すれば完成です。あとは draw.io で開いて、細かい部分を手直しできます。

生成されたAWS構成図の例(ALB・ECS・RDSの3層プライベート構成)(個人情報はマスクしています)
つまずきポイント:AccessDenied(リージョン制限)

テスト実行で、次のようなエラーが出ることがあります。

AccessDeniedException ... is not authorized to perform:
bedrock:InvokeModelWithResponseStream ...
with an explicit deny in a service control policy

これは、組織で「使えるリージョンを限定するガードレール(Region Deny)」が設定されている環境で起きます。原因は多くの場合、モデルIDの global. という指定です。

global. で始まる推論プロファイルは、処理を世界中のリージョンに振り分けるため、許可されていないリージョンで動いてしまい拒否されます。

対処法:cdk.json のモデルIDを us. に変えるus. は処理先がアメリカのリージョン(us-east-1 など)に限定されるため、多くのガードレールの許可内に収まります。

"modelIds": [
  "us.anthropic.claude-sonnet-4-6",
  "us.anthropic.claude-haiku-4-5-20251001-v1:0"
],
"agentFoundationModel": "us.anthropic.claude-sonnet-4-6",

書きかえたら npm run cdk:deploy で再デプロイし、エージェントのモデルを選び直して再実行します。組織のガードレール(SCP)自体は変更不要です。

6.きれいな構成図を作る3つのコツ

そのまま使うと、図が「ただの四角と矢印」になってしまうことがあります。ここでは、見栄えをよくする3つのコツを紹介します。

コツ1 AWS公式アイコンを使うよう指示する

指示のときに「AWS公式アイコンで」と一言そえるだけで、図の見た目がぐっとよくなります。エージェントの設定(システムプロンプト)に、予め書いておくのもおすすめです。

コツ2 構成をできるだけ具体的に伝える

「いい感じに」ではなく、置きたいサービス名や、繋ぐ順番まで伝えましょう。具体的に書くほど、狙いどおりの図に近づきます。

コツ3 最後は自分の目で確認する

AIが作った図が、いつも100点とはかぎりません。できあがった図は、必ず自分でも見直しましょう。

7.始める前に知っておきたい注意点

便利な仕組みですが、始める前に知っておくとよい点もあります。表にまとめました。

注意点 簡単な対策
AWSの利用料金がかかる 小さく試して、使わないときは止めておく
GenUのバージョンによって機能が違う エージェント機能に対応した新しいバージョンを使う
複雑な構成図は精度が下がりやすい 図を分けて、少しずつ作らせる

8.気になる月間コストはどれくらい?

「便利そうだけど、料金が心配……」という方も多いですよね。ここで、月間のランニングコストの目安を紹介します。

先に結論をお伝えします。このアプリはほぼ「使った分だけ」の従量課金で、コストの大半はBedrock(AIモデル)の利用料です。Cognitoなどの土台部分は、ほとんど費用がかかりません。

下の表は、「社内で、月に500回ほど構成図を作る」と想定した場合の試算です(Claude Sonnet系モデル・RAGなしの構成)。

項目 役割 月間コストの目安
Bedrock(モデル)入力 指示や図の組み立てを読む 約 $45
Bedrock(モデル)出力 構成図データを生成する 約 $60
AgentCore Runtime エージェントの実行環境 約 $1
Cognito ログイン・認証 ほぼ $0(無料枠内)
CloudFront / S3 画面の配信・保存 $1〜3
API Gateway / Lambda / DynamoDB バックエンド処理 $1〜3
合計(目安)   月 約 $110〜120(約1.7〜1.9万円)

コストのポイント

  • 固定費は月$5前後だけ。残りは生成回数に比例します
  • 数十回しか使わない月なら、月$10〜20ほどに収まります
  • 費用を抑えたいときは、安価なモデルへの切りかえや、生成回数の調整が有効です

要注意:料金の落とし穴

GenUでRAG(KendraやOpenSearch Serverless)を有効にすると、使っていなくても月$350〜800級の固定費が発生します。今回の構成図アプリには不要な機能ですので、オフのままにしておきましょう。

※ 料金は2026年時点の目安です。トークン数や利用回数の想定によって変動します。最新の正確な金額は、AWS公式の料金ページやAWS Pricing Calculatorでご確認ください。

9.使ってみた正直な感想(AWS Summit 2026を経て)

最後に、実際に作って動かしてみた率直な感想をお伝えします。冒頭で触れたAWS Summit 2026のセッションに刺激を受けて挑戦しましたが、良かった点と限界の両方が見えてきました。

良かった点

「言葉で伝えるだけで、構成図の形になる」体験は想像以上でした。頭の中のイメージが、その場でたたき台として可視化されるスピード感は大きな魅力です。

正直な限界

一方で、そのままお客様に提示できる「業務レベルの成果物」ではない、というのが正直な実感です。アイコンの配置や細部の正確さ、表現の統一感などは、最終的には人の手による調整が前提になります。

では価値がないかというと、そうではありません。一番の使いどころは「ベンダーにシステム開発を依頼する前の、イメージ作り」だと感じました。

外部ベンダーに開発を相談するとき、要件や構成のイメージが曖昧なまま話し始めると、認識のズレや手戻りが起きがちです。その前に、こうしたツールでたたき台のAWS構成図をサッと作っておくと、「こういう方向で考えている」という共有がぐっとスムーズになります。完成品としてではなく、相談前の思考整理・イメージ共有のツールとして使う。そこに現時点での価値があると感じました。

10.まとめ

今回は、GenUとdraw.io MCPをつなげて、AWSの構成図を自動で作るアプリについて解説しました。最後に要点を振り返りましょう。

この記事のまとめ

  • GenUは、AWSが公開している生成AIアプリの土台
  • draw.io MCPは、AIに図を描かせるつなぎ役(ヘッドレス環境ではブラウザ連携型は動かず、aws-diagramが確実)
  • 作り方は「GenUを用意 → MCPを登録 → 言葉で伝える」の3STEP
  • コツは「公式アイコンを指定」「具体的に伝える」「最後は自分で確認」

構成図づくりに時間をとられていた方こそ、効果を感じやすいはずです。まずは小さな構成から、気軽に試してみてくださいね。

次のステップ

この記事の構成図のように、GenUで作れることはまだまだあります。次は、自分の業務で作成する構成を1つ、AIに任せてみましょう。

11.参考サイト

しのテック
著者:しのテック
数年、オンプレ系のインフラエンジニアとして経験を積みました。これからクラウドエンジニアとして頑張っていきます。

エンジニア積極採用中!

クラウドセントリックでは、業務拡大に伴いエンジニアを積極採用中です。
一緒に働きたいと思った方は、採用フォームからぜひご応募ください。
MENU