dependo

by auchenberg

auchenberg /dependo

Visualize your CommonJS or AMD module dependencies in a force directed graph report.

462 Stars 50 Forks Last release: over 2 years ago (0.2.0) MIT License 68 Commits 5 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

dependo

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

NEW MAINTAINER WANTED: This project hasn't been maintained in while, so if you wanna help out, please let me know!

Introduction

Let me introduce dependo - A small visualization tool that draws an force directed graph of JavaScript dependencies pulled from a codebase of CommonJS, AMD, or ES6. 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.

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

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:

Example

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

Installation

To install as a library:

$ npm install dependo

To install the command-line tool:

$ sudo npm -g install dependo

Options

{
    'format': The module format to expect, 'cjs', 'amd', 'es6', or 'json'. AMD (amd) is the default format. If 'json', pass a file formatted like `example.json` in the `example/` directory.
    'optimized': Boolean, True if the parser should read modules from a optimized file (r.js). Defaults to false.
    'exclude': String from which a regex will be constructed for excluding files from the scan.
    'mainRequireModule': Name of the module if parsing an optimized file (r.js), where the main file used require() instead of define. Defaults to ''.
    'requireConfig': Path to RequireJS config used to find shim dependencies and path aliases. Not used by default.
    'reverse': Reverse dependency arrow directions.
    'title': The title of the generated HTML document.
    'extensions': Valid file extensions used to find files in directories e.g. .js,.ts Default: .js
}

API

  var Dependo = require('dependo');

// Fire up an dependo instance var dependo = new Dependo(src, { format: 'amd', requireConfig: 'optional path to RequireJS config file', exclude: '^node_modules', transform: function(dep){ //Apply a transformation on dependencies ....

    return dep;

}

});

dependo.generateHtml(); ...

CLI

Usage: dependo [options] 

Options:

-h, --help output usage information -V, --version output the version number -f, --format format to parse (amd/cjs/es6/json) -x, --exclude a regular expression for excluding modules -t, --title the title of the generated document (dependo) -v, --reverse reverse direction of arrows -e, --extensions file extensions to use separated by comma</p>

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

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

Grunt

I also wrote a grunt-task that can be found in this separate repository: https://github.com/auchenberg/grunt-dependo

Roadmap

dependo 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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.