Skip to content
Development
Skill

/data-flow

Generates a Mermaid sequence diagram showing how data moves between components. Use when tracing request flows or documenting data transformation pipelines.

From plugin
claude-night-market
343200 skills60 agents162 commands1 MCP

Claude Code

$ npx -y skills add athola/claude-night-market --skill data-flow --agent claude-code

SKILL.md

data-flow.SKILL.md
name: data-flow
description: Generates a Mermaid sequence diagram showing how data moves between components. Use when tracing request flows or documenting data transformation pipelines.

Data Flow Diagram

Generate a Mermaid sequence diagram showing how data moves between components in a codebase.

When To Use

  • Tracing how a request flows through the system
  • Understanding data transformation pipelines
  • Documenting API call chains
  • Answering "what happens when X is called?"

When NOT To Use

  • Static call structure (use `cartograph:call-chain`)
  • Process steps and state transitions (use `cartograph:workflow-diagram`)

Workflow

Step 1: Explore the Codebase

Dispatch the codebase explorer agent:

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.

Step 2: Generate Mermaid Syntax

Transform the structural model into a Mermaid sequence diagram.

**Rules for data flow diagrams**:

  • Use `sequenceDiagram` for request/response flows
  • Participants are modules or components (not functions)
  • Arrows show data direction: `->>` for calls,

`-->>` for returns

  • Use `activate`/`deactivate` for long-running operations
  • Add `Note over` for data transformations
  • Limit to 8-10 participants maximum
  • Use `alt`/`else` for conditional flows
  • Handle circular calls by showing them once with a note

**Example output**:

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 "..."

Step 3: Render via MCP

Call the Mermaid Chart MCP to render:

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"

If rendering fails, fix syntax and retry (max 2 retries).

Step 4: Present Results

Show the rendered diagram with a brief description of the flow depicted (2-3 sentences).

Exit Criteria

  • [ ] Mermaid `sequenceDiagram` syntax generated with participants

and at least one `->>` call arrow

  • [ ] `mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram`

called with `diagramType: "sequenceDiagram"` and returns without error (or retry attempted on first failure)

  • [ ] Participant count is at most 10; if more components exist,

they are aggregated and the aggregation noted

  • [ ] A 2-3 sentence description of the depicted flow is shown

alongside the rendered diagram

  • [ ] Return arrows (`-->>`) are present for any request that has

a corresponding response in the traced flow

Read more
@athola
Ships withclaude-night-market

A plugin marketplace for Claude Code. Install only the plugins you need to run git workflows, code review, spec-driven development, and autonomous agents from inside your Claude Code session.

343200 skills60 agents1 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
343
Star history of athola/claude-night-market on GitHub, a chart by star-history.com

Other skills on claude-night-market.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc13d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about data-flow.

Which coding agents can use data-flow?
data-flow installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.