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
Comma-separated list of modules to collapse
** Example**: Graph send, collapsing the
debugand
http-errors` subtrees
https://npmgraph.js.org/?q=send#collapse=debug%2Chttp-errors
"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
If defined (e.g. ...#hide
), hides the inspector.
Example: Graph send
, close the inspector
https://npmgraph.js.org/?q=send@0.18.0#view=closed
JSON-encoded array of package.json
contents for any custom / proprietary modules included in the graph.
Example: Graph that includes custom "foo" and "bar" modules, with "foo" as the root module.
Generated with:
const fooPackage = {
// package.json for "foo"
name: 'foo',
version: '1.2.3',
dependencies: { send: '0.18.0', bar: '3.2.1' },
};
const barPackage = {
// package.json for "bar"
name: 'bar',
version: '3.2.1',
dependencies: { debug: '2.6.9' },
};
const url = new URL('https://npmgraph.js.org');
url.hash = new URLSearchParams({
packages: JSON.stringify([fooPackage, barPackage]),
});
url.searchParams.set('q', `${fooPackage.name}@${fooPackage.version}`);
url.toString(); // Returns the above URL
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 fresh@0.5.2
https://npmgraph.js.org/?q=send@0.18.0#select=exact%3Afresh%400.5.2
If present, modules will be scaled to reflect their unpacked size
Example: Graph send
, selecting fresh@0.5.2
https://npmgraph.js.org/?q=send#sizing
Specify zoom mode.
w |
Fit view width |
h |
Fit view height |
Example: Graph send
, fit view width
https://npmgraph.js.org/?q=send@0.18.0#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