# 画面遷移図

本ドキュメントは、Fizzyアプリケーションの画面遷移をMermaid形式で記述したものです。

## 全体概要

```mermaid
flowchart TB
    subgraph 認証
        Login[ログイン画面]
        Signup[サインアップ画面]
        SignupComplete[サインアップ完了画面]
        MagicLink[マジックリンク送信完了画面]
        SessionTransfer[セッション転送画面]
        JoinCode[参加コード入力画面]
        JoinCodeInactive[参加コード無効画面]
    end

    subgraph ホーム
        Home[アクティビティ一覧画面]
        DayActivity[日別アクティビティ画面]
    end

    subgraph ボード
        BoardList[ボード詳細画面]
        BoardNew[ボード新規作成画面]
        BoardEdit[ボード設定画面]
        BoardColumn[ボードカラム詳細画面]
        BoardStream[ストリームカラム画面]
        BoardNotNow[Not Nowカラム画面]
        BoardClosed[クローズドカラム画面]
    end

    subgraph カード
        CardList[カード一覧画面]
        CardDetail[カード詳細画面]
        CardEdit[カード編集画面]
        CardDraft[カード下書き画面]
        CardAssign[カードアサイン画面]
        CardBoard[カードボード変更画面]
        CardColumn[カードカラム変更画面]
        CardTag[カードタグ付け画面]
        CardStep[カードステップ詳細画面]
        CardStepEdit[カードステップ編集画面]
        CardComment[カードコメント詳細画面]
        CardCommentEdit[カードコメント編集画面]
    end

    subgraph 検索通知
        Search[検索画面]
        Notifications[通知一覧画面]
        NotificationSettings[通知設定画面]
    end

    subgraph ユーザー
        UserProfile[ユーザープロフィール画面]
        UserEdit[プロフィール編集画面]
        UserActivity[ユーザーアクティビティ画面]
    end

    subgraph マイページ
        MyMenu[マイメニュー画面]
        MyPins[ピン一覧画面]
        AccessTokens[アクセストークン一覧画面]
    end

    subgraph アカウント
        AccountSettings[アカウント設定画面]
        AccountExport[エクスポート状況画面]
        AccountImport[インポート画面]
        AccountJoinCode[参加コード表示画面]
    end

    subgraph 公開
        PublicBoard[公開ボード詳細画面]
        PublicCard[公開カード詳細画面]
    end

    subgraph Webhook
        WebhookList[Webhook一覧画面]
        WebhookNew[Webhook新規作成画面]
        WebhookDetail[Webhook詳細画面]
        WebhookEdit[Webhook編集画面]
    end
```

## 認証フロー

```mermaid
flowchart TD
    Start((開始)) --> Login[ログイン画面]
    Start --> Signup[サインアップ画面]
    Start --> JoinCode[参加コード入力画面]

    Login -->|メールアドレス入力| MagicLink[マジックリンク送信完了画面]
    Login -->|新規登録リンク| Signup
    MagicLink -->|メール内リンク| Home[アクティビティ一覧画面]

    Signup -->|メールアドレス入力| SignupComplete[サインアップ完了画面]
    SignupComplete -->|確認| Home

    JoinCode -->|有効なコード| Home
    JoinCode -->|無効なコード| JoinCodeInactive[参加コード無効画面]

    SessionTransfer[セッション転送画面] --> Home
```

## メイン画面遷移

```mermaid
flowchart TD
    Home[アクティビティ一覧画面] --> BoardList[ボード詳細画面]
    Home --> CardList[カード一覧画面]
    Home --> Search[検索画面]
    Home --> Notifications[通知一覧画面]
    Home --> MyMenu[マイメニュー画面]
    Home --> DayActivity[日別アクティビティ画面]

    MyMenu --> UserProfile[ユーザープロフィール画面]
    MyMenu --> MyPins[ピン一覧画面]
    MyMenu --> AccountSettings[アカウント設定画面]
    MyMenu --> NotificationSettings[通知設定画面]
    MyMenu --> BoardList
    MyMenu --> CardList

    UserProfile --> UserEdit[プロフィール編集画面]
    UserProfile --> UserActivity[ユーザーアクティビティ画面]
    UserProfile --> AccessTokens[アクセストークン一覧画面]

    AccountSettings --> AccountExport[エクスポート状況画面]
    AccountSettings --> AccountImport[インポート画面]
    AccountSettings --> AccountJoinCode[参加コード表示画面]
```

## ボード関連遷移

```mermaid
flowchart TD
    Home[アクティビティ一覧画面] --> BoardNew[ボード新規作成画面]
    BoardNew -->|作成| BoardList[ボード詳細画面]

    BoardList --> BoardEdit[ボード設定画面]
    BoardList --> BoardColumn[ボードカラム詳細画面]
    BoardList --> BoardStream[ストリームカラム画面]
    BoardList --> BoardNotNow[Not Nowカラム画面]
    BoardList --> BoardClosed[クローズドカラム画面]
    BoardList --> CardDetail[カード詳細画面]
    BoardList --> WebhookList[Webhook一覧画面]

    BoardEdit -->|保存| BoardList
    BoardEdit -->|キャンセル| BoardList

    BoardColumn --> CardDetail
    BoardStream --> CardDetail
    BoardNotNow --> CardDetail
    BoardClosed --> CardDetail

    WebhookList --> WebhookNew[Webhook新規作成画面]
    WebhookList --> WebhookDetail[Webhook詳細画面]
    WebhookNew -->|作成| WebhookList
    WebhookDetail --> WebhookEdit[Webhook編集画面]
    WebhookEdit -->|保存| WebhookDetail
```

## カード関連遷移

```mermaid
flowchart TD
    BoardList[ボード詳細画面] --> CardDetail[カード詳細画面]
    CardList[カード一覧画面] --> CardDetail
    Search[検索画面] --> CardDetail
    MyPins[ピン一覧画面] --> CardDetail

    CardDetail --> CardEdit[カード編集画面]
    CardDetail --> CardAssign[カードアサイン画面]
    CardDetail --> CardBoard[カードボード変更画面]
    CardDetail --> CardColumn[カードカラム変更画面]
    CardDetail --> CardTag[カードタグ付け画面]
    CardDetail --> CardStep[カードステップ詳細画面]
    CardDetail --> CardComment[カードコメント詳細画面]
    CardDetail --> CardDraft[カード下書き画面]

    CardEdit -->|保存| CardDetail
    CardAssign -->|アサイン| CardDetail
    CardBoard -->|変更| CardDetail
    CardColumn -->|変更| CardDetail
    CardTag -->|タグ付け| CardDetail

    CardStep --> CardStepEdit[カードステップ編集画面]
    CardStepEdit -->|保存| CardDetail

    CardComment --> CardCommentEdit[カードコメント編集画面]
    CardCommentEdit -->|保存| CardDetail
```

## 通知関連遷移

```mermaid
flowchart TD
    Home[アクティビティ一覧画面] --> NotificationTray[通知トレイ画面]
    NotificationTray --> Notifications[通知一覧画面]
    NotificationTray --> CardDetail[カード詳細画面]

    Notifications --> CardDetail
    Notifications --> NotificationSettings[通知設定画面]

    NotificationSettings --> NotificationUnsubscribe[通知解除画面]
    NotificationUnsubscribe --> NotificationUnsubscribeComplete[通知解除完了画面]
```

## 公開画面遷移

```mermaid
flowchart TD
    External((外部リンク)) --> PublicBoard[公開ボード詳細画面]
    External --> PublicCard[公開カード詳細画面]

    PublicBoard --> PublicBoardColumn[公開ボードカラム画面]
    PublicBoard --> PublicBoardStream[公開ボードストリーム画面]
    PublicBoard --> PublicBoardNotNow[公開ボードNot Now画面]
    PublicBoard --> PublicBoardClosed[公開ボードクローズド画面]
    PublicBoard --> PublicCard

    PublicBoardColumn --> PublicCard
    PublicBoardStream --> PublicCard
    PublicBoardNotNow --> PublicCard
    PublicBoardClosed --> PublicCard
```

## ユーザー管理遷移

```mermaid
flowchart TD
    UserProfile[ユーザープロフィール画面] --> UserEdit[プロフィール編集画面]
    UserProfile --> UserActivity[ユーザーアクティビティ画面]
    UserProfile --> AccessTokens[アクセストークン一覧画面]
    UserProfile --> DataExport[データエクスポート画面]

    UserEdit --> EmailAdd[メールアドレス追加画面]
    EmailAdd --> EmailAddComplete[メールアドレス追加完了画面]
    EmailAddComplete --> EmailConfirm[メールアドレス確認画面]

    AccessTokens --> AccessTokenNew[アクセストークン新規作成画面]
    AccessTokenNew -->|生成| AccessTokenDetail[アクセストークン詳細画面]
    AccessTokenDetail --> AccessTokens
```

## 凡例

| 記号 | 意味 |
|------|------|
| 四角形 | 画面 |
| 丸形 | 開始/終了点 |
| 矢印 | 遷移方向 |
| サブグラフ | 機能グループ |
