🚀 3D visualization tool for software repositories
Transform your codebase into an interactive 3D visualization to understand code structure, dependencies, and information flow.
- 📊 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
npm install -g 3d-repo-visualizer
npm install 3d-repo-visualizer
npx 3d-repo --help
-
Analyze your repository:
3d-repo --root-dir /path/to/your/project
-
Open your browser and navigate to
http://localhost:8080
-
Explore your code in 3D!
# 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.*"
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 |
- Static Mode: Hierarchical tree structure with file containers
- Dynamic Mode: Network layout with flowing particles showing information flow
- Left click + drag: Rotate view
- Right click + drag: Pan view
- Scroll wheel: Zoom in/out
- Click node: Select and show details
- WASD: Move camera (FPS-style)
- Q/E: Move up/down
- R: Reset view
- F: Fit to screen
- Shift: Fast movement
- JavaScript (.js)
- TypeScript (.ts, .tsx)
- JSX (.jsx)
- Python (.py)
- Node.js 16+
- Python 3 (for Python file analysis)
- Modern web browser with WebGL support
# 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
3d-repo --root-dir ./my-react-app --include "**/*.{js,jsx,ts,tsx}"
3d-repo --root-dir ./my-python-app --include "**/*.py" --exclude "**/__pycache__/**"
3d-repo --root-dir ./project --no-server
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
MIT License - see LICENSE file for details.
Found a bug or have a feature request? Please open an issue on GitHub.