A tool for exploring npm modules and dependencies. Available online at https://npmgraph.js.org/.
Be sure to check out the new npmgraph CLI.
npmgraph diagrams can be configured using the URL parameters below.
NOTE: With the exception of the q (query) parameter, these are not search parameters. These parameters are stored in the location hash, using normal URL query param encoding.
Comma-separated list of module names or URLs.
Example: Graph the send module (official NPM registry):
https://npmgraph.js.org/?q=send
"Colorization" mode (a.k.a "Colorize by..." field in UI). Currently supports the following values:
color=... |
Graph nodes colored by... |
|---|---|
moduleType |
package.json#type value |
bus |
# of maintainers ("bus" = bus factor) |
outdated |
Degree of version outdated-ness |
maintenance |
npms.io score |
Example: Graph send, colorize by module type:
https://npmgraph.js.org/?q=send#color=moduleType
Comma-separated list of the types dependencies to include for modules at the top-level of the graph. (Lower-level modules only ever show dependencies).
dependencies is always included.
Example: Graph send, include devDependencies:
https://npmgraph.js.org/?q=send#deps=devDependencies
JSON-encoded array of user-supplied package.json contents.
To graph a custom package.json module, provide the package contents here (in the packages param), and set the module "name@version" in the q param.
Example: Graph a custom "[email protected]" module
`https://npmgraph.js.org/?q=my_package#${new URLSearchParams([
['packages', JSON.stringify([packageJson])],
]).toString()}`;Important
The name provided in q must match the name in the package.json, at least until #195 is resolved.
Select a module or category of modules.
Values should have one of the following forms:
exact:<module key> |
Select a specific module |
name:<module name> |
Select modules by name, all versions |
license:<license string> |
Select modules by license |
maintainer:<maintainer name> |
Select modules by maintainer name |
Example: Graph send, selecting [email protected]
https://npmgraph.js.org/[email protected]#select=exact%3Afresh%400.5.2
If defined (e.g. ...#hide), hides the inspector.
Example: Graph send, close the inspector
https://npmgraph.js.org/[email protected]#view=closed
Specify zoom mode.
w |
Fit view width |
h |
Fit view height |
Example: Graph send, fit view width
https://npmgraph.js.org/[email protected]#zoom=w
NPMGraph is built with parcel. To run in your local dev environment:
$ git clone https://github.com/npmgraph/npmgraph.git
$ cd npmgraph
$ npm install
$ npm start