depgraph

depgraph

Purpose

Depgraph is an analysis toolkit for your codebase, intended to aid refactoring. It can create a dependency graph of your project, highlighting circular dependencies and cross dependencies as well as showing the usage of specific files in a project. Built with esprima and d3.js.

Getting started

$ git clone https://github.com/quadnix/depgraph && cd depgraph
$ npm i -g

Usage

depgraph <command>

Commands:
  depgraph graph <root>         Graph the project
  depgraph describe <file>      Show all classes and associated methods in a
                                file
  depgraph track <file> <root>  Show what functions from a file are used
                                throughout the project

Options:
  --help        Show help                                              [boolean]
  --version     Show version number                                    [boolean]
  --output, -o  file to output to, omit or '-' for stdout         [default: "-"]

The core depgraph CLI spits out JSON, which you can then use to power your own visualizations. It also comes with a default visualizer for the graph (see below).

File description

Simply spits out a JSON representation of all methods in all classes in a file:

$ depgraph describe Model/model.js
{
    "Model": [
        {
            "name": "constructor",
            "params": []
        },
        {
            "name": "parseFile",
            "params": [
                "name",
                ...
            ]
        }
        ...
    ],
    ...
}

File usage tracking

This returns a JSON representation of the number of times a file is used.

$ depgraph track Controller/controller.js index.js
{
    "Controller": {
        "constructor": [],
        "setPanel": [
            {
                "file": {
                    "path": "/a/b/c/Panel.js",
                    "basename": "Panel.js",
                    "deps": [...]
                },
                "count": 2
            },
            ...
        ],
        ...
    }
}

You can search inside of the target file by passing --internal=true.

Dependency graphing

Depgraph's graph feature comes in two parts - a CLI and a visualization. The cli is very easy to use, and returns a tree of the import declarations of a project.

$ depgraph graph src/index.js
{
    "path": "/absolute/path/to/index.js",
    "basename": "index.js",
    "type": "file",
    "deps": [...]
}

Available node types:

All nodes will have a path and type atttributes. A full table is available below:

For the visualisation, copy (or symlink) the output to the root of the viz/ folder, and name it depgraph.json. Then simply serve it behind an HTTP server. I like this one.