graph TD
    プロジェクト[プロジェクト全体の管理]
    プロジェクト --> 計画[プロジェクトの計画段階]
    プロジェクト --> 開発[ソフトウェア開発フェーズ]
    プロジェクト --> テスト[ソフトウェアのテストフェーズ]
    プロジェクト --> デプロイ[製品のデプロイメントフェーズ]
    計画 --> 予算[必要な費用の計画]
    計画 --> スケジュール[プロジェクトのタイムライン]
    開発 --> アプリ開発[アプリケーションのコーディング]
    開発 --> データベース設計[データベースの設計]
    テスト --> 単体テスト[個々のコンポーネントのテスト]
    テスト --> 結合テスト[異なる部分の統合テスト]
    デプロイ --> 本番環境[最終製品のデプロイ]
    デプロイ --> ステージング環境[事前デプロイのテスト環境]

graph LR
    プロジェクト[プロジェクト全体の管理<br>全フェーズの調整]
    プロジェクト --> 計画[プロジェクトの<br>計画段階]
    プロジェクト --> 開発[ソフトウェア開発<br>フェーズ]
    プロジェクト --> テスト[ソフトウェアの<br>テストフェーズ]
    プロジェクト --> デプロイ[製品の<br>デプロイメントフェーズ]
    計画 --> 予算[必要な費用の<br>計画]
    計画 --> スケジュール[プロジェクトの<br>タイムライン]
    開発 --> アプリ開発[アプリケーションの<br>コーディング]
    開発 --> データベース設計[データベースの<br>設計]
    テスト --> 単体テスト[個々のコンポーネントの<br>テスト]
    テスト --> 結合テスト[異なる部分の<br>統合テスト]
    デプロイ --> 本番環境[最終製品の<br>デプロイ]
    デプロイ --> ステージング環境[事前デプロイの<br>テスト環境]

classDiagram
    プロジェクト -- 計画 : 包含
    プロジェクト -- 開発 : 包含
    プロジェクト -- テスト : 包含
    プロジェクト -- デプロイ : 包含
    class プロジェクト {
        +プロジェクト管理()
    }
    class 計画 {
        +予算計画()
        +スケジュール設定()
    }
    class 開発 {
        +アプリ開発()
        +データベース設計()
    }
    class テスト {
        +単体テスト()
        +結合テスト()
    }
    class デプロイ {
        +本番環境デプロイ()
        +ステージング環境設定()
    }

erDiagram
    プロジェクト {
        string 名称
        date 開始日
    }
    計画 {
        string 予算
        date スケジュール
    }
    開発 {
        string アプリ開発
        string データベース設計
    }
    プロジェクト ||--o{ 計画 : 計画を持つ
    プロジェクト ||--o{ 開発 : 開発を持つ

マーメイド（Mermaid）では、フローチャート以外にもサブグラフのようにグループ化を活用できる図があります。グループ化によって、複雑な要素を視覚的に整理しやすくなるため、特定の要素をまとめて表示したり、階層的な構造を表現するのに便利です。

以下は、マーメイドでサブグラフやグループ化が可能な図の一覧です。

1. フローチャート (Flowchart)

サブグラフを使用してフロー内でグループ化が可能です。複数のプロセスやステップをグループ化して整理することができます。

• 構文: flowchart

• 例:

  flowchart TB
      subgraph グループ1
          A --> B
      end
      subgraph グループ2
          C --> D
      end
      B --> C
  
  

2. シーケンス図 (Sequence Diagram)

シーケンス図では、グループ化の代わりに「ループ」や「オプション」、「並列」などのブロックを使って、プロセスの一部をまとめて表現することができます。

• 構文: sequenceDiagram

• グループ化構文: alt, opt, par, loop

• 例:

  sequenceDiagram
      participant Alice
      participant Bob
  
      Alice->>Bob: メッセージ
      alt 条件が真の場合
          Bob->>Alice: メッセージを返す
      end
  
  

3. ガントチャート (Gantt Chart)

ガントチャートでは、フェーズやタスクのグループ化を行うことができます。フェーズによってタスクを階層的に整理することが可能です。

• 構文: gantt

• グループ化: フェーズ（section）でタスクをグループ化

• 例:

  gantt
      title プロジェクトタイムライン
      section 設計フェーズ
      仕様策定: done, des1, 2023-10-01, 10d
      デザイン: des2, after des1, 5d
      section 実装フェーズ
      実装開始: dev1, 2023-10-15, 15d