Depsight

Dependency Insight (short Depsight) generates graphical representations of your dependency trees.

• Getting started
• Simple examples
• from_npm
  • devDependencies
• Advanced usage
  • Whitelisting
  • Blacklisting
  • High resolution output

Getting started

Depsight contains a bunch of Python 3 scripts and uses the graphviz binary and the graphviz Python module to draw graphs. Setup should look something like this:

git clone https://github.com/webmaster128/depsight.git
cd depsight
export PATH="$PWD/bin:$PATH"

# Get your first graph
depsight examples/classes_and_resources.yml

# As PNG (e.g. for Github)
depsight --format png examples/classes_and_resources.yml

# Using a different graph engine
depsight --engine fdp examples/classes_and_resources.yml

# Show all the options
depsight --help

Simple examples

• Simple example depsight examples/classes_and_resources.yml
  
• With FDP engine depsight --engine fdp examples/classes_and_resources.yml
  
• Circular dependencies depsight examples/circular.yml
  

from_npm

The binary from_npm creates a dependencies file from a npm repository, which is especially useful to inspect monorepos. The output of from_npm can be piped directly into depsight

A simple example

An example usage is

git clone https://github.com/webmaster128/private-voting
from_npm private-voting | depsight

gives you

Big examples

Both lerna and babel are big monorepos with many packages and dependencies. We inspect both of them.

Babel

Run

git clone https://github.com/babel/babel
from_npm --exclude "babel-core/test/fixtures" babel | depsight

which results in the following graph (click to open as PDF):

Lerna

Run

git clone https://github.com/lerna/lerna
from_npm lerna --exclude "__fixtures__" | depsight

which results in the following graph (click to open as PDF):

devDependencies

By default, from_npm only looks into runtime dependencies. But we can add development dependencies as well:

git clone https://github.com/webmaster128/private-voting
from_npm private-voting --include-dev-dependencies | depsight

gives you

Advanced usage

Whitelisting

For big dependency graphs it can be handy to only look at a subset of elements. The lerna example from above is so big that it is hard to reason about. With the --include argument, we can filter elements by those in the @lerna namespace, which improve the overview a lot.

Run

git clone https://github.com/lerna/lerna
from_npm lerna --exclude "__fixtures__" | depsight --include "^@lerna/"

which results in the following graph (click to open as PDF):

Blacklisting

There are cases where you want to see all dependencies in general but hide some that are irrelevant for your current observation. This can be done by exclude patterns.

In this example we exclude all DefinitelyTyped packages, which are prefixed with @types/:

git clone https://github.com/iov-one/iov-core
from_npm iov-core | depsight --exclude "^@types/"

High resolution output

If the default PNG rendering output is not sharp enough four your use case, you can use the SVG format instead and export it to PNG using an external tool like Inkscape:

git clone https://github.com/iov-one/iov-core

# Direct
from_npm iov-core | depsight --include "^@iov/" --format png --output examples/images/iov-core_filtered.png

# Via Inkscape 1.0
from_npm iov-core | depsight --include "^@iov/" --format svg --output - | inkscape --without-gui --pipe --export-width 3000 --export-file examples/images/iov-core_filtered_highres.png

which results in

• Direct output (999×320px)
• Rendered via Inkscape (3000×901px)