Home

Awesome

<p align="center"> <img alt="madge" src="http://pahen.github.io/madge/logo.svg" width="320"> </p> <p align="center"> <img alt="Last version" src="https://img.shields.io/github/tag/pahen/madge.svg?style=flat-square" /> <a href="https://www.npmjs.org/package/madge"> <img alg="NPM Status" src="http://img.shields.io/npm/dm/madge.svg?style=flat-square" /> </a> <a href="https://paypal.me/pahen" target="_blank"> <img alt="Donate" src="https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square" /> </a> </p>

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and giving you other useful info. Joel Kemp's awesome dependency-tree is used for extracting the dependency tree.

Read the changelog for latest changes.

I've worked with Madge on my free time for the last couple of years and it's been a great experience. It started as an experiment but turned out to be a very useful tool for many developers. I have many ideas for the project and it would definitely be easier to dedicate more time to it with some financial support 🙏

Regardless of your contribution, thanks for your support!

Examples

Graph generated from madge's own code and dependencies.

<a href="http://pahen.github.io/madge/madge.svg"> <img alt="graph" src="http://pahen.github.io/madge/madge.svg" width="888"/> </a>

A graph with circular dependencies. Blue has dependencies, green has no dependencies, and red has circular dependencies.

<a href="http://pahen.github.io/madge/simple.svg"> <img alt="graph-circular" src="http://pahen.github.io/madge/simple.svg" width="300"/> </a>

See it in action

<a href="https://asciinema.org/a/l9tM7lIraCpmzH0rdWw2KLrMc?autoplay=1"> <img alt="in-action" src="https://asciinema.org/a/l9tM7lIraCpmzH0rdWw2KLrMc.png" width="590"/> </a>

Installation

npm -g install madge

Graphviz (optional)

Graphviz is only required if you want to generate visual graphs (e.g. in SVG or DOT format).

Mac OS X

brew install graphviz || port install graphviz

Ubuntu

apt-get install graphviz

API

madge(path: string|array|object, config: object)

path is a single file or directory, or an array of files/directories to read. A predefined tree can also be passed in as an object.

config is optional and should be the configuration to use.

Returns a Promise resolved with the Madge instance object.

Functions

.obj()

Returns an Object with all dependencies.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.obj());
});

.warnings()

Returns an Object of warnings.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.warnings());
});

.circular()

Returns an Array of all modules that have circular dependencies.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.circular());
});

.circularGraph()

Returns an Object with only circular dependencies.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.circularGraph());
});

.depends()

Returns an Array of all modules that depend on a given module.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.depends('lib/log.js'));
});

.orphans()

Return an Array of all modules that no one is depending on.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.orphans());
});

.leaves()

Return an Array of all modules that have no dependencies.

const madge = require('madge');

madge('path/to/app.js').then((res) => {
	console.log(res.leaves());
});

.dot([circularOnly: boolean])

Returns a Promise resolved with a DOT representation of the module dependency graph. Set circularOnly to only include circular dependencies.

const madge = require('madge');

madge('path/to/app.js')
	.then((res) => res.dot())
	.then((output) => {
		console.log(output);
	});

.image(imagePath: string, [circularOnly: boolean])

Write the graph as an image to the given image path. Set circularOnly to only include circular dependencies. The image format to use is determined from the file extension. Returns a Promise resolved with a full path to the written image.

const madge = require('madge');

madge('path/to/app.js')
	.then((res) => res.image('path/to/image.svg'))
	.then((writtenImagePath) => {
		console.log('Image written to ' + writtenImagePath);
	});

.svg()

Return a Promise resolved with the XML SVG representation of the dependency graph as a Buffer.

const madge = require('madge');

madge('path/to/app.js')
	.then((res) => res.svg())
	.then((output) => {
		console.log(output.toString());
	});

Configuration

PropertyTypeDefaultDescription
baseDirStringnullBase directory to use instead of the default
includeNpmBooleanfalseIf shallow NPM modules should be included
fileExtensionsArray['js']Valid file extensions used to find files in directories
excludeRegExpArrayfalseAn array of RegExp for excluding modules
requireConfigStringnullRequireJS config for resolving aliased modules
webpackConfigStringnullWebpack config for resolving aliased modules
tsConfigString|ObjectnullTypeScript config for resolving aliased modules - Either a path to a tsconfig file or an object containing the config
layoutString dotLayout to use in the graph
rankdirString LRSets the direction of the graph layout
fontNameStringArialFont name to use in the graph
fontSizeString14pxFont size to use in the graph
backgroundColorString#000000Background color for the graph
nodeShapeStringboxA string specifying the shape of a node in the graph
nodeStyleStringroundedA string specifying the style of a node in the graph
nodeColorString#c6c5feDefault node color to use in the graph
noDependencyColorString#cfffacColor to use for nodes with no dependencies
cyclicNodeColorString#ff6c60Color to use for circular dependencies
edgeColorString#757575Edge color to use in the graph
graphVizOptionsObjectfalseCustom Graphviz options
graphVizPathStringnullCustom Graphviz path
detectiveOptionsObjectfalseCustom detective options for dependency-tree and precinct
dependencyFilterFunctionfalseFunction called with a dependency filepath (exclude subtrees by returning false)

You can use configuration file either in .madgerc in your project or home folder or directly in package.json. Look here for alternative locations for the file.

.madgerc

{
  "fontSize": "10px",
  "graphVizOptions": {
    "G": {
      "rankdir": "LR"
    }
  }
}

package.json

{
  "name": "foo",
  "version": "0.0.1",
  ...
  "madge": {
    "fontSize": "10px",
    "graphVizOptions": {
      "G": {
        "rankdir": "LR"
      }
    }
  }
}

CLI

Examples

List dependencies from a single file

madge path/src/app.js

List dependencies from multiple files

madge path/src/foo.js path/src/bar.js

List dependencies from all *.js files found in a directory

madge path/src

List dependencies from multiple directories

madge path/src/foo path/src/bar

List dependencies from all *.js and *.jsx files found in a directory

madge --extensions js,jsx path/src

Finding circular dependencies

madge --circular path/src/app.js

Show modules that depends on a given module

madge --depends wheels.js path/src/app.js

Show modules that no one is depending on

madge --orphans path/src/

Show modules that have no dependencies

madge --leaves path/src/

Excluding modules

madge --exclude '^(foo|bar)\.js$' path/src/app.js

Save graph as a SVG image (requires Graphviz)

madge --image graph.svg path/src/app.js

Save graph with only circular dependencies

madge --circular --image graph.svg path/src/app.js

Save graph as a DOT file for further processing (requires Graphviz)

madge --dot path/src/app.js > graph.gv

Using pipe to transform tree (this example will uppercase all paths)

madge --json path/src/app.js | tr '[a-z]' '[A-Z]' | madge --stdin

Debugging

To enable debugging output if you encounter problems, run madge with the --debug option then throw the result in a gist when creating issues on GitHub.

madge --debug path/src/app.js

Running tests

npm install
npm test

Creating a release

npm run release

FAQ

Missing dependencies?

It could happen that the files you're not seeing have been skipped due to errors or that they can't be resolved. Run madge with the --warning option to see skipped files. If you need even more info run with the --debug option.

Using both Javascript and Typescript in your project?

Madge uses dependency-tree which uses filing-cabinet to resolve modules. However it requires configurations for each file type (js/jsx) and (ts/tsx). So provide both webpackConfig and tsConfig options to madge.

Using mixed import syntax in the same file?

Only one syntax is used by default. You can use both though if you're willing to take the degraded performance. Put this in your madge config to enable mixed imports.

For ES6 + CommonJS:

{
  "detectiveOptions": {
    "es6": {
      "mixedImports": true
    }
  }
}

For TypeScript + CommonJS:

{
  "detectiveOptions": {
    "ts": {
      "mixedImports": true
    }
  }
}

How to ignore import type statements in ES6 + Flow?

Put this in your madge config.

{
  "detectiveOptions": {
    "es6": {
      "skipTypeImports": true
    }
  }
}

How to ignore import in type annotations in TypeScript?

Put this in your madge config.

{
  "detectiveOptions": {
    "ts": {
      "skipTypeImports": true
    }
  }
}

How to ignore dynamic imports in Typescript?

Put this in your madge config.

{
  "detectiveOptions": {
    "ts": {
      "skipAsyncImports": true
    },
    "tsx": {
      "skipAsyncImports": true
    }
  }
}

Note: tsx is optional, use this when working with JSX.

Mixing TypesScript and Javascript imports?

Ensure you have this in your .tsconfig file.

{
  "compilerOptions": {
    "module": "commonjs",
    "allowJs": true
  }
}

What's the "Error: write EPIPE" when exporting graph to image?

Ensure you have installed Graphviz. If you're running Windows, note that Graphviz is not added to the PATH variable during install. You should add the folder of gvpr.exe (typically %Graphviz_folder%/bin) to the PATH variable manually.

How do I fix the "Graphviz not built with triangulation library" error when using sfdp layout?

Homebrew doesn't include GTS by default. Fix this by doing:

brew uninstall graphviz
brew install gts
brew install graphviz

The image produced by madge is very hard to read, what's wrong?

Try running madge with a different layout, here's a list of the ones you can try:

Credits

Contributors

This project exists thanks to all the people who contribute. <a href="https://github.com/pahen/madge/graphs/contributors"> <img src="https://opencollective.com/madge/contributors.svg?width=890&button=false" alt="Contributors"/> </a>

Donations ❤️

Thanks to the awesome people below for making donations! 🙏Donate

<p> <a href="https://github.com/BeroBurny" target="_blank"> <div><b>Bernard Stojanović</b> (24 Mars, 2021)</div> <img alt="BeroBurny" src="https://github.com/BeroBurny.png" width="64"/> </a> </p> <p> <a href="https://github.com/olejorgenb" target="_blank"> <div><b>Ole Jørgen Brønner</b> (Oct 8, 2020)</div> <img alt="olejorgenb" src="https://github.com/olejorgenb.png" width="64"/> </a> </p> <p> <a href="https://github.com/pubkey/rxdb" target="_blank"> <div><b>RxDB</b> (Apr 1, 2020)</div> <img alt="RxDB" src="https://cdn.rawgit.com/pubkey/rxdb/ba7c9b80/docs/files/logo/logo_text.svg" width="128" style="margin: -4px -10px"/> </a> </p> <p> <a href="https://github.com/Ziriax" target="_blank"> <div><b>Peter Verswyvelen</b> (Feb 24, 2020)</div> <img alt="Ziriax" src="https://github.com/Ziriax.png" width="64"/> </a> </p> <p> <a href="https://github.com/landonalder" target="_blank"> <div><b>Landon Alder</b> (Mar 19, 2019)</div> <img alt="landonalder" src="https://github.com/landonalder.png" width="64"/> </a> </p>

License

MIT License