1

I have a web project with over 60 es6 modules that use export and import. I am looking for a way to graph, or map out, the relationships between the modules. I am looking for circular dependencies and opportunities for code splitting and just visualizing the project in general.

I thought npm ls would answer my question but it seems to list everything in node_modules/ (which I don't care about) and none of my own modules. I also looked at dependo. But neither got close to what I want (or else I don't understand how to use them).

Richard Greenwood
  • 876
  • 1
  • 10
  • 20

1 Answers1

3

Madge does pretty much what I was looking for. It creates a nice svg graph of dependencies. Install:

npm -dev install madge

and to create a svg graphic (Ubuntu):

sudo apt-get install graphviz

and then run:

node_modules/.bin/madge --image graph.svg src/index.js

Here is an example (svg saved as png)

mage graphic output

Richard Greenwood
  • 876
  • 1
  • 10
  • 20