A package.json with 80 dependencies is hard to reason about as raw JSON. This tool groups them by type and flags version ranges worth a second look — like unpinned wildcards that could silently break a build.
What Is the Dependency Diagram?
Dependency Diagram is one of the tools in WebdevToolbox’s JavaScript Tools category. Paste a package.json and see its dependencies, devDependencies, peerDependencies, and optionalDependencies grouped, counted, and annotated with a version-range risk badge.
How to Use It
- Open the tool at /tools/dependency-diagram.
- Paste your
package.jsoncontent. - Review the per-group counts at the top and the annotated list below.
- Look for the red “unpinned” badge on any
*/latestversion ranges worth pinning down.
Key Features
- Grouped by dependency type — production, dev, peer, and optional dependencies shown separately.
- Version-range badges — caret, tilde, exact, and unpinned ranges are color-coded.
- Instant summary counts — see how many dependencies fall into each category at a glance.
- 100% local parsing — no npm registry lookups, no data leaves your browser.
When to Use the Dependency Diagram
- Auditing a project you just inherited — quickly get a feel for its dependency footprint.
- Spotting risky unpinned versions — before a routine
npm installpulls in an unexpected breaking change. - Comparing dev vs. production dependency counts — sanity-check what’s actually shipping to users.
Try It Now
Open Dependency Diagram directly from anywhere on the site using ⌘K and typing the tool name.
Part of the JavaScript Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.