Handism's Tech Blog
ツール一覧に戻る

AWS Architecture Diagram Generator

フォーム操作だけで、境界線（VPCやサブネット）と主要AWSリソース、それらを結ぶネットワーク接続線をきれいに定義し、Mermaid.jsで美しい構成図を自動描画します。

リソースの追加

配置済みのリソース (0)

リソースがありません。上のフォームから追加してください。

図面設定

レンダリング方向

構成図プレビュー

構成要素がありません

左カラムからリソースやグループを追加するか、テンプレートをロードしてください。

生成された Mermaid コード

flowchart TD
  %% スタイルクラス定義
  classDef vpc fill:#f1f5f9,stroke:#3b82f6,stroke-width:2px,stroke-dasharray:0;
  classDef pubSubnet fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,stroke-dasharray:5 5;
  classDef privSubnet fill:#f0f9ff,stroke:#0ea5e9,stroke-width:2px,stroke-dasharray:5 5;
  classDef ecsCluster fill:#fff7ed,stroke:#f97316,stroke-width:2px,stroke-dasharray:0;
  classDef generalGroup fill:#fafafa,stroke:#a3a3a3,stroke-width:1px,stroke-dasharray:0;