Skip to content

A tool for exploring NPM modules and dependencies

License

Notifications You must be signed in to change notification settings

npmgraph/npmgraph

Repository files navigation

npmgraph

A tool for exploring npm modules and dependencies. Available online at https://npmgraph.js.org/.

Be sure to check out the new npmgraph CLI.

URL API

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.

q (search param)

Comma-separated list of module names or URLs.

Example: Graph the send module (official NPM registry):

https://npmgraph.js.org/?q=send

color (hash param)

"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

deps (hash param)

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

packages (hash param, JSON-encoded)

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%400.0.1#packages=%5B%7B%22name%22%3A%22my_package%22%2C%22version%22%3A%220.0.1%22%2C%22dependencies%22%3A%7B%22send%22%3A%220.18.0%22%7D%7D%5D

`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 (hash param)

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

hide (hash param)

If defined (e.g. ...#hide), hides the inspector.

Example: Graph send, close the inspector

https://npmgraph.js.org/[email protected]#view=closed

zoom (hash param)

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

Running locally

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