Visualize your CommonJS or AMD module dependencies.


Visualize your CommonJS or AMD module dependencies in a force directed graph using D3.js.

You can read the full introduction to the project in my blog post.

  • Draw a graph of nodes, where each module is represented as a node.
  • Google Maps's like zooming, dragging and panning.
  • Connect nodes with it's dependencies via lines.
  • Hovering a node will highlight it's direct dependencies.
  • It's possible to drag a node to a specific position, to re-layout the graph.

The best way to show something is by example, so here I generated a dependencygraph of the offical RequireJS multipage-example

From the same directory as your Gruntfile, run

npm install grunt-dependencygraph

Then add some configuration for the plugin like so:

    dependencygraph: {
      targetPath: './app/assets/javascript',
      outputPath: './public/graph',
      format: 'amd'

Then add the following line to your Gruntfile after the initConfig-section:


Then just run grunt dependencygraph, go to your outputPath-folder, and open index.html.


grunt-dependencygraph supports a few options.

targetPath              Path for the target source to extract dependencies (supports absolute/relative paths)
outputPath              Path for where to output the graph (supports absolute/relative paths)
format                  Dependency-format to parse, either 'cjs' (common-js), or 'amd' (AMD)
exclude                 A regular expression for excluding modules

grunt-dependencygraph is still very much in progress, so here is the todo-list:

  • Proper label positioning: Avoid label collisions and make the graph more readable.
  • Testing! Unit tests of D3 render logic, and the grunt-task itself