Project Visualizer

Analyzes JavaScript/TypeScript codebases and generates interactive dependency graphs. Detects circular dependencies, tracks imports, and visualizes project architecture.

Features

• Interactive dependency graph visualization
• Circular dependency detection
• Import usage tracking
• Path alias resolution (@/* patterns)
• Next.js App Router support (route groups, dynamic routes, parallel routes, intercepting routes)
• Server/Client component detection
• Node.js framework detection (Express, NestJS, Fastify)
• Smart clustering by framework, density, or directory
• Multiple color schemes (default, Next.js)
• External dependency tracking
• Orphan file detection

Installation

pnpm install
pnpm build

Usage

# Basic usage
pnpm run visualize <project-path>

# With options
pnpm run visualize <project-path> --ignore-builds --color-scheme nextjs

# Show help
pnpm run visualize --help

# Example to visualize this repo to produce output similar to the example image.
pnpm run visualize . --ignore-builds

CLI Options

Option	Description
--ignore-builds	Ignore build directories (dist, .next, etc.)
--color-scheme <scheme>	Color scheme: default or nextjs
--output <file>	Output filename (default: project-visualization.html)
--no-framework-detection	Disable framework-specific clustering
--no-density-clustering	Disable density-based clustering
--density-threshold <n>	Files per folder before subdivision (default: 15)

Configuration

Create visualizer.config.js in your project root:

export default {
  colorScheme: 'nextjs',
  ignoreBuildDirs: true,
  clustering: {
    enableFrameworkDetection: true,
    enableDensityClustering: true,
    densityThreshold: 15
  },
  outputFile: 'project-visualization.html'
};

CLI arguments override config file settings.

Interactive Controls

• Mouse wheel: Zoom
• Click + drag: Pan
• Click node: View file details
• Search: Filter files by name
• Reset View: Return to default position
• Highlight Circular Deps: Show circular dependencies
• Hide/Show Tests: Toggle test file visibility
• Hide/Show External Deps: Toggle external dependencies

Output

Generates a standalone HTML file with embedded visualization. No external dependencies required to view.

License

MIT