dependito

Visualize your CommonJS or AMD module dependencies in a force directed graph report - powered by D3.js.

Introduction

Let me introduce dependito - A small visualization tool that draws a force directed graph of JavaScript dependencies that has been annotated with either CommonJS, or AMD. Behind the scene I’m using a wonderful library named node-madge, to extract the dependencies and combined with the power of D3.js I draw a beautiful zoomable directed graph.

Features

• 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.

Report example

The best way to show something is by example, so here I generated a graph of the official RequireJS multipage example:

See the example here: http://auchenberg.github.com/dependito/example

Installation

To install as a library:

$ npm install dependito

To install the command-line tool:

$ sudo npm -g install dependito

API

  var dependito = require('dependito');

  // Fire up an dependito instance
  var dependito = new dependito(src, {
    format: 'amd',
    exclude: '^node_modules',
    transform: function(dep){
        //Apply a transformation on dependencies
        ....

        return dep;

    }
  });

  dependito.generateHtml();
  ...

CLI

Usage: dependito [options] <file|dir ...>

Options:

  -h, --help             output usage information
  -V, --version          output the version number
  -f, --format <name>    format to parse (amd/cjs)
  -x, --exclude <regex>  a regular expression for excluding modules

Generate HTML report of all module dependencies (AMD), and save it to /example/report.html

$ dependito -f amd /path/src > example/report.html

Roadmap

dependito 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

Thanks to

This project wouldn't have been possible without the great work on node-madge by Patrik Henningson, or wonderful D3.js library.

Inspiration

http://bl.ocks.org/1153292