Dependency Diagram
NewPaste a package.json and visualize its dependencies grouped by type with version-range analysis.
Dependency diagram
Visualize a package.json dependency tree
Paste a package.json to see its dependencies grouped by type (production, dev, peer, optional), version ranges, and a rough count breakdown — all parsed locally.
Frequently Asked Questions
Which dependency fields does this read?
It reads dependencies, devDependencies, peerDependencies, and optionalDependencies — any other custom fields in your package.json are ignored.
What do the version-range badges (caret, tilde, exact, unpinned) mean?
Caret (^) allows minor and patch updates, tilde (~) allows only patch updates, "exact" means the version is pinned to one specific release, and "unpinned" flags a wildcard like * or latest that could resolve to anything at install time.
Does it resolve or install anything to build this diagram?
No — it only parses the JSON text you paste. It doesn't hit the npm registry, so it can't show transitive (nested) dependencies, only what's directly declared in your package.json.
Why did nothing show up after I pasted my package.json?
If none of the four dependency fields exist or they're all empty objects, the tool tells you it parsed successfully but found no dependencies, rather than showing an error.
Can I use this to spot risky unpinned dependencies before a release?
Yes — the "unpinned" badge is specifically meant to flag `*`/`latest` version ranges, which are worth reviewing since they can silently pull in breaking changes.
Related Tools
JavaScript Formatter
Format and beautify JavaScript code with proper indentation and structure.
JavaScript Minifier
Minify JavaScript code for production by removing whitespace and comments.
JavaScript Cheatsheet
NewModern JavaScript ES6+ syntax reference — destructuring, async/await, arrays, classes, and more.