• Stars
    star
    484
  • Rank 90,873 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 11 years ago
  • Updated almost 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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] <file|dir ...>

Options:

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

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

More Repositories

1

volkswagen

šŸ™ˆ Volkswagen detects when your tests are being run in a CI server, and makes them pass.
JavaScript
14,260
star
2

vscode-browser-preview

A real browser preview inside your editor that you can debug.
TypeScript
4,388
star
3

chrome-devtools-app

Chrome DevTools packaged as an app via Electron
JavaScript
1,576
star
4

devtools-remote

Debug your browser tabs remotely via Chrome DevTools
CSS
686
star
5

timey

A little tool to make timezones more human and easier to understand.
JavaScript
107
star
6

css-reloader

CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself.
JavaScript
99
star
7

slotCount.js

Simple slot machine-like counter, inspired by Google Plus.
JavaScript
63
star
8

awesome-front-end-curriculum

A crowd sourced curriculum of mandatory material for new front-end devs.
47
star
9

express-webpack-asset

Express middleware to load hashed webpack assets
JavaScript
40
star
10

dyson-purelink

Control Dyson PureLink fan/purifier devices from JavaScript
JavaScript
39
star
11

element-to-source

Providing utility to map a DOM element to source information, using debug metadata provided by (some) frameworks.
TypeScript
34
star
12

grunt-dependencygraph

Visualize your CommonJS or AMD module dependencies.
JavaScript
27
star
13

WebNotification.js

Wrapper for the W3C Web Notifications
JavaScript
23
star
14

vscode-casteteer

VS Code + Puppeteer + CDP + Screencasting + Debugging = šŸŽ‰
JavaScript
22
star
15

dotdev

zero config wildcard *.dev domains.
Shell
22
star
16

grunt-dependo

Running dependo from within a grunt task.
JavaScript
18
star
17

nodejs-shopping-cart

JavaScript
18
star
18

dinero-printer

Virtual printer for Dinero Regnskab powered by Electron
JavaScript
17
star
19

cardio

cardio
JavaScript
15
star
20

adb-devtools-devices

Tool to find devtools devices using ADB
JavaScript
14
star
21

slack-538

Get the latest presidential polling forecasts from fivethirtyeight.com in Slack
JavaScript
12
star
22

podio-desktop

Podio desktop client
Ruby
7
star
23

node-personal-capital

Node.js SDK for Personal Capital
TypeScript
7
star
24

dinero-js

Dinero Regnskab API client
JavaScript
6
star
25

browser-viewport-device-descriptions

Repository of browser viewport descriptions for a range of devices.
JavaScript
6
star
26

drcast

Cast DR TV channels to your Chromecast - directly from the command line.
JavaScript
6
star
27

devtools-self-destruct

A page that will self-destruct when DevTools are opened
JavaScript
5
star
28

expirable-hash-table

JavaScript
4
star
29

jquery-codecamp

Code from my ANUG jQuery CodeCamp
JavaScript
4
star
30

python-latitude

Simple client for Google Latitude in Python
4
star
31

youseecast

Cast YouSee TV channels to your Chromecast from the command line.
JavaScript
4
star
32

express-gettext

Translation module for express.js using Gettext and PO files
JavaScript
4
star
33

vscode-logo-svg

VS Code logo as SVG
3
star
34

github-messenger

A repo to talk to devs who doesnt reply to email or twitter
3
star
35

AutoCheckIn

My first Python hack ever. Autocheckin is a service that uses your location from Google Latitude to check you in on Foursquare.
Python
3
star
36

pullrequest-demo

JavaScript
3
star
37

podio-geckoboard

Very basic geckoboard proxy for tasks
Ruby
2
star
38

chrome-keycatcher

JavaScript
2
star
39

yousee.js

API client for danish cable provider YouSee
JavaScript
2
star
40

coldfront.co

ColdFront website
JavaScript
2
star
41

beanbagconf.org

Let's re-watch great conference content together
2
star
42

kindle-scanner

Kindle Scanner as progressive web app
JavaScript
2
star
43

twitter-collection-to-screenshots

JavaScript
2
star
44

devtools-demos

Demo pages for testing DevTools functionality
HTML
2
star
45

azure-node-debugging

JavaScript
2
star
46

jquery.touchEvents

jQuery plugin to expose touch gestures and events for the iPhone/iPad via custom events
JavaScript
2
star
47

minimal.io

PHP
2
star
48

showoff.js

A showoff-compatible presentation server in node.js
JavaScript
2
star
49

remote-debug-sniffer

Sniff CDP traffic and output it to the console
JavaScript
2
star
50

chrome-thickbook

How thick is that book?
JavaScript
2
star
51

voltswagen

Voltswagen is the spiritual successor to the highly popular Volkswagen package - but not really.
JavaScript
2
star
52

MakeItBounce

Boucing image creator using HTML5, Canvas and some JavaScript. Inspired by bouncing Google logo.
JavaScript
2
star
53

unicorpses.fyi

HTML
1
star
54

pather

Bringing window.pushHistory to crossroads.js.
JavaScript
1
star
55

podio-frontend-stack-evolution

Podio frontend stack presentation @ LBI Denmark
1
star
56

electron-quick-start-vscode

JavaScript
1
star
57

lyft-cli

CLI for Lyft
1
star
58

backbone.advices

Bringing Advices to Backbone
JavaScript
1
star
59

music-festivals

1
star
60

kenneth.io

JavaScript
1
star
61

gatsby-starter-netlify-cms

JavaScript
1
star
62

vuejs-vscode-webpack-example

JavaScript
1
star
63

gscph.dk

WEB Global Shapers Copenhagen Hub
CSS
1
star
64

dotcph.org

The dotCPH gTLD initiative
CSS
1
star
65

node-canvas-base64

base64 image methods for node-canvas
JavaScript
1
star
66

lsb-investments

LSB scraper to get investments
JavaScript
1
star
67

browserstats.co

Aggregated browser statistics
JavaScript
1
star
68

vscode-network-tool

TypeScript
1
star