# Prettier ウェブサイト 画面遷移図

## 概要

Prettierウェブサイトは、Docusaurusベースのドキュメントサイトと、独立したPlayground SPAで構成されています。

## 画面遷移図

```mermaid
flowchart TB
    subgraph MainSite["Prettierメインサイト (Docusaurus)"]
        Home["ホームページ<br/>/"]
        Users["ユーザー一覧<br/>/users"]
        Help["ヘルプ<br/>/help"]

        subgraph Docs["ドキュメント (/docs)"]
            subgraph About["About"]
                DocsIndex["Prettier概要<br/>/docs"]
                WhyPrettier["Why Prettier?<br/>/docs/why-prettier"]
                Comparison["Comparison<br/>/docs/comparison"]
                OptionPhilosophy["Option Philosophy<br/>/docs/option-philosophy"]
                Rationale["Rationale<br/>/docs/rationale"]
            end

            subgraph Usage["Usage"]
                Install["Install<br/>/docs/install"]
                Ignore["Ignore<br/>/docs/ignore"]
                Linters["Integrating with Linters<br/>/docs/integrating-with-linters"]
                Precommit["Pre-commit<br/>/docs/precommit"]
                Plugins["Plugins<br/>/docs/plugins"]
                CLI["CLI<br/>/docs/cli"]
                API["API<br/>/docs/api"]
                Browser["Browser<br/>/docs/browser"]
                CI["CI<br/>/docs/ci"]
            end

            subgraph Config["Configuring Prettier"]
                Options["Options<br/>/docs/options"]
                Configuration["Configuration<br/>/docs/configuration"]
                SharingConfig["Sharing Configurations<br/>/docs/sharing-configurations"]
            end

            subgraph Editors["Editors"]
                EditorsOverview["Editor Integration<br/>/docs/editors"]
                WebStorm["WebStorm<br/>/docs/webstorm"]
                Vim["Vim<br/>/docs/vim"]
                WatchingFiles["Watching Files<br/>/docs/watching-files"]
            end

            subgraph Misc["Misc"]
                TechnicalDetails["Technical Details<br/>/docs/technical-details"]
                RelatedProjects["Related Projects<br/>/docs/related-projects"]
                ForEnterprise["For Enterprise<br/>/docs/for-enterprise"]
            end
        end

        Blog["ブログ<br/>/blog"]
    end

    subgraph PlaygroundSPA["Playground (独立SPA)"]
        Playground["Playground<br/>/playground/"]
    end

    %% メインナビゲーション
    Home -->|"Try It Online"| Playground
    Home -->|"Install Prettier"| Install
    Home -->|"See others"| Users
    Home -->|"documentation"| DocsIndex

    %% ヘッダーナビゲーション
    Home -.->|"Navbar: Playground"| Playground
    Home -.->|"Navbar: Docs"| DocsIndex
    Home -.->|"Navbar: Blog"| Blog

    %% フッターナビゲーション
    Home -.->|"Footer: About"| DocsIndex
    Home -.->|"Footer: Usage"| Install
    Home -.->|"Footer: User Showcase"| Users
    Home -.->|"Footer: Blog"| Blog

    %% ヘルプページからの遷移
    Help -->|"documentation"| DocsIndex

    %% ドキュメント内の遷移
    DocsIndex -->|"sidebar"| WhyPrettier
    WhyPrettier -->|"sidebar"| Comparison
    Comparison -->|"sidebar"| OptionPhilosophy
    OptionPhilosophy -->|"sidebar"| Rationale

    %% Why Prettier?からOption Philosophyへのリンク
    Home -->|"Has few options"| OptionPhilosophy
    Home -->|"And more"| WhyPrettier
```

## 画面グループ説明

### メインサイト (Docusaurus)

| グループ | 説明 |
|---------|------|
| トップページ | Prettierの紹介と各機能へのエントリーポイント |
| ドキュメント (About) | Prettierの概要、思想、設計根拠 |
| ドキュメント (Usage) | インストール、CLI、API等の使い方 |
| ドキュメント (Configuring) | オプション、設定ファイルの説明 |
| ドキュメント (Editors) | エディタ連携の設定方法 |
| ドキュメント (Misc) | 技術詳細、関連プロジェクト等 |
| ブログ | リリースノート、更新情報 |
| コミュニティ | ユーザー一覧、ヘルプ |

### Playground (独立SPA)

| 画面 | 説明 |
|------|------|
| Playground | Vue + Reactで構築された独立SPA。コードを入力してリアルタイムでPrettierのフォーマット結果を確認できる。サイドバーでオプション設定が可能 |

## ナビゲーション方式

1. **ヘッダーナビゲーション**: Navbar経由で主要ページへアクセス
2. **サイドバーナビゲーション**: ドキュメント内でのページ間移動
3. **フッターナビゲーション**: サイト全体の主要リンク
4. **ボタン/リンク**: ページ内のCTAボタンやテキストリンク

## 技術構成

- **メインサイト**: Docusaurus (React)
- **Playground**: Vue 3 + React (独立したVite SPA)
- **ドキュメント**: Markdown (Docusaurus docs機能)
- **ブログ**: Markdown (Docusaurus blog機能)
