Data Flow
Generate a Mermaid sequence diagram that shows how requests and data move between modules so you can explain or debug flows without drawing diagrams by hand.
Overview
Data Flow is an agent skill for the Build phase that explores your codebase and generates a Mermaid sequence diagram documenting how data moves between components.
Install
npx skills add https://github.com/athola/claude-night-market --skill data-flowWhat is this skill?
- Two-step workflow: codebase explorer agent first, then Mermaid sequenceDiagram generation
- Sequence-diagram rules: 8–10 participants max, activate/deactivate, alt/else, Notes for transformations
- Models request/response with ->> and -->> at module/component level (not per-function noise)
- Handles circular calls once with a note instead of cluttering the diagram
- Answers “what happens when X is called?” from traced function calls and inter-module communication
- Limits diagrams to 8–10 participants maximum
- Uses a two-step workflow: explore codebase then generate Mermaid
Adoption & trust: 1 installs on skills.sh; 304 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You need to explain or verify “what happens when this endpoint or command runs,” but the call chain across modules is buried in scattered files.
Who is it for?
Solo builders documenting API or CLI request paths, agent tool chains, or ETL-style pipelines before handoff or refactor.
Skip if: Teams that only need a static C4 or deployment topology with no request-level tracing, or repos where an explorer agent cannot read the relevant scope.
When should I use this skill?
Tracing how a request flows through the system, understanding data transformation pipelines, documenting API call chains, or answering what happens when X is called.
What do I get? / Deliverables
You get a bounded, readable Mermaid sequence diagram you can commit to docs or share with reviewers after the explorer pass and diagram rules are applied.
- Mermaid sequenceDiagram block showing module-level request/response flow
- Structural notes for transformations and conditional branches
Recommended Skills
Journey fit
Canonical shelf is Build because the skill turns live code structure into architecture documentation while you are still shaping the product. Docs is the best fit: output is explicit sequence-diagram documentation for pipelines and API call chains, not shipping gates or runtime ops.
How it compares
Use instead of ad-hoc chat explanations of call stacks when you want a repeatable sequence-diagram artifact tied to explored code structure.
Common Questions / FAQ
Who is data-flow for?
Solo and indie builders using Claude Code, Cursor, or similar agents who need sequence-level documentation of how requests traverse their system.
When should I use data-flow?
During Build when tracing a user request through services, documenting a data transformation pipeline, or mapping an API call chain before you ship or onboard someone new.
Is data-flow safe to install?
Review the Security Audits panel on this Prism page and your repo policy before running any agent that explores the filesystem; the skill itself outputs diagram text rather than executing your app.
SKILL.md
READMESKILL.md - Data Flow
# 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?" ## 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**: ```mermaid 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).