# 画面遷移図

## 1. SFC Playground

```mermaid
graph TD
    subgraph SFC_Playground["SFC Playground"]
        INDEX_P["index.html<br/>（エントリーポイント）"]
        MAIN_P["main.ts<br/>（アプリ初期化）"]
        APP_P["App.vue<br/>（メイン画面）"]
        HEADER["Header.vue<br/>（ナビゲーションバー）"]
        VS_VUE["VersionSelect.vue<br/>（Vueバージョン選択）"]
        VS_TS["VersionSelect.vue<br/>（TypeScriptバージョン選択）"]
        REPL["Repl<br/>（@vue/repl エディタ＆プレビュー）"]
        DOWNLOAD["downloadProject()<br/>（ZIPダウンロード）"]
        SHARE["copyLink()<br/>（URL共有）"]

        INDEX_P --> MAIN_P
        MAIN_P --> APP_P
        APP_P --> HEADER
        APP_P --> REPL
        HEADER --> VS_VUE
        HEADER --> VS_TS
        HEADER -->|"Download ボタン"| DOWNLOAD
        HEADER -->|"Share ボタン"| SHARE
        HEADER -->|"Reload ボタン"| REPL
        VS_VUE -->|"バージョン変更"| REPL
    end

    style INDEX_P fill:#e1f5fe
    style APP_P fill:#c8e6c9
    style HEADER fill:#fff9c4
    style REPL fill:#f3e5f5
```

### SFC Playground 機能遷移

```mermaid
graph LR
    subgraph ユーザー操作
        EDIT["エディタでコード編集"]
        TOGGLE_MODE["DEV/PROD 切替"]
        TOGGLE_SSR["SSR 切替"]
        TOGGLE_SAVE["AutoSave 切替"]
        TOGGLE_THEME["テーマ切替<br/>（Sun/Moon）"]
        CHANGE_VER["バージョン変更"]
        CLICK_SHARE["Share ボタン"]
        CLICK_DL["Download ボタン"]
        CLICK_RELOAD["Reload ボタン"]
    end

    subgraph 結果
        RECOMPILE["Repl リアルタイム<br/>コンパイル＆プレビュー"]
        URL_UPDATE["URLハッシュ更新<br/>（history.replaceState）"]
        LS_UPDATE["localStorage 更新"]
        CLIPBOARD["クリップボードにURL コピー"]
        ZIP_DL["vue-project.zip<br/>ダウンロード"]
    end

    EDIT --> RECOMPILE
    TOGGLE_MODE --> URL_UPDATE
    TOGGLE_SSR --> URL_UPDATE
    TOGGLE_SAVE --> LS_UPDATE
    TOGGLE_THEME --> LS_UPDATE
    CHANGE_VER --> RECOMPILE
    CLICK_SHARE --> CLIPBOARD
    CLICK_DL --> ZIP_DL
    CLICK_RELOAD --> RECOMPILE
```

## 2. Template Explorer

```mermaid
graph TD
    subgraph Template_Explorer["Template Explorer"]
        INDEX_T["index.html<br/>（エントリーポイント）"]
        INIT["init()<br/>（Monaco Editor 初期化）"]
        HEADER_T["Header<br/>（タイトル＆リンク）"]
        OPTIONS["Options Panel<br/>（コンパイルオプション）"]
        SOURCE["Source Editor<br/>（テンプレート入力）"]
        OUTPUT["Output Editor<br/>（コンパイル結果表示）"]

        INDEX_T --> INIT
        INIT --> HEADER_T
        INIT --> SOURCE
        INIT --> OUTPUT
        HEADER_T --> OPTIONS
    end

    style INDEX_T fill:#e1f5fe
    style SOURCE fill:#c8e6c9
    style OUTPUT fill:#f3e5f5
    style OPTIONS fill:#fff9c4
```

### Template Explorer 機能遷移

```mermaid
graph LR
    subgraph ユーザー操作
        EDIT_T["テンプレート入力"]
        CHANGE_OPT["オプション変更"]
        CURSOR_SRC["Source カーソル移動"]
        CURSOR_OUT["Output カーソル移動"]
    end

    subgraph 処理
        DEBOUNCE["debounce（300ms）"]
        RECOMPILE_T["reCompile()"]
        SRCMAP_GEN["SourceMap<br/>generatedPositionFor()"]
        SRCMAP_ORIG["SourceMap<br/>originalPositionFor()"]
    end

    subgraph 結果
        OUTPUT_UPDATE["Output Editor 更新"]
        CONSOLE_LOG["コンソールに AST 出力"]
        HIGHLIGHT_OUT["Output ハイライト"]
        HIGHLIGHT_SRC["Source ハイライト"]
        STATE_SAVE["localStorage / URLハッシュ保存"]
    end

    EDIT_T --> DEBOUNCE --> RECOMPILE_T
    CHANGE_OPT --> RECOMPILE_T
    RECOMPILE_T --> OUTPUT_UPDATE
    RECOMPILE_T --> CONSOLE_LOG
    RECOMPILE_T --> STATE_SAVE
    CURSOR_SRC --> SRCMAP_GEN --> HIGHLIGHT_OUT
    CURSOR_OUT --> SRCMAP_ORIG --> HIGHLIGHT_SRC
```

## 3. Vite Debug

```mermaid
graph TD
    subgraph Vite_Debug["Vite Debug"]
        INDEX_V["index.html<br/>（エントリーポイント）"]
        MAIN_V["main.ts<br/>（アプリ初期化）"]
        APP_V["App.vue<br/>（カウンターアプリ）"]

        INDEX_V --> MAIN_V
        MAIN_V --> APP_V
    end

    APP_V -->|"ボタンクリック"| APP_V

    style INDEX_V fill:#e1f5fe
    style APP_V fill:#c8e6c9
```

## 4. プロジェクト全体の関係

```mermaid
graph TB
    subgraph vuejs_core["vuejs/core モノレポ"]
        subgraph packages["packages（公開パッケージ）"]
            COMPILER_DOM["@vue/compiler-dom"]
            COMPILER_SSR["@vue/compiler-ssr"]
            RUNTIME_DOM["@vue/runtime-dom"]
        end

        subgraph packages_private["packages-private（プライベート）"]
            PLAYGROUND["SFC Playground<br/>（play.vuejs.org）"]
            EXPLORER["Template Explorer<br/>（vue-next-template-explorer）"]
            VITE_DBG["Vite Debug<br/>（開発用）"]
        end
    end

    PLAYGROUND -->|"@vue/repl 経由"| COMPILER_DOM
    EXPLORER -->|"直接使用"| COMPILER_DOM
    EXPLORER -->|"直接使用"| COMPILER_SSR
    EXPLORER -->|"直接使用"| RUNTIME_DOM
    VITE_DBG -->|"開発テスト"| RUNTIME_DOM
```
