mcpField
D
data-flow

data-flow

github.com/athola開発34383 回インストール1 日前に更新
リポジトリ

data-flow について

data-flowは、コードベース内のリクエストやデータの流れを追跡し、Mermaidのシーケンス図にまとめるスキルです。コードの調査から図の生成・レンダリングまでを案内し、処理やAPI呼び出し経路を調べる開発者向けです。

主な機能

  1. 01コードベースのデータフロー調査
  2. 02Mermaidシーケンス図の生成
  3. 03リクエストとレスポンスの対応付け
  4. 04データ変換の注記
  5. 05図の検証とレンダリング

活用シーン

  1. 01システムコンポーネント間のリクエスト追跡
  2. 02データ変換パイプラインの文書化
  3. 03API呼び出し経路の記録
  4. 04機能呼び出し後の処理調査

MCP 対応

Mermaid Chart MCPを使って、生成したシーケンス図を検証・レンダリングします。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/athola/claude-night-market --skill data-flow

インストール後、Claude Code で/data-flowを入力して読み込まれたか確認します。

詳細

データフロー図

コードベース内のコンポーネント間でデータがどのように流れるかを示す Mermaid シーケンス図を生成します。

使用する場面

  • システム内でリクエストがどのように処理されるかを追跡する
  • データ変換パイプラインを理解する
  • API 呼び出しチェーンを文書化する
  • 「X が呼び出されると何が起きるか？」に答える

使用しない場面

  • 静的な呼び出し構造（cartograph:call-chain を使用）
  • プロセスの手順と状態遷移（cartograph:workflow-diagram を使用）

ワークフロー

手順 1：コードベースを調査する

コードベースエクスプローラーエージェントを起動します。

Agent(cartograph:codebase-explorer)
Prompt: Explore [scope] and return a structural model.
Focus on function calls, data transformations, and
inter-module communication for a data flow diagram.
手順 2：Mermaid 構文を生成する

構造モデルを Mermaid シーケンス図に変換します。

データフロー図のルール：

  • リクエスト／レスポンスのフローには sequenceDiagram を使用します
  • 参加者には関数ではなく、モジュールまたはコンポーネントを指定します
  • 矢印はデータの方向を示します。呼び出しには ->>、戻り値には -->> を使用します
  • 長時間実行される処理には activate／deactivate を使用します
  • データ変換には Note over を追加します
  • 参加者は最大 8～10 個に制限します
  • 条件分岐には alt／else を使用します
  • 循環呼び出しは注記を添えて一度だけ示します

出力例：

sequenceDiagram
    participant User
    participant Command as /commit
    participant Sanctum as sanctum.commit
    participant Leyline as leyline.git_platform
    participant Git

    User->>Command: /commit
    Command->>Sanctum: generate_message()
    Sanctum->>Leyline: get_staged_changes()
    Leyline->>Git: git diff --cached
    Git-->>Leyline: diff output
    Leyline-->>Sanctum: structured changes
    Note over Sanctum: Classify change type
    Sanctum-->>Command: commit message
    Command->>Git: git commit -m "..."
手順 3：MCP 経由でレンダリングする

Mermaid Chart MCP を呼び出してレンダリングします。

mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram
  prompt: "Data flow diagram of [scope/feature]"
  mermaidCode: [generated syntax]
  diagramType: "sequenceDiagram"
  clientName: "claude-code"

レンダリングに失敗した場合は、構文を修正して再試行します（最大 2 回）。

手順 4：結果を提示する

レンダリングされた図と、図が示すフローの簡単な説明（2～3 文）を提示します。

完了条件

  • 参加者と少なくとも 1 つの ->> 呼び出し矢印を含む Mermaid sequenceDiagram 構文が生成されている
  • mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram が diagramType: "sequenceDiagram" を指定して呼び出され、エラーなく返されている（または初回失敗時に再試行されている）
  • 参加者数が最大 10 個である。コンポーネントがそれ以上ある場合は集約し、その旨を注記している
  • 描画された図とともに、図が示すフローの説明が 2～3 文で表示されている
  • 追跡対象のフロー内でリクエストに対応するレスポンスがある場合、戻り矢印（-->>）が含まれている

コメント

Markdown 対応