Important
This repository is archived and no longer maintained. Feel free to fork it if you'd like to continue development.
このリポジトリはアーカイブ済みで、メンテナンスを終了しています。開発を引き継ぎたい方はお気軽にフォークしてください。
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.
- 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.
- 📊 Simple import analysis for dependency visualization
- 🎨 Intuitive graph visualization
- 🔍 Automatic Atomic Design hierarchy detection
- 📁 Directory-based component grouping
- 🔄 Interactive dependency exploration
# 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/Generate an interactive HTML dependency graph.
# 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"Show dependencies for a specific file.
# 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 --jsonExample output:
App.vue
├── imports (2):
│ ├── ./components/Header.vue
│ └── ./components/Footer.vue
└── imported by: none
Display component statistics and analysis.
# Show statistics
voyager stats src/
# Output as JSON for CI/CD integration
voyager stats src/ --json- 🔄 Vuex store and component relationship visualization
- 📝 Detailed Props and Emit relationship display
- ✅ Test coverage integration
- 📊 Performance analysis features
Visit our GitHub Projects page to see what we're working on.
Coming soon...
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.
This project is licensed under the MIT License.