# アーキテクチャ構成図

## 1. システム全体構成図

```mermaid
graph TB
    subgraph "ブラウザ（クライアントサイド SPA）"
        subgraph "decap-cms（エントリーポイント）"
            ENTRY[index.js<br/>自動初期化 + window.CMS 公開]
        end

        subgraph "decap-cms-app（プラグイン統合）"
            APP[extensions.js<br/>全プラグイン登録]
        end

        subgraph "decap-cms-core（コアロジック）"
            BOOTSTRAP[bootstrap.js<br/>アプリケーション初期化]
            STORE[Redux Store<br/>状態管理]
            REGISTRY[Registry<br/>プラグインレジストリ]
            ROUTER[React Router<br/>Hash History]
            FORMATS[Formats<br/>YAML/TOML/JSON/Frontmatter]

            subgraph "Presentation Layer"
                COMP_APP[App コンポーネント]
                COMP_COLLECTION[Collection コンポーネント]
                COMP_EDITOR[Editor コンポーネント]
                COMP_MEDIA[MediaLibrary コンポーネント]
                COMP_WORKFLOW[Workflow コンポーネント]
                ERROR_BOUNDARY[ErrorBoundary]
            end

            subgraph "Application Layer（Redux Actions/Thunks）"
                ACT_AUTH[auth.ts]
                ACT_CONFIG[config.ts]
                ACT_ENTRIES[entries.ts]
                ACT_WORKFLOW[editorialWorkflow.ts]
                ACT_MEDIA[media.ts / mediaLibrary.ts]
                ACT_STATUS[status.ts]
            end

            subgraph "Domain Layer（Redux Reducers）"
                RED_AUTH[auth]
                RED_CONFIG[config]
                RED_ENTRIES[entries]
                RED_DRAFT[entryDraft]
                RED_WORKFLOW[editorialWorkflow]
                RED_MEDIA[medias / mediaLibrary]
                RED_NOTIF[notifications]
                RED_UI[globalUI]
            end

            BACKEND_ABSTRACT[backend.ts<br/>バックエンド抽象化層]
        end
    end

    subgraph "外部プラグインパッケージ"
        subgraph "Backends"
            BE_GITHUB[backend-github]
            BE_GITLAB[backend-gitlab]
            BE_BITBUCKET[backend-bitbucket]
            BE_AZURE[backend-azure]
            BE_GITEA[backend-gitea]
            BE_GATEWAY[backend-git-gateway]
            BE_PROXY[backend-proxy]
        end

        subgraph "Widgets（15個）"
            WDG_STRING[widget-string]
            WDG_MARKDOWN[widget-markdown]
            WDG_IMAGE[widget-image]
            WDG_MORE[... 他12個]
        end

        subgraph "UI / Auth / Utility"
            UI_DEFAULT[ui-default]
            UI_AUTH[ui-auth]
            LIB_AUTH[lib-auth<br/>OAuth PKCE/Implicit/Netlify]
            LIB_UTIL[lib-util]
            LIB_WIDGETS[lib-widgets]
            LOCALES[locales]
        end

        subgraph "Media Libraries"
            ML_CLOUDINARY[media-library-cloudinary]
            ML_UPLOADCARE[media-library-uploadcare]
        end
    end

    subgraph "外部サービス"
        GITHUB_API[GitHub API<br/>REST / GraphQL]
        GITLAB_API[GitLab API]
        BITBUCKET_API[Bitbucket API]
        AZURE_API[Azure DevOps API]
        GITEA_API[Gitea API]
        NETLIFY_GW[Netlify Git Gateway<br/>+ GoTrue]
        PROXY_SERVER[Decap CMS Proxy Server<br/>localhost:8081]
        CLOUDINARY_CDN[Cloudinary CDN]
        UPLOADCARE_CDN[Uploadcare CDN]
    end

    ENTRY --> APP
    APP --> BOOTSTRAP
    APP --> REGISTRY

    BOOTSTRAP --> STORE
    BOOTSTRAP --> ROUTER
    BOOTSTRAP --> ERROR_BOUNDARY

    COMP_APP --> COMP_COLLECTION
    COMP_APP --> COMP_EDITOR
    COMP_APP --> COMP_MEDIA
    COMP_APP --> COMP_WORKFLOW

    COMP_EDITOR --> ACT_ENTRIES
    COMP_COLLECTION --> ACT_ENTRIES
    COMP_MEDIA --> ACT_MEDIA
    COMP_WORKFLOW --> ACT_WORKFLOW

    ACT_AUTH --> RED_AUTH
    ACT_CONFIG --> RED_CONFIG
    ACT_ENTRIES --> RED_ENTRIES
    ACT_ENTRIES --> RED_DRAFT
    ACT_WORKFLOW --> RED_WORKFLOW
    ACT_MEDIA --> RED_MEDIA
    ACT_STATUS --> RED_NOTIF

    ACT_ENTRIES --> BACKEND_ABSTRACT
    ACT_WORKFLOW --> BACKEND_ABSTRACT
    ACT_AUTH --> BACKEND_ABSTRACT
    ACT_MEDIA --> BACKEND_ABSTRACT

    BACKEND_ABSTRACT --> REGISTRY
    BACKEND_ABSTRACT --> FORMATS

    REGISTRY --> BE_GITHUB
    REGISTRY --> BE_GITLAB
    REGISTRY --> BE_BITBUCKET
    REGISTRY --> BE_AZURE
    REGISTRY --> BE_GITEA
    REGISTRY --> BE_GATEWAY
    REGISTRY --> BE_PROXY

    BE_GITHUB --> GITHUB_API
    BE_GITLAB --> GITLAB_API
    BE_BITBUCKET --> BITBUCKET_API
    BE_AZURE --> AZURE_API
    BE_GITEA --> GITEA_API
    BE_GATEWAY --> NETLIFY_GW
    BE_PROXY --> PROXY_SERVER

    BE_GITHUB --> LIB_AUTH
    BE_GITLAB --> LIB_AUTH
    BE_GATEWAY --> LIB_AUTH

    ML_CLOUDINARY --> CLOUDINARY_CDN
    ML_UPLOADCARE --> UPLOADCARE_CDN
```

## 2. パッケージ依存関係図

```mermaid
graph TD
    subgraph "Entry Layer"
        CMS[decap-cms<br/>v3.10.0]
    end

    subgraph "Integration Layer"
        APP[decap-cms-app<br/>v3.10.0]
    end

    subgraph "Core Layer"
        CORE[decap-cms-core<br/>v3.10.0]
    end

    subgraph "Backend Packages"
        BE_GH[backend-github]
        BE_GL[backend-gitlab]
        BE_BB[backend-bitbucket]
        BE_AZ[backend-azure]
        BE_GT[backend-gitea]
        BE_GW[backend-git-gateway]
        BE_PX[backend-proxy]
        BE_COG[backend-aws-cognito-github-proxy]
        BE_TEST[backend-test]
    end

    subgraph "Widget Packages"
        W_STR[widget-string]
        W_NUM[widget-number]
        W_MD[widget-markdown]
        W_IMG[widget-image]
        W_FILE[widget-file]
        W_BOOL[widget-boolean]
        W_SEL[widget-select]
        W_DT[widget-datetime]
        W_LST[widget-list]
        W_OBJ[widget-object]
        W_REL[widget-relation]
        W_TXT[widget-text]
        W_CODE[widget-code]
        W_MAP[widget-map]
        W_CLR[widget-colorstring]
    end

    subgraph "Shared Libraries"
        UI[ui-default]
        UI_AUTH[ui-auth]
        LIB_AUTH[lib-auth]
        LIB_UTIL[lib-util]
        LIB_WDG[lib-widgets]
        LOCALES[locales]
        DEF_EXP[default-exports]
    end

    subgraph "Media Libraries"
        ML_CLD[media-library-cloudinary]
        ML_UC[media-library-uploadcare]
    end

    CMS --> APP
    CMS --> ML_CLD
    CMS --> ML_UC

    APP --> CORE
    APP --> BE_GH
    APP --> BE_GL
    APP --> BE_BB
    APP --> BE_AZ
    APP --> BE_GT
    APP --> BE_GW
    APP --> BE_PX
    APP --> BE_COG
    APP --> BE_TEST
    APP --> W_STR
    APP --> W_NUM
    APP --> W_MD
    APP --> W_IMG
    APP --> W_FILE
    APP --> W_BOOL
    APP --> W_SEL
    APP --> W_DT
    APP --> W_LST
    APP --> W_OBJ
    APP --> W_REL
    APP --> W_TXT
    APP --> W_CODE
    APP --> W_MAP
    APP --> W_CLR
    APP --> LOCALES

    BE_GH --> LIB_AUTH
    BE_GH --> LIB_UTIL
    BE_GL --> LIB_AUTH
    BE_GL --> LIB_UTIL
    BE_BB --> LIB_UTIL
    BE_GW --> LIB_AUTH
    BE_GW --> LIB_UTIL

    W_MD --> UI
    W_LST --> UI
    W_OBJ --> UI
    W_IMG --> LIB_WDG
    W_REL --> LIB_WDG

    CORE --> LIB_UTIL
```

## 3. Redux データフロー図

```mermaid
flowchart LR
    subgraph "View（React Components）"
        UI_COMP[Collection / Editor / MediaLibrary / Workflow]
    end

    subgraph "Action Creators（Thunks）"
        ACTIONS[auth / config / entries<br/>editorialWorkflow / media<br/>mediaLibrary / status]
    end

    subgraph "Middleware"
        THUNK[Redux Thunk]
        WAIT[waitUntilAction]
    end

    subgraph "Reducers"
        REDUCERS[auth / config / collections<br/>entries / entryDraft<br/>editorialWorkflow / medias<br/>mediaLibrary / notifications<br/>globalUI / search / status]
    end

    subgraph "Store"
        STATE[Redux Store<br/>+ DevTools]
    end

    subgraph "Side Effects"
        BACKEND[Backend API<br/>GitHub / GitLab / etc.]
        STORAGE[localForage<br/>ドラフトバックアップ]
        NOTIF[Toast Notifications]
    end

    UI_COMP -->|dispatch| ACTIONS
    ACTIONS -->|async| THUNK
    THUNK -->|dispatch| REDUCERS
    WAIT -->|条件付き実行| ACTIONS
    REDUCERS -->|新しい state| STATE
    STATE -->|connect / useSelector| UI_COMP

    ACTIONS -->|API call| BACKEND
    ACTIONS -->|save/load| STORAGE
    ACTIONS -->|dispatch notification| NOTIF
```

## 4. 認証フロー図

```mermaid
sequenceDiagram
    participant User as ユーザー
    participant UI as 認証 UI
    participant Auth as actions/auth.ts
    participant Backend as Backend 実装
    participant LibAuth as lib-auth
    participant Provider as Git プロバイダー<br/>(GitHub/GitLab等)

    User->>UI: ログインボタンクリック
    UI->>Auth: loginUser(credentials)
    Auth->>Auth: dispatch(AUTH_REQUEST)

    alt PKCE OAuth フロー
        Auth->>Backend: authenticate()
        Backend->>LibAuth: PkceAuthenticator.authenticate()
        LibAuth->>Provider: 認可エンドポイントへリダイレクト
        Provider->>User: ログイン画面表示
        User->>Provider: 認証情報入力
        Provider->>LibAuth: 認可コード返却（リダイレクト）
        LibAuth->>Provider: トークンエンドポイントへ POST
        Provider->>LibAuth: アクセストークン返却
        LibAuth->>Backend: トークン返却
    else Netlify Auth フロー
        Auth->>Backend: authenticate()
        Backend->>LibAuth: NetlifyAuthenticator.authenticate()
        LibAuth->>LibAuth: ポップアップウィンドウ開く
        LibAuth->>Provider: GoTrue 経由で認証
        Provider->>LibAuth: window.postMessage でトークン返却
        LibAuth->>Backend: トークン返却
    end

    Backend->>Auth: ユーザー情報返却
    Auth->>Auth: dispatch(AUTH_SUCCESS)

    alt Open Authoring 有効
        Auth->>Auth: dispatch(USE_OPEN_AUTHORING)
    end

    Auth->>Auth: dispatch(AUTH_REQUEST_DONE)
    Auth->>UI: 状態更新 → メイン画面へ遷移
```

## 5. エントリ保存フロー図

```mermaid
sequenceDiagram
    participant Editor as Editor コンポーネント
    participant Actions as actions/entries.ts
    participant Formats as formats/
    participant Backend as backend.ts
    participant API as Git プロバイダー API
    participant Store as Redux Store

    Editor->>Actions: persistEntry() dispatch

    Actions->>Store: getState() で entryDraft 取得

    alt メディアアセットあり
        Actions->>Actions: AssetProxy.toBase64() 変換
    end

    Actions->>Formats: エントリデータをシリアライズ<br/>(YAML/TOML/JSON)

    alt Editorial Workflow 有効
        Actions->>Backend: persistUnpublishedEntry()
        Backend->>API: ブランチ作成
        Backend->>API: ファイルコミット
        Backend->>API: PR 作成
        API->>Backend: PR URL 返却
    else Simple Publish
        Actions->>Backend: persistEntry()
        Backend->>API: メインブランチにコミット
        API->>Backend: コミット SHA 返却
    end

    Backend->>Actions: 保存結果返却
    Actions->>Store: dispatch(ENTRY_PERSIST_SUCCESS)
    Actions->>Store: dispatch(addNotification - 成功通知)
    Store->>Editor: 状態更新 → UI 再レンダリング
```

## 6. プラグインレジストリ構造図

```mermaid
graph TB
    subgraph "Registry（lib/registry.js）"
        REG[グローバル Registry オブジェクト]

        REG_BE[backends: Object]
        REG_WDG[widgets: Object]
        REG_ML[mediaLibraries: Array]
        REG_EC[editorComponents: Map]
        REG_FMT[formats: Object]
        REG_LOC[locales: Object]
        REG_EVT[eventHandlers: Object]
        REG_SER[widgetValueSerializers: Object]

        REG --> REG_BE
        REG --> REG_WDG
        REG --> REG_ML
        REG --> REG_EC
        REG --> REG_FMT
        REG --> REG_LOC
        REG --> REG_EVT
        REG --> REG_SER
    end

    subgraph "Registration API"
        API_RB[CMS.registerBackend]
        API_RW[CMS.registerWidget]
        API_RM[CMS.registerMediaLibrary]
        API_RE[CMS.registerEditorComponent]
        API_RL[CMS.registerLocale]
        API_RF[CMS.registerCustomFormat]
        API_REH[CMS.registerEventListener]
    end

    subgraph "Resolution API"
        RES_B[resolveBackend]
        RES_W[resolveWidget / getWidget]
        RES_M[getMediaLibrary]
        RES_E[getEditorComponents]
    end

    subgraph "Event Hooks"
        EVT_PRE_PUB[prePublish]
        EVT_POST_PUB[postPublish]
        EVT_PRE_SAVE[preSave]
        EVT_POST_SAVE[postSave]
        EVT_PRE_UNPUB[preUnpublish]
        EVT_POST_UNPUB[postUnpublish]
    end

    API_RB --> REG_BE
    API_RW --> REG_WDG
    API_RM --> REG_ML
    API_RE --> REG_EC
    API_RL --> REG_LOC
    API_RF --> REG_FMT
    API_REH --> REG_EVT

    REG_BE --> RES_B
    REG_WDG --> RES_W
    REG_ML --> RES_M
    REG_EC --> RES_E

    REG_EVT --> EVT_PRE_PUB
    REG_EVT --> EVT_POST_PUB
    REG_EVT --> EVT_PRE_SAVE
    REG_EVT --> EVT_POST_SAVE
    REG_EVT --> EVT_PRE_UNPUB
    REG_EVT --> EVT_POST_UNPUB
```

## 7. 初期化シーケンス図

```mermaid
sequenceDiagram
    participant HTML as index.html
    participant CMS as decap-cms/index.js
    participant App as decap-cms-app/extensions.js
    participant Core as decap-cms-core/bootstrap.js
    participant Registry as lib/registry.js
    participant Store as Redux Store
    participant Config as actions/config.ts
    participant Auth as actions/auth.ts
    participant React as React 19 createRoot

    HTML->>CMS: script タグで読み込み
    CMS->>App: import extensions

    App->>Registry: registerBackend('github', GitHubBackend)
    App->>Registry: registerBackend('gitlab', GitLabBackend)
    App->>Registry: registerBackend('bitbucket', BitbucketBackend)
    App->>Registry: registerBackend('azure', AzureBackend)
    App->>Registry: registerBackend('gitea', GiteaBackend)
    App->>Registry: registerBackend('git-gateway', GitGatewayBackend)
    App->>Registry: registerBackend('proxy', ProxyBackend)

    App->>Registry: registerWidget([string, number, markdown, ...])
    App->>Registry: registerEditorComponent(imageComponent)
    App->>Registry: registerLocale(locales)
    App->>Registry: registerMediaLibrary(cloudinary)
    App->>Registry: registerMediaLibrary(uploadcare)

    CMS->>CMS: window.CMS_MANUAL_INIT チェック

    alt 自動初期化
        CMS->>Core: CMS.init()
    end

    Core->>Store: createStore(reducers, middleware)
    Core->>Config: dispatch(loadConfig())

    Config->>Config: config.yml 読み込み
    Config->>Config: ローカルバックエンド検出
    Config->>Config: 設定の正規化・デフォルト適用
    Config->>Store: dispatch(CONFIG_SUCCESS)

    Config->>Auth: onLoad callback → authenticateUser()
    Auth->>Auth: キャッシュからトークン確認
    Auth->>Store: dispatch(AUTH_SUCCESS or AUTH_REQUEST_DONE)

    Core->>React: createRoot(rootElement)
    Core->>React: render(Provider + Router + ErrorBoundary + App)
```
