Mermaidサブグラフ — グループ化とネスト図

Mermaidのサブグラフ

サブグラフを使うと、関連するノードをラベル付きのボックスにグループ化し、フローチャート内に視覚的なクラスタを作成できます。マイクロサービスシステム、ネットワークトポロジ、レイヤードアプリケーションなどの複雑なアーキテクチャのモデリングに不可欠です。

基本的なサブグラフ構文

flowchart TB
    subgraph Frontend
        A[React App] --> B[API Client]
    end
    subgraph Backend
        C[Express Server] --> D[PostgreSQL]
    end
    B --> C

各subgraph ... endブロックがラベル付きコンテナを作成します。ブロック内のノードは視覚的にグループ化され、エッジはサブグラフの境界を越えることができます。

サブグラフのラベルとID

サブグラフにIDとは異なる表示ラベルを付けることができます：

flowchart LR
    subgraph fe["Frontend Layer"]
        A[React] --> B[Redux]
    end
    subgraph be["Backend Layer"]
        C[Node.js] --> D[MongoDB]
    end
    fe --> be

ID（fe、be）をエッジ内のサブグラフ参照に使用し、括弧内のラベルを表示に使用します。

ネストされたサブグラフ

サブグラフは任意の深さでネストできます：

flowchart TB
    subgraph Cloud["AWS Cloud"]
        subgraph VPC["VPC 10.0.0.0/16"]
            subgraph PublicSubnet["Public Subnet"]
                ALB[Application Load Balancer]
            end
            subgraph PrivateSubnet["Private Subnet"]
                EC2[EC2 Instance]
                RDS[(RDS Database)]
            end
        end
    end
    User[User] --> ALB
    ALB --> EC2
    EC2 --> RDS

方向オーバーライド

各サブグラフは親とは独立した方向を持つことができます：

flowchart LR
    subgraph Pipeline["CI/CD Pipeline"]
        direction LR
        Build --> Test --> Deploy
    end
    subgraph Environments
        direction TB
        Dev --> Staging --> Prod
    end
    Deploy --> Dev

サブグラフのスタイリング

IDを使ってサブグラフにスタイルを適用します：

flowchart LR
    subgraph secure["Secure Zone"]
        A[Auth Service] --> B[User DB]
    end
    subgraph public["Public Zone"]
        C[API Gateway] --> D[CDN]
    end
    C --> A
    style secure fill:#dcfce7,stroke:#16a34a
    style public fill:#fef3c7,stroke:#f59e0b

ベストプラクティス

1. 論理的なグループ化にサブグラフを使用 — ネットワークゾーン、サービス、デプロイ環境。
2. ネストは2〜3レベルに制限 — 深いネストは読みにくくなります。
3. サブグラフに説明的な名前を付ける — 「Group 1」より「Payment Services」の方が良いです。
4. 方向オーバーライドは控えめに — 方向の混在はレイアウトエンジンを混乱させる可能性があります。