AI感のないAWS構成図をAIエージェントに描かせたい！

JAWS-UG 栃木 オフライン#10 -秋の登壇祭り-｜2026年9月26日
https://jawsug-tochigi.connpass.com/event/406770/

Transcript

1. AI感のないAWS構成図を AIエージェントに描かせたい！ さご（@sagochiko） JAWS-UG 栃木 オフライン#10 -秋の登壇祭り-｜2026年9月26日
2. 自己紹介 さご（@sagochiko） AWS の提案・設計・構築・運用・技術支援 エンジニア3年目、元地方公務員 初登壇です！！ 食べること飲むことが好きです！ 2
3. 今日の昼ご飯 煮干中華蕎麦「F」（栃木県小山市駅東通り2丁目34-9） Journeyman さんの note で見つけました 3
4. AIエージェントに コード書かせてますか？
5. AIエージェントに 構成図描かせてますか？
6. こんなの出てきませんでしたか？ これじゃ自分で描いたほうがいいや… 6
7. AI感のある構成図の特徴 角が丸いアイコンや枠 頼んでない番号が付く 過剰な説明や枠外の解説文 線と文字・アイコンが重なる 構成図の好みは人それぞれ。 今日の話は自分の好みです 7
8. コードは書けるのに どうして構成図はうまく描けないの？
9. 公式の MCP/Skill ツール Diagram MCP Server（MCP、非推奨） aws-architecture-diagram（Skill） MCP Tool Server（MCP） Claude Code プラグイン（Skill） 提供元 AWS AWS draw.io draw.io 出力形式 PNGのみ .drawio、PNG、SVG、PDF URL、.drawio .drawio、PNG、SVG、PDF この4つ + Claude Code だけ（MCP・Skillなし）の 5パターンで比べてみました 9
10. 見た目の指示はせずに作成させてみる 5パターンすべてにこの指示を渡したところ... 以下のAWS構成の構成図を作ってください。 - CloudFront の背後に ALB を置く - ALB のターゲットは ECS Fargate のサービスで、2つのAZに分散する - データベースは Aurora MySQL、Writer 1台と Reader 1台を2つのAZに分ける - 静的ファイルは S3 に置き、CloudFront から配信する - ログとメトリクスは CloudWatch に集約する - VPC は 2AZ 構成で、各AZにパブリックサブネットとプライベートサブネットを持つ - ALB はパブリックサブネット、ECS と Aurora はプライベートサブネットに置く - 各AZのパブリックサブネットに NAT Gateway を置き、ECS からの外向き通信を通す - ラベルは日本語で書く。ただし AWS のサービス名は英語のままにする - 図は draw.io の XML 形式で、out/ 配下にファイルとして保存する AWS Diagram MCP Server だけは、最後の行を「PNG 形式で保存する」に変えて渡した 10
11. 頼んでない番号が付く aws-architecture-diagram スキル 11
12. 頼んでない説明文が入る draw.io MCP Tool Server 12
13. 線と文字が重なる draw.io Claude Code プラグイン 13
14. S3 がオレンジ！？ Claude Code だけ（MCP・Skillなし） 14
15. どれもなんとなく AI感ありませんか？ （ぱっと見きれいではありますが）
16. 見た目で決めてないことは AI 任せ 利用者は上？横？ 文字と線は重なってもいい？ 毎回同じ見た目で描いてくれるとは限らない 16
17. じゃあ、見た目も たくさん指示してみよう
18. 気になったところに指示を足していく 気になったところ 文字に線が重なった アイコンを使わず四角（色付き）で描いた 線のラベルまで消えた 補足と色分けまで消えた 足した指示 線とラベルを重ねない AWS公式のアイコンを使う 線のラベルは入れてよい 短い補足は入れてよい 18
19. 良くなってきた気がする！ Claude Code だけのバージョンの比較（左が最初の構成だけの指示・右が指示を足した後） 19
20. 生成するたびにちょっと違和感 さらに指示を追加！ 気になったところ サブネットの中に AZ が入っていた AZ を A、C と名付けた 利用者の位置がバラバラ Aurora がインスタンスのアイコンになった ラベルの位置が図ごとに違う 線の出る位置が毎回違う 足した指示 パブリックを上、プライベートを下 AZ を正式名称で書く 利用者を図の上端に置く サービス単位のアイコンを使う ラベルはアイコンの下に置く 辺の中央から線を出す 20
21. 全部の指示をいれたものを比較
22. 整理されたけど線はくねくねのまま AWS Diagram MCP Server。PNG しか出ないので手で直せない 22
23. 数字や説明パネルは消えたけどアイコンは小さい aws-architecture-diagram。CloudWatch の線が無く、NAT が VPC アイコン 23
24. タイトルや補足が消えて整った！ draw.io MCP Tool Server。NAT Gateway だけ VPC のアイコン 24
25. 利用者が上に来て線もすっきり draw.io Claude Code プラグイン 25
26. S3も緑に！ツールなくても十分きれい！ Claude Code だけ 26
27. 複数回描かせてみた パターン AWS Diagram MCP Server aws-architecture-diagram draw.io MCP Tool Server draw.io プラグイン Claude Code だけ 複数回の差 毎回けっこう変わる ちょこちょこ変わる ほぼ同じ（NAT Gateway のアイコンが毎回違う） ほぼ同じ（S3 の位置が変わる） ほぼ同じ 27
28. 結局、どのツールがいいの？
29. ツールより指示の差のほうが大きい どのパターンも指示を足したら最初よりかなり良くなった 良かったのは draw.io の2つと Claude Code（Skill,MCPなし） 指示が足りないと余計なものが付く・質が悪くなるのは コーディングと同じ 29
30. 最終的な指示 毎回指示を頑張ればきれいな構成図が作れるぞ！！ 以下のAWS構成の構成図を作ってください。 - CloudFront の背後に ALB を置く - ALB のターゲットは ECS Fargate のサービスで、2つのAZに分散する - データベースは Aurora MySQL、Writer 1台と Reader 1台を2つのAZに分ける - 静的ファイルは S3 に置き、CloudFront から配信する - ログとメトリクスは CloudWatch に集約する - VPC は 2AZ 構成で、各AZにパブリックサブネットとプライベートサブネットを持つ - アベイラビリティゾーンの名前は正式名称で書く。「A」「B」のような略記にしない - ALB はパブリックサブネット、ECS と Aurora はプライベートサブネットに置く - 利用者は図の上端に置く - 各AZの中は、パブリックサブネットを上、プライベートサブネットを下に置く - 各AZのパブリックサブネットに NAT Gateway を置き、ECS からの外向き通信を通す - AWS 公式のアイコンを必ず使う。四角や丸で代用しない。サービス単位のアイコンを使い、インスタンスなど個別リソースのアイコンは使わない - ラベルは日本語で書く。ただし AWS のサービス名は英語のままにする - アイコンのラベルはアイコンの下に置く - アイコンやラベルの文字に線を重ねない。ラベルの下から線を出すのはかまわない。線どうしを重ねない。交差するのはかまわない - 線はできるだけアイコンの辺の中央から出す - 図の外にタイトル、凡例、説明パネルを置かない。線のラベルや、要素に付く短い補足は入れてよい - 図は draw.io の XML 形式で、out/ 配下にファイルとして保存する 30
31. …でも毎回この長い指示書くの めんどくさくない？
32. Skill を作りました！！ 構成を伝えるだけで良さげな構成図が作成できます！ 32
33. 長い指示なしで作れます！ 最初と同じ構成を伝えただけ（左が Skill なし・右が Skill あり（自作Skill）） 33
34. Skill を使ってみて 感想を教えてください！ Skill（GitHub） aws-drawio-diagram-skill X @sagochiko