M Mighty Skill-BridgeSequence Diagrams · Architecture ← 公開デモへ戻る
Architecture Reference · 4 Flows

動作と関係者を、1 枚で説明する。

Mighty Skill-Bridge プロジェクトの主要 4 フローを Mermaid sequence diagram で図化しました。 SaaS / SSO 系プロジェクトで一般的なシーケンス図と同形式 (フェーズ色分け + autonumber + 並列/分岐表記) で、関係者向けに「誰が・いつ・何を呼ぶか」を一望できます。

Sourcedocs/SEQUENCE_DIAGRAMS.md RenderMermaid 11.x (CDN) ThemeMighty cyber Updated2026-05-26

Index

PATTERN 01

AI フィット診断フロー

User → FastAPI → Gemini live / fallback、parse 並列 + match 直列

 PATTERN 02

Mock フォールバック

公開 Pages 環境で `_mock.js` が `/api/*` 404 検出 → mock 切替

 PATTERN 03

3-tool 開発フロー

Claude / Codex / Antigravity + main→master + Sheets/Calendar sync

 PATTERN 04

採用 LP エントリー

求人媒体 → LP → 公開デモ体験 → mailto → カジュアル面談
Pattern 01 · AI Fit Diagnosis

AI フィット診断フロー (ローカル `python src/app.py`)

ローカル起動時の本物 Gemini パス。経歴 + 案件 → 4 軸スコア + 推奨質問 + 3 週ロードマップ。
sequenceDiagram
    autonumber
    participant User as User
(ブラウザ)
    participant Root as 公開デモ
(http://localhost:8000/)
    participant API as FastAPI
(src/app.py)
    participant Gemini as Gemini API
(2.x multimodal)
    participant Audit as Audit Log
(exports/audit/)
    participant Fallback as Deterministic
Fallback (BM25 + rules)

    rect rgb(36, 56, 92)
        Note over User,Root: ① フェーズ1: 公開デモ初期表示
        User->>Root: GET / (公開デモアクセス)
        Root-->>User: index.html (hero / 4-pillar / Step1 入力 UI)
        User->>User: Step1 経歴 + 案件を貼り付け
or Load Sample x2 でサンプル投入
    end

    rect rgb(36, 80, 56)
        Note over User,Audit: ② フェーズ2: 並列 parse (経歴 + 案件)
        User->>API: POST /api/parse (engineer, text)
        User->>API: POST /api/parse (job, text) — 並列
        par engineer parse
            API->>Gemini: prompt = parse engineer doc
(structured extract)
            Gemini-->>API: parsed_text + structured profile
        and job parse
            API->>Gemini: prompt = parse job doc
            Gemini-->>API: parsed_text + structured profile
        end
        API->>Audit: append_external_api_event
(operation=parse, billable=true)
        API-->>User: 2x { parsed_text, structured, audit }
    end

    rect rgb(90, 70, 30)
        Note over User,Fallback: ③ フェーズ3: 4 軸 match + ロードマップ生成
        User->>API: POST /api/match { engineer_content, job_content }
        alt Gemini quota 内
            API->>Gemini: prompt = JSON schema 強制
(final_score, scores{4軸}, summary, qa[], roadmap_week1/2/3)
            Gemini-->>API: JSON 応答
        else Gemini quota 枯渇 or live error
            API->>Fallback: build_fallback_match(engineer, job)
            Fallback-->>API: 同一スキーマ (live と差異なし)
            Note over API: 上流クライアントは live/fallback を意識しない
        end
        API->>Audit: append_external_api_event
(operation=match, outcome=success/blocked)
        API-->>User: { final_score, scores, summary, qa, roadmap }
        User->>User: radar chart + gauge + QA accordion 描画
    end
Pattern 02 · Mock Fallback

公開 Pages の Mock フォールバック (バックエンドなし環境)

GitHub Pages から WF / LP / Recruit カタログにアクセスした場合の動作。`_mock.js` が `/api/*` の 404 を検出して固定 hash mock 応答に切り替える。
sequenceDiagram
    autonumber
    participant User as User
(ブラウザ)
    participant Pages as GitHub Pages
(kanta13jp1.github.io/
mighty-link-ai-connect/)
    participant WF as WF Demo
(exports/wireframes/wf-XX.html)
    participant Mock as _mock.js
(fetch monkey-patch)
    participant Banner as デモバナー
(DOM 赤帯)

    rect rgb(36, 56, 92)
        Note over User,Pages: ① フェーズ1: WF/LP カタログから WF 起動
        User->>Pages: GET /exports/wireframes/wf-03.html
        Pages-->>User: HTML + script src="_mock.js"
        User->>Mock: スクリプト実行
(window.fetch を上書き)
    end

    rect rgb(110, 38, 50)
        Note over User,Banner: ② フェーズ2: 実 API の存在確認 → mock 切替
        User->>Mock: GET /api/health (起動時 health check)
        Mock->>Pages: REAL_FETCH("/api/health")
        Pages-->>Mock: HTTP 404 (Pages は静的のみ)
        Mock->>Banner: showBanner()
"🧪 デモモード: バックエンド未接続"
        Banner-->>User: 赤帯バナー表示
    end

    rect rgb(90, 70, 30)
        Note over User,Mock: ③ フェーズ3: WF 操作 → mock 応答で動作
        User->>WF: 経歴 + 案件を入力 → Analyze
        WF->>Mock: fetch("/api/parse", { engineer })
        Mock->>Pages: REAL_FETCH (404)
        Mock->>Mock: fakeRoute("/api/parse")
= mockParse(text, doc_type)
        Mock-->>WF: { parsed_text: "[MOCK]...", audit: fallback }
        WF->>Mock: fetch("/api/match", { engineer, job })
        Mock->>Mock: fakeRoute("/api/match")
= mockMatch(seed=hash(eng+job))
        Mock-->>WF: { final_score, scores{4軸}, summary, qa, roadmap }
        WF-->>User: スコア・サマリ・ロードマップ描画
(固定 hash で再現性ある mock データ)
    end

    Note over User,Banner: 注: ローカル python src/app.py 起動時は
/api/health が 200 → mock は no-op pass-through
= 本物の Gemini が動く
Pattern 03 · Dev Workflow

開発フロー (3-tool AI 体制 + WBS / Sheets / Calendar 同期)

Claude Code (architect/docs/UI) / VSCode + Codex (実装/sync scripts) / Antigravity + Gemini (frontend polish/demo video) の 3-tool 並走。WBS / 課題管理表 / QA表 の 3 タブを Google Sheets に同期、Calendar に WBS イベントを反映 (完了は自動削除)。
sequenceDiagram
    autonumber
    participant Dev as 開発者
(寛太)
    participant Claude as Claude Code
(architect/docs)
    participant Codex as VSCode + Codex
(実装/PR)
    participant Antig as Antigravity + Gemini
(polish/demo)
    participant Repo as GitHub Repo
(mighty-link-ai-connect)
    participant Sheets as Google Sheets
(WBS + Issues + QA)
    participant Cal as Google Calendar
(Mighty Skill-Bridge)
    participant Pages as GitHub Pages
(公開デモ URL)

    rect rgb(36, 56, 92)
        Note over Dev,Antig: ① フェーズ1: タスク振り分け (3-tool ルール)
        Dev->>Claude: docs / triage / UI design task
(例: HANDOFF-36 採用 LP)
        Claude-->>Dev: PR 作成 → squash merge
([claude] commit prefix)
        Dev->>Codex: 実装 / sync スクリプト編集
(例: data/WBS.tsv の flip)
        Codex-->>Dev: scoped PR → merge ([codex])
        Dev->>Antig: frontend polish / demo video
(Gemini quota 内)
        Antig-->>Dev: 視覚 polish PR ([antigravity])
    end

    rect rgb(36, 80, 56)
        Note over Dev,Pages: ② フェーズ2: main → master → Pages 反映
        Dev->>Repo: git push origin feat/XXX
        Repo->>Repo: PR squash-merge to main
        Dev->>Repo: git push origin main:master
        Repo->>Pages: GitHub Pages 自動ビルド (master)
        Pages-->>Dev: 公開 URL 反映 (1-2 分)
        Dev->>Repo: python scripts/verify_public_demo.py --url Pages_URL
        Repo-->>Dev: REQUIRED_MARKERS 確認 + 200 OK
    end

    rect rgb(90, 70, 30)
        Note over Dev,Cal: ③ フェーズ3: Sheets + Calendar 同期 (毎セッション末)
        Dev->>Sheets: python scripts/sync_wbs_to_sheets.py
        Note over Sheets: WBS / 課題管理表 / QA表 の 3 タブ更新
(同一 OAuth で 3 タブ同時)
        Sheets-->>Dev: 完了 (109 WBS + 55 issues + 48 QA など)
        Dev->>Cal: python scripts/sync_wbs_to_calendar.py
        Note over Cal: WBS の ステータス==完了 行 →
該当 Calendar event を DELETE
(タイトル一致で照合)
        Cal-->>Dev: Active: 13, Updated: 13,
Deleted completed: N
        Dev->>Repo: data/issues_tracker.tsv に
HANDOFF-XX 追記 (resolved)
    end
Pattern 04 · Recruit Entry

採用 LP エントリーフロー (HANDOFF-36 で新設)

掲載型採用前提の 1 枚 LP。エントリー前に弊社特徴を伝え、`careers@ml-mightylink.com` mailto で接点を作る。Workspace ドメインの社内アドレスで受信。
sequenceDiagram
    autonumber
    participant Cand as 候補者
(社外エンジニア)
    participant SNS as 求人媒体
(Wantedly / X / 紹介)
    participant LP as 採用 LP
(exports/recruit/index.html)
    participant Demo as 公開デモ
(root index.html)
    participant Mail as 候補者のメーラー
    participant Inbox as careers@
ml-mightylink.com
(Workspace)
    participant HR as 採用担当
(寛太 + サポート)

    rect rgb(36, 56, 92)
        Note over Cand,LP: ① フェーズ1: LP 到達 + 自己理解
        Cand->>SNS: 求人情報を見る
        SNS-->>Cand: LP URL リンクをクリック
        Cand->>LP: GET /exports/recruit/index.html
        LP-->>Cand: Hero (採用 eyebrow + メイン CTA)
        Cand->>LP: scroll → Why us 4-pillar
        LP->>LP: IntersectionObserver で fade-in
        Cand->>LP: scroll → Product highlight
        LP-->>Cand: Skill-Bridge への動線 + サンプル score panel
    end

    rect rgb(36, 80, 56)
        Note over Cand,Demo: ② フェーズ2: プロダクト体験 (任意)
        Cand->>LP: "プロダクトを見る" CTA クリック
        LP-->>Cand: ../../ (= root index.html) へ遷移
        Cand->>Demo: 公開デモで AI フィット診断を体験
        Note over Demo: パターン2 (Mock フォールバック)
= バナー赤帯 + 固定 hash mock が動作
        Demo-->>Cand: 4 軸スコア + サマリ + roadmap 確認
        Cand->>LP: ブラウザ Back で LP へ戻る
        Cand->>LP: Roles → Process → FAQ を確認
    end

    rect rgb(90, 70, 30)
        Note over Cand,HR: ③ フェーズ3: エントリー (mailto) → カジュアル面談
        Cand->>LP: "▶ careers@ml-mightylink.com" クリック
(Apply CTA mailto link)
        LP->>Mail: mailto:careers@... 起動
(subject / body プリフィル)
        Mail-->>Cand: 候補者のメーラーに自動作成
(お名前 / 興味ロール / 自己紹介 URL の空欄)
        Cand->>Inbox: 必須欄を埋めて送信
        Inbox->>HR: Workspace 受信 (k-umezawa@ml-mightylink.com 配下)
        HR->>Cand: 24h 以内に返信 (カジュアル面談 30 分の日程調整)
        Note over Cand,HR: その後の 4-step process:
カジュアル面談 → 技術対話 → 1 日 trial → オファー
(最短 2 週間で完了)
    end

メモ