Mermaid で AWS インフラ構成図をシンプルに表現するテクニック
インフラ構成図を作成する際、多くのエンジニアが直面する課題があります。複雑なツールの学習コスト、チーム内での共有の難しさ、そして何より「シンプルで分かりやすい図」を作る難しさです。
実は、この課題を解決する魔法のようなツールが存在します。それが Mermaid です。AWS インフラ構成図を、コードベースで管理でき、バージョン管理も簡単、そして何より美しくシンプルに表現できるのです。
この記事では、Mermaid を使って AWS インフラ構成図を効果的に表現するテクニックを、実践的な例と共に紹介します。複雑な構成も、シンプルで理解しやすい図に変換する方法を学んでいきましょう。
Mermaid とは
Mermaid は、テキストベースで図表を作成できる JavaScript ライブラリです。Markdown ファイル内に直接記述でき、GitHub や GitLab などのプラットフォームで自動的に図として表示されます。
Mermaid の特徴
- テキストベース: コードで図を管理できる
- バージョン管理対応: Git で差分を追跡可能
- 自動レイアウト: 手動でレイアウト調整が不要
- 多様な図表対応: フローチャート、シーケンス図、クラス図など
基本的な文法
Mermaid の図は、以下のような形式で記述します：
markdown```mermaid
graph TD
A[開始] --> B[処理]
B --> C[終了]
```
このシンプルな文法で、複雑な AWS インフラ構成も美しく表現できるのです。
AWS インフラ構成図の基本要素
AWS インフラ構成図を作成する際、押さえておくべき基本要素があります。これらを理解することで、より効果的な図を作成できるようになります。
主要な AWS サービスとその表現
AWS の主要サービスを Mermaid で表現する際の基本的なアプローチをご紹介します：
markdown```mermaid
graph TD
%% EC2 インスタンス
EC2[EC2 Instance<br/>Web Server]
%% RDS データベース
RDS[(RDS<br/>Database)]
%% S3 ストレージ
S3[(S3<br/>Storage)]
%% CloudFront CDN
CF[CloudFront<br/>CDN]
%% 接続関係
CF --> EC2
EC2 --> RDS
EC2 --> S3
```
このように、各サービスを明確に識別できる形で表現し、接続関係を示すことで、構成の全体像を把握しやすくなります。
ネットワーク要素の表現
ネットワーク要素は、インフラ構成の重要な部分です：
markdown```mermaid
graph TD
%% インターネット
Internet[Internet]
%% VPC
VPC[VPC]
%% パブリックサブネット
PublicSubnet[Public Subnet]
%% プライベートサブネット
PrivateSubnet[Private Subnet]
%% 接続関係
Internet --> VPC
VPC --> PublicSubnet
VPC --> PrivateSubnet
```
セキュリティ要素の表現
セキュリティは AWS インフラの重要な要素です：
markdown```mermaid
graph TD
%% セキュリティグループ
SG[Security Group<br/>Port 80, 443]
%% IAM ロール
IAM[IAM Role<br/>EC2-S3-Access]
%% WAF
WAF[WAF<br/>Web Application Firewall]
%% 接続関係
WAF --> SG
SG --> IAM
```
シンプルな構成図の作成手順
効果的な AWS インフラ構成図を作成するための手順を、段階的に説明します。
ステップ 1: 要件の整理
まず、表現したい構成の要件を整理します：
- 対象サービス: どの AWS サービスを使用するか
- 接続関係: サービス間の依存関係
- ネットワーク構成: VPC、サブネットの配置
- セキュリティ要件: セキュリティグループ、IAM など
ステップ 2: 基本構造の設計
要件に基づいて、基本構造を設計します：
markdown```mermaid
graph TD
%% 外部要素
User[User]
Internet[Internet]
%% AWS サービス
ALB[Application Load Balancer]
EC2[EC2 Instance]
RDS[(RDS Database)]
%% 接続関係
User --> Internet
Internet --> ALB
ALB --> EC2
EC2 --> RDS
```
ステップ 3: 詳細要素の追加
基本構造に、詳細な要素を追加していきます：
markdown```mermaid
graph TD
%% 外部要素
User[User]
Internet[Internet]
%% AWS サービス
ALB[Application Load Balancer<br/>Port 80/443]
EC2[EC2 Instance<br/>t3.micro]
RDS[(RDS Database<br/>MySQL 8.0)]
%% セキュリティ要素
SG_ALB[Security Group<br/>ALB-SG]
SG_EC2[Security Group<br/>EC2-SG]
SG_RDS[Security Group<br/>RDS-SG]
%% 接続関係
User --> Internet
Internet --> ALB
ALB --> EC2
EC2 --> RDS
%% セキュリティグループの適用
ALB -.-> SG_ALB
EC2 -.-> SG_EC2
RDS -.-> SG_RDS
```
基本的な AWS サービスアイコンの表現
AWS サービスを視覚的に分かりやすく表現するためのテクニックをご紹介します。
コンピューティングサービス
EC2、Lambda、ECS などのコンピューティングサービスを表現する方法です：
markdown```mermaid
graph TD
%% EC2 インスタンス
EC2[🖥️ EC2 Instance<br/>Web Server]
%% Lambda 関数
Lambda[⚡ Lambda Function<br/>API Handler]
%% ECS コンテナ
ECS[📦 ECS Container<br/>Microservice]
%% 接続関係
EC2 --> Lambda
Lambda --> ECS
```
ストレージサービス
S3、EBS、EFS などのストレージサービスを表現します：
markdown```mermaid
graph TD
%% S3 バケット
S3[(🗂️ S3 Bucket<br/>Static Files)]
%% EBS ボリューム
EBS[(💾 EBS Volume<br/>Persistent Storage)]
%% EFS ファイルシステム
EFS[(📁 EFS<br/>Shared Storage)]
%% 接続関係
S3 --> EBS
EBS --> EFS
```
データベースサービス
RDS、DynamoDB、ElastiCache などのデータベースサービスを表現します：
markdown```mermaid
graph TD
%% RDS インスタンス
RDS[(🗄️ RDS<br/>MySQL Database)]
%% DynamoDB テーブル
DynamoDB[(📊 DynamoDB<br/>NoSQL Database)]
%% ElastiCache クラスター
ElastiCache[(⚡ ElastiCache<br/>Redis Cluster)]
%% 接続関係
RDS --> DynamoDB
DynamoDB --> ElastiCache
```
ネットワーク構成の表現
AWS のネットワーク構成を効果的に表現するテクニックをご紹介します。
VPC とサブネットの表現
VPC とサブネットの階層構造を表現する方法です：
markdown```mermaid
graph TD
%% VPC
VPC[VPC<br/>10.0.0.0/16]
%% パブリックサブネット
PublicSubnet1[Public Subnet 1<br/>10.0.1.0/24<br/>AZ: us-east-1a]
PublicSubnet2[Public Subnet 2<br/>10.0.2.0/24<br/>AZ: us-east-1b]
%% プライベートサブネット
PrivateSubnet1[Private Subnet 1<br/>10.0.3.0/24<br/>AZ: us-east-1a]
PrivateSubnet2[Private Subnet 2<br/>10.0.4.0/24<br/>AZ: us-east-1b]
%% 接続関係
VPC --> PublicSubnet1
VPC --> PublicSubnet2
VPC --> PrivateSubnet1
VPC --> PrivateSubnet2
```
ルーティングテーブルの表現
ルーティングテーブルとインターネットゲートウェイの関係を表現します：
markdown```mermaid
graph TD
%% インターネットゲートウェイ
IGW[Internet Gateway]
%% NAT ゲートウェイ
NAT[NAT Gateway]
%% ルーティングテーブル
RT_Public[Route Table<br/>Public]
RT_Private[Route Table<br/>Private]
%% 接続関係
IGW --> RT_Public
NAT --> RT_Private
RT_Public --> RT_Private
```
セキュリティ要素の表現
AWS のセキュリティ要素を効果的に表現するテクニックをご紹介します。
セキュリティグループの表現
セキュリティグループとその設定を表現する方法です：
markdown```mermaid
graph TD
%% セキュリティグループ
SG_Web[Security Group<br/>Web-SG<br/>Port: 80, 443]
SG_App[Security Group<br/>App-SG<br/>Port: 8080]
SG_DB[Security Group<br/>DB-SG<br/>Port: 3306]
%% 接続関係
SG_Web --> SG_App
SG_App --> SG_DB
%% ルールの詳細
SG_Web -.-> |"Inbound: 0.0.0.0/0"| SG_App
SG_App -.-> |"Inbound: Web-SG"| SG_DB
```
IAM ロールとポリシーの表現
IAM ロールとポリシーの関係を表現します：
markdown```mermaid
graph TD
%% IAM ロール
Role_EC2[IAM Role<br/>EC2-Role]
Role_Lambda[IAM Role<br/>Lambda-Role]
%% IAM ポリシー
Policy_S3[IAM Policy<br/>S3-Read-Policy]
Policy_DynamoDB[IAM Policy<br/>DynamoDB-Write-Policy]
%% 接続関係
Role_EC2 --> Policy_S3
Role_Lambda --> Policy_DynamoDB
Role_Lambda --> Policy_S3
```
実践例：Web アプリケーションの構成図
実際の Web アプリケーション構成を例に、Mermaid での表現方法をご紹介します。
単純な 3 層構成
基本的な 3 層構成（Web、アプリケーション、データベース）を表現します：
markdown```mermaid
graph TD
%% 外部要素
User[👤 User]
Internet[🌐 Internet]
%% ロードバランサー
ALB[⚖️ Application Load Balancer<br/>Port 80/443]
%% Web サーバー
Web1[🖥️ Web Server 1<br/>EC2 t3.micro]
Web2[🖥️ Web Server 2<br/>EC2 t3.micro]
%% アプリケーションサーバー
App1[⚙️ App Server 1<br/>EC2 t3.small]
App2[⚙️ App Server 2<br/>EC2 t3.small]
%% データベース
RDS[(🗄️ RDS MySQL<br/>db.t3.micro)]
%% 接続関係
User --> Internet
Internet --> ALB
ALB --> Web1
ALB --> Web2
Web1 --> App1
Web2 --> App2
App1 --> RDS
App2 --> RDS
```
マイクロサービス構成
マイクロサービスアーキテクチャを表現する方法です：
markdown```mermaid
graph TD
%% API Gateway
API[🚪 API Gateway]
%% マイクロサービス
Auth[🔐 Auth Service<br/>Lambda]
User[👤 User Service<br/>ECS]
Product[📦 Product Service<br/>ECS]
Order[🛒 Order Service<br/>ECS]
%% データストア
DynamoDB[(📊 DynamoDB<br/>User/Product Data)]
RDS[(🗄️ RDS<br/>Order Data)]
%% 接続関係
API --> Auth
API --> User
API --> Product
API --> Order
User --> DynamoDB
Product --> DynamoDB
Order --> RDS
Auth --> DynamoDB
```
サーバーレス構成
サーバーレスアーキテクチャを表現する方法です：
markdown```mermaid
graph TD
%% 外部要素
User[👤 User]
%% フロントエンド
S3[(🗂️ S3<br/>Static Website)]
CloudFront[🌍 CloudFront<br/>CDN]
%% サーバーレスサービス
API[🚪 API Gateway]
Lambda1[⚡ Lambda Function 1<br/>User Management]
Lambda2[⚡ Lambda Function 2<br/>Data Processing]
%% データストア
DynamoDB[(📊 DynamoDB<br/>User Data)]
S3_Data[(🗂️ S3<br/>Processed Data)]
%% 接続関係
User --> CloudFront
CloudFront --> S3
User --> API
API --> Lambda1
API --> Lambda2
Lambda1 --> DynamoDB
Lambda2 --> S3_Data
```
高度なテクニック
より複雑な AWS 構成を表現するための高度なテクニックをご紹介します。
サブネットの表現
複数のアベイラビリティゾーンにまたがるサブネット構成を表現します：
markdown```mermaid
graph TD
%% VPC
VPC[VPC<br/>10.0.0.0/16]
%% AZ 1
AZ1[Availability Zone 1<br/>us-east-1a]
Public1[Public Subnet 1<br/>10.0.1.0/24]
Private1[Private Subnet 1<br/>10.0.3.0/24]
%% AZ 2
AZ2[Availability Zone 2<br/>us-east-1b]
Public2[Public Subnet 2<br/>10.0.2.0/24]
Private2[Private Subnet 2<br/>10.0.4.0/24]
%% 接続関係
VPC --> AZ1
VPC --> AZ2
AZ1 --> Public1
AZ1 --> Private1
AZ2 --> Public2
AZ2 --> Private2
```
ロードバランサーの表現
Application Load Balancer と Network Load Balancer の詳細な構成を表現します：
markdown```mermaid
graph TD
%% ロードバランサー
ALB[Application Load Balancer<br/>Port 80/443]
%% ターゲットグループ
TG_Web[Target Group<br/>Web-Servers<br/>Port 80]
TG_App[Target Group<br/>App-Servers<br/>Port 8080]
%% インスタンス
Web1[Web Server 1<br/>10.0.1.10]
Web2[Web Server 2<br/>10.0.2.10]
App1[App Server 1<br/>10.0.3.10]
App2[App Server 2<br/>10.0.4.10]
%% 接続関係
ALB --> TG_Web
ALB --> TG_App
TG_Web --> Web1
TG_Web --> Web2
TG_App --> App1
TG_App --> App2
```
データベースクラスタの表現
RDS マルチ AZ 構成や Aurora クラスターを表現する方法です：
markdown```mermaid
graph TD
%% Aurora クラスター
Aurora[Aurora Cluster<br/>Writer Endpoint]
%% インスタンス
Writer[Writer Instance<br/>db.r5.large]
Reader1[Reader Instance 1<br/>db.r5.large]
Reader2[Reader Instance 2<br/>db.r5.large]
%% 接続関係
Aurora --> Writer
Aurora --> Reader1
Aurora --> Reader2
%% 読み取り専用エンドポイント
ReaderEndpoint[Reader Endpoint<br/>Read Replicas]
ReaderEndpoint --> Reader1
ReaderEndpoint --> Reader2
```
よくある問題と解決策
Mermaid で AWS インフラ構成図を作成する際によく遭遇する問題とその解決策をご紹介します。
問題 1: 図が複雑になりすぎる
症状: 図が複雑で理解しにくくなる
解決策: 階層化とグループ化を活用する
markdown```mermaid
graph TD
%% サブグラフを使用してグループ化
subgraph "Public Layer"
ALB[Application Load Balancer]
end
subgraph "Application Layer"
EC2_1[EC2 Instance 1]
EC2_2[EC2 Instance 2]
end
subgraph "Data Layer"
RDS[(RDS Database)]
end
%% 接続関係
ALB --> EC2_1
ALB --> EC2_2
EC2_1 --> RDS
EC2_2 --> RDS
```
問題 2: エラー: "Parse error on line X"
症状: Mermaid の構文エラーが発生する
解決策: 基本的な構文チェックを行う
よくあるエラーパターン：
mermaidgraph TD
A[Node A] --> B[Node B]
B --> C[Node C]
C --> A %% 循環参照は注意が必要
修正例:
markdown```mermaid
graph TD
A[Node A] --> B[Node B]
B --> C[Node C]
%% 循環参照を避けるため、明確な方向性を持つ
C --> D[Node D]
```
問題 3: レイアウトが期待通りにならない
症状: 自動レイアウトが期待した配置にならない
解決策: 方向指定とスタイルを活用する
markdown```mermaid
graph LR %% 左から右への方向指定
%% スタイルを適用
classDef awsService fill:#FF9900,stroke:#232F3E,stroke-width:2px,color:#fff
classDef database fill:#3F8624,stroke:#232F3E,stroke-width:2px,color:#fff
%% ノード定義
ALB[Application Load Balancer]
EC2[EC2 Instance]
RDS[(RDS Database)]
%% 接続関係
ALB --> EC2
EC2 --> RDS
%% スタイル適用
class ALB,EC2 awsService
class RDS database
```
問題 4: 大きな図の管理が困難
症状: 図が大きくなりすぎて管理しにくくなる
解決策: モジュール化と分割を活用する
アプローチ 1: 機能別分割
markdown```mermaid
graph TD
%% ネットワーク層
subgraph "Network Layer"
VPC[VPC]
IGW[Internet Gateway]
end
%% アプリケーション層
subgraph "Application Layer"
ALB[Load Balancer]
EC2[EC2 Instances]
end
%% データ層
subgraph "Data Layer"
RDS[(RDS)]
S3[(S3)]
end
%% 接続関係
VPC --> IGW
IGW --> ALB
ALB --> EC2
EC2 --> RDS
EC2 --> S3
```
まとめ
Mermaid を使って AWS インフラ構成図をシンプルに表現するテクニックについて、実践的な例と共にご紹介しました。
重要なポイント
- シンプルさを保つ: 複雑な構成も、基本要素に分解して表現する
- 視覚的な分かりやすさ: アイコンや色を効果的に活用する
- 階層構造の活用: サブグラフを使って論理的なグループ化を行う
- エラーハンドリング: 構文エラーを避けるためのベストプラクティスを守る
実践のコツ
- 最初はシンプルな構成から始めて、段階的に詳細を追加する
- チーム内で統一された命名規則を決める
- バージョン管理を活用して、構成の変更履歴を追跡する
- 定期的に図を見直し、不要な要素を削除してシンプルさを保つ
Mermaid を使うことで、AWS インフラ構成図が単なる図表ではなく、コードとして管理できる資産になります。これにより、インフラの変更履歴が追跡可能になり、チーム内での共有も格段に簡単になります。
複雑な AWS 構成も、Mermaid の力でシンプルで美しい図に変換できることを、ぜひ実践で体験してみてください。きっと、インフラ設計の新しい可能性を発見できるはずです。
関連リンク
review今の自分に満足していますか？『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
reviewついに語られた業界の裏側！『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
review愛する勇気を持てば人生が変わる！『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
review週末を変えれば年収も変わる！『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
review新しい自分に会いに行こう！『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
review科学革命から AI 時代へ！『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来