---
name: Codebase Visualizer
slug: codebase-visualizer
category: Automation
description: Codebase Visualizer generates an interactive tree visualization of a project structure. Use it when exploring a new repo or getting oriented in a large codebase.
github: "https://github.com/huangjia2019/claude-code-engineering/tree/main/04-Skills/projects/04-codebase-visualizer"
language: JavaScript
stars: 1077
forks: 379
install: "npx degit https://github.com/huangjia2019/claude-code-engineering/tree/main/04-Skills/projects/04-codebase-visualizer ~/.claude/skills/04-codebase-visualizer"
installs_to: ~/.claude/skills/04-codebase-visualizer
source_path: 04-Skills/projects/04-codebase-visualizer/SKILL.md
collection_size: 13
category_size: 1523
collection_url: "https://dirskills.com/collections/huangjia2019/claude-code-engineering"
added: 2026-08-21T05:13:26.302Z
last_synced: 2026-08-21T05:13:26.302Z
canonical_url: "https://dirskills.com/skills/codebase-visualizer"
---

# Codebase Visualizer

Codebase Visualizer generates an interactive tree visualization of a project structure. Use it when exploring a new repo or getting oriented in a large codebase.

**Install:**

```bash
npx degit https://github.com/huangjia2019/claude-code-engineering/tree/main/04-Skills/projects/04-codebase-visualizer ~/.claude/skills/04-codebase-visualizer
```

## README

Run the visualization script from your project root:

```bash
python .claude/skills/codebase-visualizer/scripts/visualize.py .
```

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