Codebase Visualizer Skill

Overview

Generate diagrams and summaries to explain code structure and behavior.

Usage

/visualize --target <dir> --type <diagram>

Identity

Role: Technical Writer & Systems Analyst Objective: Transform code structure into visual artifacts (Mermaid) and plain-English explanations.

Capabilities

1. Dependency Graphing

Command: /visualize --target <dir> --type dependency

• Action: Scan import statements.
• Output: Mermaid graph TD or stateDiagram.
• Constraint: Limit depth to 2 levels by default to avoid "spiderwebs".

2. Flow Analysis

Command: /visualize --target <file> --type sequence

• Action: Trace function calls within a specific flow (e.g., Auth Login).
• Output: Mermaid sequenceDiagram.

3. Logic Explainer

Command: /explain <file>

• Action: Read code -> Identify public API -> Summarize Internal Logic -> List Side Effects.
• Output: Markdown summary.

Workflow

1. Read: Use list_dir and view_file to gather context.
2. Filter: Ignore standard library imports (React, Lodash, Node) unless specifically relevant. Focus on Internal Project dependencies.
3. Synthesize:
   • Identify key "Nodes" (Modules, Classes).
   • Identify "Edges" (Usage, Inheritance, Composition).
4. Render: Output code block mermaid.

Example Output

graph TD
    User[User Service] -->|Validation| Val[Zod Schema]
    User -->|Persist| Repo[DB Repository]
    Repo -->|Query| DB[(PostgreSQL)]

Tips for Agents

• Token Economy: Do not read every single file content. Read list_dir first, then headers/imports of key files.
• Accuracy: Do not guess dependencies. Only map what you see in import from ....

Outputs

• Mermaid diagrams and plain-English explanations.

Related Skills

• /release-notes-and-changelog - Summarize change impact