A web application that visualizes dependencies from pnpm-lock.yaml files using D3.js force-directed graphs.

• File Upload: Drag and drop or click to upload pnpm-lock.yaml files
• Folder-based Visualization: Separate graphs for each workspace/folder in your project
• Interactive Force-Directed Graphs:
  • Drag nodes to reposition them
  • Zoom and pan to explore large dependency trees
  • Hover tooltips showing package details
• Customizable Layout: Adjust force simulation strength
• Color-coded Dependencies:
  • Blue: Main packages/workspaces
  • Green: Regular dependencies
  • Yellow: Dev dependencies
  • Purple: Optional dependencies
  • Red links: Dev dependency relationships
  • Teal links: Regular dependency relationships
  • Purple links: Optional dependency relationships

1. Open the application in your browser
2. Upload a pnpm-lock.yaml file by:
   • Dragging and dropping it onto the upload area, or
   • Clicking the upload area to browse for the file
   • Try it out: Use the included sample-pnpm-lock.yaml file to test the application
3. Select a folder from the dropdown menu to visualize its dependencies
4. Interact with the graph:
   • Drag nodes to reposition them
   • Use mouse wheel to zoom in/out
   • Pan by dragging empty space
   • Hover over nodes to see package details
5. Adjust the layout strength slider to change how tightly nodes cluster
6. Use "Reset Zoom" to return to the default view

• Frontend: Vanilla JavaScript with D3.js for visualization
• Backend: Hono server for serving static files
• Styling: TailwindCSS for responsive design

├── frontend/
│   ├── compact.html      # Main HTML template (optimized)
│   ├── simple-app.js     # JavaScript application logic
│   ├── index.html        # Original HTML template
│   ├── app.js           # Original JavaScript (large file)
│   └── simple.html      # Test HTML template
├── main.ts              # Hono server entry point
├── sample-pnpm-lock.yaml # Sample lockfile for testing
└── README.md            # This file

• D3.js v7 for force-directed graph visualization
• TailwindCSS for styling
• Hono for the web server

The application expects pnpm-lock.yaml files with the standard pnpm lockfile structure:

packages:
  /:
    dependencies:
      package-name: version
    devDependencies:
      dev-package: version
  /workspace-folder:
    dependencies:
      another-package: version

Works in all modern browsers that support:

• ES6+ JavaScript features
• SVG rendering
• File API for drag-and-drop uploads

• Currently supports pnpm-lock.yaml files only
• Uses a simplified YAML parser (works for standard pnpm lockfiles)
• Large dependency trees may impact performance
• No persistent storage - data is lost on page refresh