# インフラ構成図

## システム全体構成図

```mermaid
flowchart TB
    subgraph Users["ユーザー"]
        Browser["ブラウザ"]
        API_Client["APIクライアント"]
    end

    subgraph Vercel["Vercel Platform"]
        subgraph Edge["Edge Network (CDN)"]
            EdgeFunctions["Edge Functions"]
            StaticAssets["静的アセット"]
        end

        subgraph Serverless["Serverless Functions"]
            NextJS["Next.js App Router"]
            APIRoutes["API Routes"]
        end

        subgraph VercelServices["Vercel Services"]
            VercelPostgres["Vercel Postgres"]
            EdgeConfig["Edge Config"]
        end
    end

    subgraph Supabase["Supabase"]
        SupabaseAuth["Supabase Auth"]
        SupabaseStorage["Supabase Storage (S3)"]
    end

    subgraph TriggerDev["Trigger.dev"]
        JobQueue["Job Queue"]
        Workers["Workers"]
    end

    subgraph ExternalAI["AI/ML Providers"]
        OpenAI["OpenAI API"]
        GoogleVertex["Google Vertex AI"]
        Anthropic["Anthropic"]
    end

    subgraph Payments["決済"]
        Stripe["Stripe"]
    end

    subgraph Monitoring["監視"]
        Sentry["Sentry"]
        Langfuse["Langfuse"]
        GTM["Google Tag Manager"]
    end

    subgraph GitHub["GitHub"]
        GitHubAPI["GitHub API"]
        GitHubWebhook["GitHub Webhooks"]
    end

    %% User connections
    Browser --> Edge
    API_Client --> APIRoutes

    %% Internal connections
    Edge --> Serverless
    NextJS --> VercelPostgres
    NextJS --> SupabaseAuth
    NextJS --> SupabaseStorage
    APIRoutes --> VercelPostgres
    APIRoutes --> TriggerDev

    %% External service connections
    NextJS --> ExternalAI
    Workers --> ExternalAI
    NextJS --> Stripe
    NextJS --> GitHubAPI
    GitHubWebhook --> APIRoutes

    %% Monitoring connections
    NextJS --> Sentry
    NextJS --> Langfuse
    Browser --> GTM

    %% Feature flags
    NextJS --> EdgeConfig
```

## データフロー図

```mermaid
flowchart LR
    subgraph Input["入力"]
        UserRequest["ユーザーリクエスト"]
        Webhook["Webhook"]
        Cron["Cron Job"]
    end

    subgraph Processing["処理"]
        NextJS["Next.js"]
        TriggerJob["Trigger.dev Job"]
    end

    subgraph DataStore["データストア"]
        Postgres["PostgreSQL"]
        VectorStore["pgvector"]
        ObjectStorage["Supabase Storage"]
    end

    subgraph AIServices["AIサービス"]
        LLM["LLMプロバイダー"]
        Embedding["Embedding API"]
    end

    subgraph Output["出力"]
        Response["HTTPレスポンス"]
        Stream["SSEストリーム"]
    end

    UserRequest --> NextJS
    Webhook --> NextJS
    Cron --> NextJS

    NextJS --> Postgres
    NextJS --> VectorStore
    NextJS --> ObjectStorage
    NextJS --> LLM
    NextJS --> Embedding
    NextJS --> TriggerJob

    TriggerJob --> Postgres
    TriggerJob --> LLM
    TriggerJob --> ObjectStorage

    NextJS --> Response
    NextJS --> Stream
```

## 認証フロー図

```mermaid
sequenceDiagram
    participant User as ユーザー
    participant Browser as ブラウザ
    participant NextJS as Next.js
    participant SupabaseAuth as Supabase Auth
    participant Provider as OAuth Provider
    participant DB as PostgreSQL

    User->>Browser: ログインボタンクリック
    Browser->>NextJS: /auth/connect/[provider]
    NextJS->>SupabaseAuth: OAuth開始
    SupabaseAuth->>Provider: 認証リダイレクト
    Provider->>User: 認可画面表示
    User->>Provider: 認可承認
    Provider->>NextJS: コールバック（認証コード）
    NextJS->>SupabaseAuth: トークン交換
    SupabaseAuth->>NextJS: アクセストークン
    NextJS->>DB: ユーザー情報保存
    NextJS->>Browser: セッションCookie設定
    Browser->>User: ダッシュボード表示
```

## ベクトル検索フロー図

```mermaid
flowchart TB
    subgraph Ingestion["インジェスト処理"]
        Source["データソース"]
        Chunker["チャンキング"]
        EmbeddingAPI["Embedding API"]
        VectorDB["pgvector"]
    end

    subgraph Query["クエリ処理"]
        UserQuery["ユーザークエリ"]
        QueryEmbed["クエリ埋め込み"]
        SimilaritySearch["類似度検索"]
        Results["検索結果"]
    end

    Source --> Chunker
    Chunker --> EmbeddingAPI
    EmbeddingAPI --> VectorDB

    UserQuery --> QueryEmbed
    QueryEmbed --> SimilaritySearch
    VectorDB --> SimilaritySearch
    SimilaritySearch --> Results
```

## Trigger.dev ジョブフロー図

```mermaid
flowchart TB
    subgraph Trigger["トリガー"]
        APICall["APIコール"]
        Schedule["スケジュール"]
    end

    subgraph TriggerDev["Trigger.dev"]
        Queue["ジョブキュー"]
        Worker["Worker"]
        Retry["リトライ処理"]
    end

    subgraph Jobs["ジョブ種別"]
        ContentGen["コンテンツ生成"]
        TaskRun["タスク実行"]
        KeyInvestigation["キー調査"]
    end

    subgraph Output["出力"]
        DB["データベース更新"]
        Notification["通知"]
    end

    APICall --> Queue
    Schedule --> Queue
    Queue --> Worker
    Worker --> Jobs
    Worker --> Retry
    Retry --> Queue
    Jobs --> DB
    Jobs --> Notification
```

## デプロイメントパイプライン図

```mermaid
flowchart LR
    subgraph Development["開発"]
        LocalDev["ローカル開発"]
        PR["Pull Request"]
    end

    subgraph CI["CI/CD"]
        GitHubActions["GitHub"]
        VercelBuild["Vercel Build"]
    end

    subgraph Environments["環境"]
        Preview["プレビュー環境"]
        Production["本番環境"]
    end

    LocalDev --> PR
    PR --> GitHubActions
    GitHubActions --> VercelBuild
    VercelBuild --> Preview
    PR -->|Merge to main| Production
```

## ネットワーク構成図

```mermaid
flowchart TB
    subgraph Internet["インターネット"]
        Users["ユーザー"]
    end

    subgraph VercelEdge["Vercel Edge Network"]
        direction TB
        CDN["CDN"]
        SSL["SSL/TLS終端"]
        EdgeFunc["Edge Functions"]
    end

    subgraph VercelRegion["Vercel Region"]
        Serverless["Serverless Functions"]
        Postgres["Vercel Postgres"]
    end

    subgraph ExternalServices["外部サービス"]
        direction TB
        Supabase["Supabase"]
        AI["AIプロバイダー"]
        Stripe["Stripe"]
        GitHub["GitHub"]
    end

    Users -->|HTTPS| CDN
    CDN --> SSL
    SSL --> EdgeFunc
    EdgeFunc --> Serverless
    Serverless --> Postgres
    Serverless --> ExternalServices
```
