フロントエンドソースコードから画面遷移図をMermaid形式で自動生成するスキル。「画面遷移図を作って」「ページフローを可視化して」「ユーザーの導線を図にして」「画面一覧と遷移を出して」といった指示で発動する。ルーティング定義とコンポーネント内のナビゲーション処理を解析し、Mermaid stateDiagramで出力する。
作業開始前に、以下の設定ファイルを読み込んでください:
.claude/project-config.md — フロントエンドアプリケーション構造、遷移パターン、ルーティング定義位置フロントエンドのソースコードを解析し、画面遷移図をMermaid形式で生成します。
.claude/project-config.md の「フロントエンドアプリケーション」セクションを参照してください。
一般的には複数のフロントエンドアプリケーション（ユーザー向け、管理者向け、パートナー向けなど）が存在します。
各アプリは以下の共通構造を持つ:
frontend-app-*/
├── pages/ # ページコンポーネント（ルーティング定義）
├── components/ # UIコンポーネント
├── api/ # APIクライアント
├── store/ # 状態管理
├── types/ # 型定義
└── constants/ # 定数
ルーティング定義ファイル（.claude/project-config.md で指定）を再帰的に走査し、全ルートを収集する。
抽出ルール:
:id 等のプレースホルダで識別各ページファイルから以下を読み取る:
各ページおよびコンポーネントから画面遷移を抽出する。
検出パターン:
遷移パターン （.claude/project-config.md 参照）
条件付き遷移
リダイレクト
.claude/project-config.md 参照）各遷移について以下を記録する:
収集した情報をMermaid stateDiagram-v2形式で出力する。
出力フォーマットの詳細は references/mermaid-format.md を参照。
ユーザーの指示に応じてスコープを調整する:
ページ数が多い場合、1枚の図に詰め込むと可読性が下がる。以下の基準で分割する:
:id 等のプレースホルダで表現する