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.