Vision DV is an interactive web application that visualizes your project's dependencies from a package.json file in a beautiful, interconnected graph. It helps developers understand their project's dependency structure through an intuitive visual interface.
- 📊 Interactive dependency visualization
- 🔄 Real-time graph updates
- 📁 Simple package.json file upload
- 🎨 Visual distinction between dependencies and devDependencies
- 🔍 Zoomable and pannable interface
- 📱 Responsive design
- Remix - Full-stack web framework
- React Flow - Highly customizable graph visualization
- Tailwind CSS - Utility-first CSS framework
- Lucide Icons - Beautiful and consistent icons
- shadcn/ui - Re-usable UI components
- Node.js 18.0.0 or later
- npm or yarn
- Clone the repository:
git clone https://github.com/yourusername/vision-dv.git
cd vision-dv- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
To visualize your project's dependencies:
- Locate your project's
package.jsonfile - Click the upload button in Vision DV
- Select your
package.jsonfile - Click "Visualize Dependencies"
The application will automatically generate an interactive visualization of your project's dependency structure.
-
Node Types:
- Root node (your project)
- Dependency nodes (regular dependencies)
- DevDependency nodes (development dependencies)
-
Visual Elements:
- Animated edges showing connections
- Color-coded nodes for different dependency types
- Interactive controls for zoom and pan
- Automatic layout organization
We welcome contributions! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Remix for the amazing web framework
- React Flow for the powerful graph visualization library
- shadcn/ui for the beautiful UI components
If you encounter any issues or have questions, please open an issue on GitHub.
Made with ❤️ by Nana Kwasi Asante