# インフラ構成図

## 全体構成図

```mermaid
flowchart TB
    subgraph Developer["開発者環境"]
        DEV[開発者]
    end

    subgraph GitHub["GitHub"]
        REPO[prettier/prettier<br/>リポジトリ]

        subgraph Actions["GitHub Actions"]
            BUILD[ビルドワークフロー]
            TEST[テストワークフロー]
            LINT[Lintワークフロー]
            CODEQL[CodeQL分析]
        end

        ARTIFACTS[GitHub Artifacts]
        SECURITY[Security Alerts]
    end

    subgraph ExternalServices["外部サービス"]
        NETLIFY[Netlify<br/>ドキュメントサイト]
        NPM[npm Registry<br/>パッケージ配布]
        CODECOV[Codecov<br/>カバレッジレポート]
    end

    subgraph EndUsers["エンドユーザー"]
        USER_DOCS[ドキュメント閲覧者]
        USER_NPM[npmユーザー]
    end

    DEV -->|push/PR| REPO
    REPO -->|trigger| Actions
    BUILD --> ARTIFACTS
    TEST -->|download| ARTIFACTS
    LINT -->|download| ARTIFACTS
    CODEQL --> SECURITY
    TEST -->|upload| CODECOV

    REPO -->|webhook| NETLIFY
    ARTIFACTS -->|publish| NPM

    NETLIFY --> USER_DOCS
    NPM --> USER_NPM
```

## CI/CDパイプライン構成図

```mermaid
flowchart LR
    subgraph Triggers["トリガー"]
        PUSH[Push<br/>main/next/v*/patch-release]
        PR[Pull Request]
        SCHEDULE[Schedule<br/>毎週日曜]
    end

    subgraph BuildStage["ビルドステージ"]
        CHECKOUT[Checkout]
        SETUP_NODE[Setup Node.js]
        INSTALL[yarn install]
        BUILD[yarn build]
        UPLOAD[Upload Artifact]
    end

    subgraph TestStage["テストステージ"]
        subgraph Matrix["マトリックステスト"]
            LINUX[Linux<br/>Node 14-25]
            MACOS[macOS<br/>Node 14,24]
            WINDOWS[Windows<br/>Node 14,24]
        end

        subgraph Browser["ブラウザテスト"]
            CHROME[Chrome]
            FIREFOX[Firefox]
        end
    end

    subgraph LintStage["Lintステージ"]
        ESLINT[ESLint]
        PRETTIER[Prettier Check]
        TYPECHECK[TypeScript]
        SPELLCHECK[CSpell]
        DEPS[Dependencies Check]
    end

    subgraph SecurityStage["セキュリティ"]
        CODEQL[CodeQL Analysis]
        DEP_REVIEW[Dependency Review]
    end

    PUSH --> BuildStage
    PR --> BuildStage
    SCHEDULE --> BuildStage

    BuildStage --> TestStage
    BuildStage --> LintStage
    PR --> SecurityStage
    PUSH --> CODEQL
```

## テストマトリックス構成図

```mermaid
flowchart TB
    subgraph ProdTest["本番テスト (prod-test.yml)"]
        subgraph LinuxTests["Linux (ubuntu-latest)"]
            L14[Node 14]
            L16[Node 16]
            L18[Node 18]
            L20[Node 20]
            L22[Node 22]
            L24[Node 24 ★Full Test]
            L25[Node 25]
        end

        subgraph MacTests["macOS"]
            M24[macos-latest<br/>Node 24]
            M14[macos-15-intel<br/>Node 14]
        end

        subgraph WinTests["Windows (windows-latest)"]
            W14[Node 14]
            W24[Node 24]
        end

        subgraph BrowserTests["ブラウザテスト"]
            subgraph LinuxBrowser["Linux"]
                LC[Chrome ★Full Test]
                LF[Firefox]
            end
            subgraph WinBrowser["Windows"]
                WF[Firefox]
            end
        end
    end

    subgraph DevTest["開発テスト (dev-test.yml)"]
        subgraph DevLinux["Linux (ubuntu-latest)"]
            DL20[Node 20]
            DL22[Node 22]
            DL24[Node 24 ★Full Test + Coverage]
            DL25[Node 25]
        end

        subgraph DevMac["macOS"]
            DM20[Node 20]
            DM24[Node 24]
        end

        subgraph DevWin["Windows"]
            DW20[Node 20]
            DW24[Node 24]
        end
    end
```

## 外部サービス連携図

```mermaid
flowchart TB
    subgraph GitHub["GitHub"]
        REPO[リポジトリ]
        ACTIONS[GitHub Actions]
        ARTIFACTS[Artifacts]
    end

    subgraph Netlify["Netlify"]
        NETLIFY_BUILD[Build]
        NETLIFY_CDN[CDN]
        NETLIFY_DEPLOY[Deploy Previews]
    end

    subgraph npm["npm Registry"]
        NPM_PUBLISH[Package Publish]
        NPM_PREVIEW[pkg-pr-new<br/>PR Preview]
    end

    subgraph Monitoring["モニタリング"]
        CODECOV[Codecov]
        SIZE_CHECK[compressed-size-action]
    end

    REPO -->|webhook| NETLIFY_BUILD
    NETLIFY_BUILD --> NETLIFY_CDN
    REPO -->|PR webhook| NETLIFY_DEPLOY

    ARTIFACTS -->|release| NPM_PUBLISH
    ARTIFACTS -->|PR preview| NPM_PREVIEW

    ACTIONS -->|coverage upload| CODECOV
    ACTIONS -->|size report| SIZE_CHECK
```

## ワークフロー依存関係図

```mermaid
flowchart TB
    subgraph ProdWorkflow["prod-test.yml"]
        P_BUILD[_build.yml<br/>Build]
        P_LINT[Lint]
        P_TEST[Test Matrix]
        P_BROWSER[Browser Test]
        P_CLI[CLI Test]
        P_PREVIEW[Preview Release]

        P_BUILD --> P_LINT
        P_BUILD --> P_TEST
        P_BUILD --> P_BROWSER
        P_BUILD --> P_CLI
        P_BUILD --> P_PREVIEW
    end

    subgraph DevWorkflow["dev-test.yml"]
        D_TEST[Test Matrix]
        D_COVERAGE[Coverage Upload]

        D_TEST --> D_COVERAGE
    end

    subgraph LintWorkflow["lint.yml"]
        L_DEPS[Check Dependencies]
        L_TYPECHECK[TypeScript Check]
        L_ESLINT[ESLint]
        L_PRETTIER[Prettier]
        L_SPELL[Spellcheck]
        L_CHANGELOG[Changelog Lint]
        L_FORMAT[Format Test Lint]
        L_DOCS[Docs Code Block]
        L_ACTIONLINT[Workflow Lint]
        L_DEP_REVIEW[Dependency Review]
        L_RENOVATE[Renovate Config]
        L_YARN[Yarn Dedupe]
        L_KNIP[Knip]
    end

    subgraph BundlerWorkflow["bundler-friendly.yml"]
        B_BUILD[_build.yml<br/>Build]
        B_WEBPACK[Webpack Bundle Test]

        B_BUILD --> B_WEBPACK
    end
```

## セキュリティ構成図

```mermaid
flowchart TB
    subgraph SecurityLayers["セキュリティレイヤー"]
        subgraph CodeSecurity["コードセキュリティ"]
            CODEQL[CodeQL<br/>静的解析]
            ESLINT[ESLint<br/>コード品質]
        end

        subgraph DependencySecurity["依存関係セキュリティ"]
            RENOVATE[Renovate<br/>自動更新]
            DEP_REVIEW[Dependency Review<br/>脆弱性チェック]
        end

        subgraph PermissionControl["権限管理"]
            READ_ONLY[contents: read<br/>標準ワークフロー]
            SECURITY_WRITE[security-events: write<br/>CodeQL]
            PR_WRITE[pull-requests: write<br/>サイズチェック]
        end
    end

    subgraph Alerts["アラート"]
        GH_SECURITY[GitHub Security Alerts]
        PR_BLOCK[PRブロック]
    end

    CODEQL --> GH_SECURITY
    DEP_REVIEW --> PR_BLOCK
```

## デプロイメントフロー図

```mermaid
sequenceDiagram
    participant Dev as 開発者
    participant GH as GitHub
    participant Actions as GitHub Actions
    participant Netlify as Netlify
    participant npm as npm Registry

    Dev->>GH: Push / PR作成
    GH->>Actions: ワークフロートリガー

    Actions->>Actions: ビルド実行
    Actions->>Actions: テスト実行
    Actions->>Actions: Lint実行

    alt PRの場合
        Actions->>GH: PRステータス更新
        GH->>Netlify: Deploy Previewトリガー
        Netlify->>Netlify: プレビュービルド
        Actions->>npm: pkg-pr-new プレビュー公開
    end

    alt mainブランチの場合
        GH->>Netlify: 本番デプロイトリガー
        Netlify->>Netlify: 本番ビルド・デプロイ
    end

    alt リリースの場合
        Dev->>GH: リリースタグ作成
        Actions->>npm: パッケージ公開
    end
```
