https://github.com/corrupt952/voyager
https://github.com/corrupt952/voyager
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/corrupt952/voyager
- Owner: corrupt952
- License: mit
- Created: 2025-02-20T10:19:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-24T05:09:53.000Z (10 months ago)
- Last Synced: 2025-08-24T12:59:15.242Z (10 months ago)
- Language: TypeScript
- Size: 729 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Voyager - Vue Component Dependency Visualizer
Voyager generates beautiful, interactive dependency diagrams from your Vue.js components. Whether you're working on small or large applications, Voyager helps you visualize complex component relationships with ease.
## What's Voyager?
- **Beautiful UI & Interactive**: Clean design with intuitive features like panning, zooming, and filtering make it easy to understand even the most complex component relationships.
- **Simple Import Analysis**: Seamlessly analyze your Vue.js components and their dependencies without complex configuration.
- **Atomic Design Support**: Automatically detect and visualize your component hierarchy based on Atomic Design principles.
- **High Performance**: Optimized for both small and large projects, easily handling hundreds of components.
- **Fully Open-Source**: Shape Voyager to fit your team's needs through contributions.
## Features
- 📊 Simple import analysis for dependency visualization
- 🎨 Intuitive graph visualization
- 🔍 Automatic Atomic Design hierarchy detection
- 📁 Directory-based component grouping
- 🔄 Interactive dependency exploration
## Quick Start
```bash
# Install Voyager CLI
npm install -g @voyager-vue/cli
# Or use npx directly
npx @voyager-vue/cli graph src/
# Run in your Vue.js project
cd /path/to/your/vue-project
# Generate interactive dependency graph
voyager graph src/
# Show dependencies for a specific file
voyager deps src/ -t components/MyComponent.vue
# Show project statistics
voyager stats src/
```
## Commands
### `voyager graph `
Generate an interactive HTML dependency graph.
```bash
# Basic usage
voyager graph src/
# Custom output file
voyager graph src/ -o my-graph.html
# With custom ignore patterns
voyager graph src/ --ignore "**/*.config.js" "**/*.mock.js"
```
### `voyager deps `
Show dependencies for a specific file.
```bash
# Show direct dependencies only
voyager deps src/ -t components/Button.vue
# Show dependencies up to depth 3
voyager deps src/ -t components/Button.vue -d 3
# Show all dependency levels
voyager deps src/ -t components/Button.vue -d all
# Output as JSON
voyager deps src/ -t components/Button.vue --json
```
Example output:
```
App.vue
├── imports (2):
│ ├── ./components/Header.vue
│ └── ./components/Footer.vue
└── imported by: none
```
### `voyager stats `
Display component statistics and analysis.
```bash
# Show statistics
voyager stats src/
# Output as JSON for CI/CD integration
voyager stats src/ --json
```
## Roadmap
- 🔄 Vuex store and component relationship visualization
- 📝 Detailed Props and Emit relationship display
- ✅ Test coverage integration
- 📊 Performance analysis features
Visit our [GitHub Projects](https://github.com/corrupt952/voyager/projects) page to see what we're working on.
## Documentation
Coming soon...
## Contributing
Thank you for your interest in contributing to Voyager!
Contribution guidelines are currently in preparation.
**If you find this project helpful, please give it a star! ⭐**
Your support helps us reach a wider audience and continue development.
## License
This project is licensed under the [MIT License](./LICENSE).
## Author
- [K@zuki.](https://zuki.dev)