アーキテクチャ図 (C4 / Structurizr)¶

waste-link のアーキテクチャを C4 モデルで表します。正準の定義は Structurizr DSL ファイル workspace.dsl にあります。GitHub 上で .md を直接閲覧するときにも概観できるよう、同じ構成を Mermaid で簡略表現した補助図も掲載します。

典拠: apps/web (ADR 0014)、apps/api (ADR 0009)、apps/mobile、 Supabase (ADR 0002 / 0003)、apps/api/src/ocr/vision.ts (Google Cloud Vision) + apps/api/src/ocr/extractor.ts (Claude 構造化抽出) — manifests.ts (マニフェスト OCR) / vehicle-costs.ts (請求書 OCR) が利用、scripts/invite-org.mjs (Resend)。

システムコンテキスト (補助図)¶

flowchart LR
    discharger["排出事業者"]
    staff["処理業者スタッフ<br/>admin / normal"]
    driver["ドライバー"]
    operator["運営"]

    wl["waste-link<br/>マニフェスト管理 SaaS"]
    resend["Resend<br/>メール送信"]
    vision["Google Cloud Vision<br/>OCR テキスト抽出"]
    claude["Anthropic Claude<br/>構造化抽出 (LLM)"]

    discharger --> wl
    staff --> wl
    driver --> wl
    operator --> wl
    wl -->|招待メール| resend
    wl -->|OCR: 画像→テキスト| vision
    wl -->|OCR: テキスト→構造化 JSON| claude

OCR は 2 段構成: Google Cloud Vision (DOCUMENT_TEXT_DETECTION・日本語) でテキスト抽出 → Anthropic Claude (structured outputs。Haiku → 低スコア時 Opus 再抽出) で構造化。マニフェスト取込 (manifests.ts) と車両コスト請求書取込 (vehicle-costs.ts) が共有する。

コンテナ図 (補助図)¶

workspace.dsl の Container ビューと同じ構成です。Web / Mobile は Supabase に直接 (JWT + RLS) アクセスし、特権操作 (招待・メンバー管理・OCR) のみ API (service_role) を経由します。

flowchart LR
    discharger["排出事業者"]
    staff["処理業者スタッフ"]
    driver["ドライバー"]
    operator["運営"]

    subgraph wl["waste-link"]
        web["Web SPA<br/>Vite+React / CF Pages"]
        mobile["Mobile<br/>Expo / RN ・開発中"]
        api["API<br/>Hono / CF Workers"]
        script["運用スクリプト<br/>invite-org.mjs"]
        auth["Auth<br/>Supabase Auth"]
        db[("Database<br/>Supabase Postgres + RLS")]
    end

    resend["Resend"]
    vision["Google Cloud Vision"]
    claude["Anthropic Claude"]

    discharger --> web
    staff --> web
    driver --> web
    driver -.-> mobile
    operator --> script

    web -->|ログイン| auth
    web -->|RLS 直接| db
    web -->|特権操作| api
    mobile -->|ログイン| auth
    mobile -->|RLS 直接| db
    api -->|service_role| db
    api -->|Admin API| auth
    api -->|OCR: 画像→テキスト| vision
    api -->|OCR: 構造化抽出| claude
    script -->|service_role| db
    script -->|招待メール| resend

Structurizr DSL のレンダリング方法¶

正準の C4 定義は workspace.dsl です。Mermaid 補助図は概観用で、正確な C4 ビュー (SystemContext / Container) は以下のいずれかでレンダリングします。

Structurizr Lite (ローカル / Docker)structurizr.com (ホスト版)structurizr-cli (静的エクスポート)

# docs/diagrams を /usr/local/structurizr にマウントして起動
docker run -it --rm -p 8080:8080 \
  -v "$(pwd)/docs/diagrams:/usr/local/structurizr" \
  structurizr/lite
# ブラウザで http://localhost:8080 を開く (workspace.dsl を自動読込)

structurizr.com でワークスペースを作成。
workspace.dsl の内容を DSL エディタに貼り付ける。
SystemContext / Container ビューを表示・エクスポート (PNG/SVG/PlantUML 等)。

# 例: PlantUML 形式へエクスポート (別途 PlantUML でレンダリング)
structurizr-cli export -workspace docs/diagrams/workspace.dsl -format plantuml

DSL の検証状況

workspace.dsl の構文は目視で確認しています。本リポジトリの CI には structurizr-cli を組み込んでいないため、自動レンダリング検証は行っていません。図を更新する場合は上記いずれかの方法でレンダリングし、内容を確認してください。

ビュー一覧¶

ビュー	種別	内容
SystemContext	System Context	4 アクター (排出事業者 / 処理業者スタッフ / ドライバー / 運営) と外部システム (Resend / Google Cloud Vision / Anthropic Claude) との関係。
Containers	Container	Web SPA / Mobile / API / 運用スクリプト / Database / Auth と、外部システムとの関係。