---
name: visualize-code
description: Generate an interactive codebase visualization with tree and treemap views, git hotspot analysis, and line counts. Use when exploring a new repo, understanding project structure, or identifying large/frequently-changed files.
allowed-tools: Bash(python *), Bash(python3 *)
---

# Codebase Visualizer

Generate an interactive HTML visualization that shows your project's file structure with two views: a collapsible tree and a squarified treemap.

## Usage

Run the visualization script from your project root:

```bash
python ~/${CLAUDE_PLUGIN_ROOT}/skills/visualize-code/scripts/visualize.py .
```

This creates `codebase-map.html` in the current directory and opens it in your default browser.

## What the visualization shows

- **Tree view**: Collapsible directory tree with file sizes and line counts
- **Treemap view**: Squarified treemap showing file sizes as proportional rectangles — click directories to drill down, use breadcrumbs to navigate back
- **Git hotspot analysis**: Toggle "Hotspot" color mode to see which files are changed most frequently (blue = cold, red = hot) — requires a git repo with commit history
- **Line counts**: Displayed alongside byte sizes for all text files
- **.gitignore awareness**: In git repos, uses `git ls-files` to only show tracked/relevant files instead of a hardcoded ignore list
- **Colors**: Different colors for 30+ file extensions
- **Tooltips**: Hover any file or directory for details (size, lines, commits, file count)
- **Sidebar stats**: File count, directory count, total size, total lines, and file type breakdown