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