3d-repo-visualizer

1.0.0 • Public • Published

3D Repository Visualizer

🚀 3D visualization tool for software repositories

Transform your codebase into an interactive 3D visualization to understand code structure, dependencies, and information flow.

Features

  • 📊 Multi-language support: JavaScript, TypeScript, Python
  • 🎯 Interactive 3D visualization: Navigate through your code in 3D space
  • 🔍 Dependency tracking: Visualize function calls, imports, and variable usage
  • 🎨 Multiple visualization modes: Static hierarchical view and dynamic network view
  • 🌐 Web interface: Modern, responsive UI with real-time interaction
  • Fast analysis: Efficient AST parsing and graph generation

Installation

Global Installation (Recommended)

npm install -g 3d-repo-visualizer

Local Installation

npm install 3d-repo-visualizer
npx 3d-repo --help

Quick Start

  1. Analyze your repository:

    3d-repo --root-dir /path/to/your/project
  2. Open your browser and navigate to http://localhost:8080

  3. Explore your code in 3D!

Usage

Basic Usage

# Analyze current directory
3d-repo

# Analyze specific directory
3d-repo --root-dir ./my-project

# Use custom port
3d-repo --port 3000

# Include specific file patterns
3d-repo --include "**/*.{js,py,java}"

# Exclude patterns
3d-repo --exclude "node_modules/**" "*.test.*"

Command Line Options

Option Description Default
-r, --root-dir <path> Root directory to analyze Current directory
-p, --port <number> Port for web server 8080
-i, --include <patterns...> Include file patterns **/*.{js,ts,jsx,tsx,py}
-e, --exclude <patterns...> Exclude file patterns node_modules/**, dist/**, etc.
--max-depth <number> Maximum analysis depth 10
--no-server Skip starting web server false

Visualization Modes

  • Static Mode: Hierarchical tree structure with file containers
  • Dynamic Mode: Network layout with flowing particles showing information flow

Controls

Mouse Controls

  • Left click + drag: Rotate view
  • Right click + drag: Pan view
  • Scroll wheel: Zoom in/out
  • Click node: Select and show details

Keyboard Controls

  • WASD: Move camera (FPS-style)
  • Q/E: Move up/down
  • R: Reset view
  • F: Fit to screen
  • Shift: Fast movement

Supported Languages

  • JavaScript (.js)
  • TypeScript (.ts, .tsx)
  • JSX (.jsx)
  • Python (.py)

Requirements

  • Node.js 16+
  • Python 3 (for Python file analysis)
  • Modern web browser with WebGL support

Development

# Clone repository
git clone https://github.com/yourusername/3d-repo-visualizer.git
cd 3d-repo-visualizer

# Install dependencies
npm install

# Build project
npm run build

# Run in development mode
npm run dev

# Start server
npm start

Examples

Analyze a React project

3d-repo --root-dir ./my-react-app --include "**/*.{js,jsx,ts,tsx}"

Analyze a Python project

3d-repo --root-dir ./my-python-app --include "**/*.py" --exclude "**/__pycache__/**"

Quick analysis without server

3d-repo --root-dir ./project --no-server

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

MIT License - see LICENSE file for details.

Issues

Found a bug or have a feature request? Please open an issue on GitHub.

Package Sidebar

Install

npm i 3d-repo-visualizer

Weekly Downloads

4

Version

1.0.0

License

MIT

Unpacked Size

132 kB

Total Files

26

Last publish

Collaborators

  • kangthink