LogoJuan Manuel Allo Ron

Dependency Graph for Javascript Projects

By Juan Manuel Allo Ron on Mar 24, 2020

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.


Catch up with me on Twitter:@juan_allo

Dependency analysis
Dependency graph
Package manager


XFacebookY CombinatorLinkedInRedditEmail


Similar Articles

Weekly Digest #12: on front-end interviews

Jun 7, 2020
Last week I published tons of resources on the technical interview process. Today I want to focus a little bit more on frontend. Here is a curated list of HTML, CSS, JS and system design questions.

Weekly Digest #9: Everything you need to know about Deno

May 17, 2020
Deno is a new ECMAScript based runtime (like NodeJS) created by Ryan Dahl (who also created NodeJS)

Tip: list NPM scripts

May 14, 2020
In this quick-tip I will show you how to list scripts from the terminal
The host working out in the React Summit

React Summit Remote Edition Highlights

Apr 21, 2020
When the year started I was looking to attend to React Summit in Amsterdam. So I was super happy to hear that they were doing a remote edition. Woke up at 5:30 am to attend and it was totally worth it! Specially the workout break!!!

@2023 Juan Manuel Allo Ron. All Rights reserved