drawio-mcpで紹介されている「MCP不要の作図代替案(Project Instructions)」を試してみた

以下のシンプルなAWS構成図を draw.io で作成してください。

ユーザー → CloudFront → ALB → EC2 (2台) → RDS (MySQL)

VPCの中にパブリックサブネット（ALB）とプライベートサブネット（EC2, RDS）を配置してください。

以下のAWS構成図を draw.io のXML形式で作成してください。

■ 構成
ユーザー → CloudFront → ALB → EC2 (2台) → RDS (MySQL)
VPC内にパブリックサブネット（ALB）とプライベートサブネット（EC2, RDS）を配置。

■ スタイル指定
- AWS 2024 (AWS 19) のアイコンセットを使用してください。draw.io の shape ライブラリから以下を使ってください:
  - CloudFront: shape=mxgraph.aws4.cloudfront
  - ALB: shape=mxgraph.aws4.application_load_balancer
  - EC2: shape=mxgraph.aws4.ec2
  - RDS: shape=mxgraph.aws4.rds
  - VPC: shape=mxgraph.aws4.vpc
  - ユーザー: shape=mxgraph.aws4.users
- ラベルは各アイコンの下に配置（verticalLabelPosition=bottom;verticalAlign=top）
- ラベルに白背景を付ける（labelBackgroundColor=#FFFFFF）
- アイコンサイズは幅60、高さ60
- 各要素間の間隔を十分に取り重ならないように（最低80px間隔）
- コンテナ（VPC、サブネット）はアイコンと重ならないよう十分な大きさに
- XML内の定義順：ラベルが矢印の上に描画されるようにする
  - つまり コンテナ → 矢印（edge） → アイコン（vertex）
- 接続される要素同士のX座標またはY座標を揃え、矢印の折れ線を最小化する

以下のサーバーレスWebアプリのAWS構成図を draw.io で作成してください。

- フロントエンド: CloudFront + S3 (静的ホスティング)
- 認証: Cognito
- API: API Gateway → Lambda
- データ: DynamoDB + S3 (ファイルストレージ)
- 監視: CloudWatch
- CI/CD: CodePipeline → CodeBuild

各サービス間の通信フローも矢印で示してください。

■ スタイル指定
- AWS 2024 (AWS 19) のアイコンセットを使用してください
- ラベルは各アイコンの下に配置（verticalLabelPosition=bottom;verticalAlign=top）
- ラベルに白背景を付ける（labelBackgroundColor=#FFFFFF）
- アイコンサイズは幅60、高さ60
- 各要素間の間隔を十分に取り重ならないように（最低80px間隔）
- コンテナ（VPC、サブネット）はアイコンと重ならないよう十分な大きさに
- XML内の定義順：ラベルが矢印の上に描画されるようにする
  - つまり コンテナ → 矢印（edge） → アイコン（vertex）
- 接続される要素同士のX座標またはY座標を揃え、矢印の折れ線を最小化する

GitHub Flow ベースの開発フローを draw.io で作成してください。

1. main ブランチから feature ブランチを作成
2. feature ブランチで開発・コミット
3. Push して Pull Request を作成
4. レビュアーがコードレビュー（Approve or Request Changes）
5. CI（GitHub Actions）が自動テスト実行
6. レビュー承認 + CI パス → main にマージ
7. main マージをトリガーに本番デプロイ

フローチャート形式で、分岐（レビュー指摘あり→修正に戻る）も含めてください。