# Wikipedia iOS 画面遷移図

## 概要

本ドキュメントはWikipedia iOSアプリの画面遷移関係をmermaid形式で図示したものです。

## 全体構成図

```mermaid
flowchart TB
    subgraph AppRoot[アプリルート]
        SplashScreen[SplashScreen画面]
        WMFAppVC[WMFAppViewController]
    end

    subgraph Onboarding[オンボーディング]
        Welcome[Welcome画面]
        WelcomePage[WelcomePage画面]
        WelcomeContainer[WelcomeContainer画面]
        WelcomeIntro[WelcomeIntroduction画面]
        WelcomeInitial[WelcomeInitial画面]
        WelcomePanel[WelcomePanel画面]
        WelcomeAnim[WelcomeAnimation画面]
    end

    subgraph MainTabs[メインタブ]
        Explore[Explore画面]
        Places[Places画面]
        Saved[Saved画面]
        Search[Search画面]
    end

    SplashScreen --> WMFAppVC
    WMFAppVC --> |初回起動| Welcome
    Welcome --> WelcomeContainer
    WelcomeContainer --> WelcomePage
    WelcomePage --> WelcomeIntro
    WelcomePage --> WelcomePanel
    WelcomePage --> WelcomeAnim
    WelcomeContainer --> WelcomeInitial
    Welcome --> |完了| MainTabs
    WMFAppVC --> |通常起動| MainTabs
```

## メインタブからの遷移

```mermaid
flowchart TB
    subgraph MainTabs[メインタブ]
        Explore[Explore画面]
        Places[Places画面]
        Saved[Saved画面]
        Search[Search画面]
    end

    subgraph ExploreFlow[Explore関連]
        News[News画面]
        OnThisDay[OnThisDay画面]
        ExploreFeedSettings[ExploreFeedSettings画面]
        FeedCardSettings[FeedCardSettings画面]
    end

    subgraph SavedFlow[Saved関連]
        ReadingLists[ReadingLists画面]
        SavedArticles[SavedArticlesCollection画面]
        ReadingListDetail[ReadingListDetail画面]
        CreateReadingList[CreateReadingList画面]
    end

    subgraph PlacesFlow[Places関連]
        ArticlePopover[ArticlePopover画面]
    end

    subgraph SearchFlow[Search関連]
        SearchResults[SearchResults画面]
        SearchSettings[SearchSettings画面]
    end

    Explore --> News
    Explore --> OnThisDay
    Explore --> ExploreFeedSettings
    ExploreFeedSettings --> FeedCardSettings
    Explore --> Search

    Places --> ArticlePopover
    Places --> Search

    Saved --> ReadingLists
    Saved --> SavedArticles
    ReadingLists --> ReadingListDetail
    ReadingLists --> CreateReadingList
    Saved --> Search

    Search --> SearchResults
    Search --> SearchSettings
```

## 記事閲覧フロー

```mermaid
flowchart TB
    subgraph ArticleViewing[記事閲覧]
        Article[Article画面]
        ArticlePeek[ArticlePeekPreview画面]
        TableOfContents[TableOfContents画面]
        Reference[Reference画面]
        ReferenceBackLinks[ReferenceBackLinks画面]
    end

    subgraph ArticleActions[記事アクション]
        Share[Share画面]
        ShareAFact[ShareAFact画面]
        ReadingThemes[ReadingThemesControls画面]
    end

    subgraph PageHistory[ページ履歴]
        PageHistoryVC[PageHistory画面]
        PageHistoryCounts[PageHistoryCounts画面]
        DiffContainer[DiffContainer画面]
        DiffList[DiffList画面]
    end

    subgraph TalkPageFlow[トークページ]
        TalkPage[TalkPage画面]
        TalkPageCoffeeRoll[TalkPageCoffeeRoll画面]
    end

    subgraph Disambiguation[曖昧さ回避]
        DisambiguationPages[DisambiguationPages画面]
    end

    Article --> TableOfContents
    Article --> Reference
    Reference --> ReferenceBackLinks
    Article --> Share
    Article --> ShareAFact
    Article --> ReadingThemes
    Article --> PageHistoryVC
    PageHistoryVC --> PageHistoryCounts
    PageHistoryVC --> DiffContainer
    DiffContainer --> DiffList
    Article --> TalkPage
    TalkPage --> TalkPageCoffeeRoll
    Article --> DisambiguationPages
    ArticlePeek --> Article
```

## 編集フロー

```mermaid
flowchart TB
    subgraph EditFlow[編集フロー]
        Article[Article画面]
        EditingWelcome[EditingWelcome画面]
        EditNotices[EditNotices画面]
        EditSave[EditSave画面]
        EditSummary[EditSummary画面]
        EditHint[EditHint画面]
    end

    subgraph LinkEdit[リンク編集]
        EditLink[EditLink画面]
        InsertLink[InsertLink画面]
        EditPreviewInternalLink[EditPreviewInternalLink画面]
    end

    subgraph MediaInsert[メディア挿入]
        InsertMedia[InsertMedia画面]
        InsertMediaSearch[InsertMediaSearch画面]
        InsertMediaSettings[InsertMediaSettings画面]
        InsertMediaSelectedImage[InsertMediaSelectedImage画面]
        InsertMediaAdvancedSettings[InsertMediaAdvancedSettings画面]
        InsertMediaImagePosition[InsertMediaImagePositionSettings画面]
        InsertMediaImageSize[InsertMediaImageSizeSettings画面]
        InsertMediaImageType[InsertMediaImageTypeSettings画面]
    end

    subgraph Auth[認証]
        HCaptcha[HCaptcha画面]
    end

    Article --> |初回編集| EditingWelcome
    EditingWelcome --> EditNotices
    Article --> |編集| EditNotices
    EditNotices --> EditSave
    EditSave --> EditSummary
    EditSave --> EditHint
    EditSave --> HCaptcha

    Article --> EditLink
    EditLink --> InsertLink
    InsertLink --> EditPreviewInternalLink

    Article --> InsertMedia
    InsertMedia --> InsertMediaSearch
    InsertMedia --> InsertMediaSelectedImage
    InsertMediaSearch --> InsertMediaSettings
    InsertMediaSettings --> InsertMediaAdvancedSettings
    InsertMediaAdvancedSettings --> InsertMediaImagePosition
    InsertMediaAdvancedSettings --> InsertMediaImageSize
    InsertMediaAdvancedSettings --> InsertMediaImageType
```

## 認証・アカウントフロー

```mermaid
flowchart TB
    subgraph AuthFlow[認証フロー]
        AccountCreation[AccountCreation画面]
        ForgotPassword[ForgotPassword画面]
        ChangePassword[ChangePassword画面]
        TwoFactorPassword[TwoFactorPassword画面]
        HCaptcha[HCaptcha画面]
        VanishAccountWarning[VanishAccountWarning画面]
    end

    subgraph AccountSettings[アカウント設定]
        Account[Account画面]
    end

    Account --> ChangePassword
    Account --> VanishAccountWarning

    AccountCreation --> HCaptcha
    AccountCreation --> TwoFactorPassword

    ForgotPassword --> HCaptcha
```

## 通知フロー

```mermaid
flowchart TB
    subgraph NotificationFlow[通知フロー]
        NotificationsCenter[NotificationsCenter画面]
        NotificationsCenterDetail[NotificationsCenterDetail画面]
        NotificationsCenterOnboarding[NotificationsCenterOnboarding画面]
    end

    subgraph NotificationSettings[通知設定]
        NotificationSettingsVC[NotificationSettings画面]
        PushNotificationsSettings[PushNotificationsSettings画面]
    end

    NotificationsCenter --> NotificationsCenterDetail
    NotificationsCenter --> |初回| NotificationsCenterOnboarding
    NotificationSettingsVC --> PushNotificationsSettings
```

## 設定フロー

```mermaid
flowchart TB
    subgraph SettingsFlow[設定フロー]
        Settings[Settings画面]
        Account[Account画面]
        AppearanceSettings[AppearanceSettings画面]
        NotificationSettings[NotificationSettings画面]
        ExploreFeedSettings[ExploreFeedSettings画面]
        StorageAndSyncingSettings[StorageAndSyncingSettings画面]
        SearchSettings[SearchSettings画面]
        YearInReviewSettings[YearInReviewSettings画面]
    end

    subgraph Help[ヘルプ]
        HelpVC[Help画面]
        SinglePageWebView[SinglePageWebView画面]
        DescriptionHelp[DescriptionHelp画面]
    end

    Settings --> Account
    Settings --> AppearanceSettings
    Settings --> NotificationSettings
    Settings --> ExploreFeedSettings
    Settings --> StorageAndSyncingSettings
    Settings --> SearchSettings
    Settings --> YearInReviewSettings
    Settings --> HelpVC
    HelpVC --> SinglePageWebView
    Settings --> DescriptionHelp
```

## リーディングリスト詳細フロー

```mermaid
flowchart TB
    subgraph ReadingListFlow[リーディングリストフロー]
        ReadingLists[ReadingLists画面]
        ReadingListDetail[ReadingListDetail画面]
        CreateReadingList[CreateReadingList画面]
        ReadingListHint[ReadingListHint画面]
        SavedProgress[SavedProgress画面]
    end

    ReadingLists --> ReadingListDetail
    ReadingLists --> CreateReadingList
    ReadingListDetail --> Article[Article画面]
    Article --> ReadingListHint
    ReadingLists --> SavedProgress
```

## 各画面への遷移元まとめ

| 遷移先画面 | 主な遷移元 |
|-----------|-----------|
| Explore画面 | タブバー、アプリ起動 |
| Places画面 | タブバー |
| Saved画面 | タブバー |
| Search画面 | タブバー、ナビゲーションバー検索 |
| Article画面 | 検索結果、Exploreカード、リーディングリスト、Places |
| ReadingListDetail画面 | ReadingLists画面 |
| PageHistory画面 | Article画面のメニュー |
| TalkPage画面 | Article画面のメニュー |
| Settings画面 | プロフィールボタン |
| NotificationsCenter画面 | プロフィールボタン |

## 注記

- 本図は主要な画面遷移を示しており、すべての遷移パターンを網羅しているわけではありません
- モーダル表示とプッシュ遷移が混在しています
- Coordinator パターンを使用した画面遷移が多く実装されています
