Dependency Graph Visualizer

A dependency graph is a directed graph where each node is a package and each edge shows that one package requires another. It helps visualize how packages relate, identify deeply nested dependencies, spot duplicate versions, and understand the weight of each top-level dependency. Tools like npm ls and yarn why generate these, but this tool lets you visualize them directly from package.json.

dependencies are packages required at runtime — they are bundled into production builds. devDependencies are only needed during development (testing, building, linting) and are not included in production bundles. peerDependencies are packages the host project must provide — common in plugin/library packages. Keeping these three groups correct reduces bundle size and security surface area.

Dependency depth is how many levels of indirection separate your code from a package. A depth-1 package is in your package.json. A depth-3 package is a dependency of a dependency of a dependency. Deep dependencies are harder to audit, easier to have multiple conflicting versions, and can cause supply chain security risks (as shown by the leftpad and event-stream incidents).

Run npx depcheck or npx knip to find unused packages. A package in package.json but never imported in your source code wastes bundle space and is a security liability. Regularly audit with npm ls and remove anything not actively used. Note: some tools like babel presets or webpack plugins are used via config files, not direct imports.

A circular dependency is when package A requires B and B requires A (directly or transitively). In Node.js, this can cause one module to receive an incomplete exports object. Tools like madge detect circular dependencies in your own source files. In npm packages, circular deps are prevented by npm's resolution algorithm, but they can still cause subtle loading order issues.