JavaScript tooling: madge

August 23, 2018

In large projects, the way files depend on each other is not always clear.


What files does this file depend on?

Easy: look for the require or import statements.

What files depend on this file?

Uh… use grep?

You can get answers, but it’s the micro view. What about the big picture?
Let’s look at ALL files and ALL dependencies at the same time.



Create graphs from your CommonJS, AMD or ES6 module dependencies

Short version:

Here’s what happens when you run Madge on itself:

madge on madge

(you might need to install graphviz, follow the instructions)

# HOW TO ^^^
git clone
cd madge/
npm install
node bin/cli.js bin -i madge-on-madge.svg

But what about a bigger project? Here’s immutable.js (click to enlarge):


# HOW TO ^^^
git clone
cd immutable-js/
madge src -i immutable.png   # assumes: `npm install -g madge`

If you want to focus on a part of the graph, you can start at a specific file (Seq.js):

part of immutable

# HOW TO ^^^
madge src/Seq.js -i seq.png

What do the colors mean?

How to use?

The README has a bunch of examples.

You can:

It also supports many formats:

You can even exclude files:

madge --exclude '^(foo|bar)\.js$' path/src/app.js

which is useful for non-interesting files (i.e. configuration files, or tests).

Discuss on Twitter