Dependency Graph for Javascript Projects

I was reading this Javascript development setup post by Eric Elliot, when I stumbled upon a super cool NPM package to generate dependency graphs. The name is dependency-cruiser.

Let me show you how to install it and run it!!

What’s a dependency graph?

It is a map of dependencies between objects. So, it will let you identify which modules/libraries depend on which. You could use this to:

• Identify where npm packages are being used
• Understand how classes/modules depend on each other
• Have a high level picture of your code
• Help you understand better other developer’s code
• Refactor!!!

Installing dependency cruiser

This package has a dependency on graphviz, an open source graph generation software. Let’s install that first

brew install graphviz

Now let’s install dependency-cruiser globally

npm i -g dependency-cruiser

yarn global add dependency-cruiser

Using dependency-cruiser

You can easily run this by following this command

depcruise --include-only "^src" --output-type dot src | dot -T svg > dependencygraph.svg

And the outcome will look something like the following:

Example from react flash cards

Command explained

depcruise --include-only "^src" --output-type dot src

We are asking depedency cruiser to analyze only src folder (and all its content) and generate the output in a dot format

dot -T svg > dependencygraph.svg

We are taking that output and generating a visualization for it with graphviz

Looking forward to try this on bigger projects.

Enjoy!!