UNPKG

9.65 kBMarkdownView Raw
1<p align="center">
2 <img alt="madge" src="http://pahen.github.io/madge/logo.svg" width="320">
3</p>
4
5<p align="center">
6 <img alt="Last version" src="https://img.shields.io/github/tag/pahen/madge.svg?style=flat-square" />
7 <a href="https://travis-ci.org/pahen/madge">
8 <img alt="Build Status" src="http://img.shields.io/travis/pahen/madge/master.svg?style=flat-square" />
9 </a>
10 <a href="https://david-dm.org/pahen/madge">
11 <img alt="Dependency status" src="http://img.shields.io/david/pahen/madge.svg?style=flat-square" />
12 </a>
13 <a href="https://david-dm.org/pahen/madge#info=devDependencies">
14 <img alg="Dev Dependencies status" src="http://img.shields.io/david/dev/pahen/madge.svg?style=flat-square" />
15 </a>
16 <a href="https://www.npmjs.org/package/madge">
17 <img alg="NPM Status" src="http://img.shields.io/npm/dm/madge.svg?style=flat-square" />
18 </a>
19 <a href="https://paypal.me/pahen">
20 <img alt="Donate" src="https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square" />
21 </a>
22</p>
23
24**Madge** is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and give you other useful info. Joel Kemp's awesome [dependency-tree](https://github.com/mrjoelkemp/node-dependency-tree) is used for extracting the dependency tree.
25
26* Works for JavaScript (AMD, CommonJS, and ES6 modules)
27* Also works for CSS preprocessors (Sass, Stylus, and Less)
28* NPM installed dependencies are excluded by default (can be enabled)
29* All core Node.js modules (assert, path, fs, etc) are excluded
30* Will traverse child dependencies automatically
31
32Read the [changelog](CHANGELOG.md) for latest changes.
33
34## Examples
35
36> Graph generated from madge's own code and dependencies.
37
38<a href="http://pahen.github.io/madge/madge.svg">
39 <img src="http://pahen.github.io/madge/madge.svg" width="888"/>
40</a>
41
42> A graph with circular dependencies. Blue has dependencies, green has no dependencies, and red has circular dependencies.
43
44<a href="http://pahen.github.io/madge/simple.svg">
45 <img src="http://pahen.github.io/madge/simple.svg" width="300"/>
46</a>
47
48## See it in action
49
50<a href="https://asciinema.org/a/M5tS7FrwKo8N3KUaCVO41J7iW?autoplay=1">
51 <img src="https://asciinema.org/a/M5tS7FrwKo8N3KUaCVO41J7iW.png" width="590"/>
52</a>
53
54# Installation
55
56```sh
57$ npm -g install madge
58```
59
60## Graphviz (optional)
61
62> Only required if you want to generate the visual graphs using [Graphviz](http://www.graphviz.org/).
63
64### Mac OS X
65
66```sh
67$ brew install graphviz || port install graphviz
68```
69
70### Ubuntu
71
72```sh
73$ apt-get install graphviz
74```
75
76# API
77
78## madge(path: string|array|object, config: object)
79
80> `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.
81
82> `config` is optional and should be the [configuration](#configuration) to use.
83
84> Returns a `Promise` resolved with the Madge instance object.
85
86## Functions
87
88#### .obj()
89
90> Returns an `Object` with all dependencies.
91
92```javascript
93const madge = require('madge');
94
95madge('path/to/app.js').then((res) => {
96 console.log(res.obj());
97});
98```
99
100#### .warnings()
101
102> Returns an `Object` of warnings.
103
104```javascript
105const madge = require('madge');
106
107madge('path/to/app.js').then((res) => {
108 console.log(res.warnings());
109});
110```
111
112#### .circular()
113
114> Returns an `Array` of all modules that has circular dependencies.
115
116```javascript
117const madge = require('madge');
118
119madge('path/to/app.js').then((res) => {
120 console.log(res.circular());
121});
122```
123
124#### .depends()
125
126> Returns an `Array` of all modules that depend on a given module.
127
128```javascript
129const madge = require('madge');
130
131madge('path/to/app.js').then((res) => {
132 console.log(res.depends('lib/log.js'));
133});
134```
135
136#### .orphans()
137
138> Return an `Array` of all modules that no one is depending on.
139
140```javascript
141const madge = require('madge');
142
143madge('path/to/app.js').then((res) => {
144 console.log(res.orphans());
145});
146```
147
148#### .dot()
149
150> Returns a `Promise` resolved with a DOT representation of the module dependency graph.
151
152```javascript
153const madge = require('madge');
154
155madge('path/to/app.js')
156 .then((res) => res.dot())
157 .then((output) => {
158 console.log(output);
159 });
160```
161
162#### .image(imagePath: string)
163
164> Write the graph as an image to the given image path. The [image format](http://www.graphviz.org/content/output-formats) to use is determined from the file extension. Returns a `Promise` resolved with a full path to the written image.
165
166```javascript
167const madge = require('madge');
168
169madge('path/to/app.js')
170 .then((res) => res.image('path/to/image.svg'))
171 .then((writtenImagePath) => {
172 console.log('Image written to ' + writtenImagePath);
173 });
174```
175
176# Configuration
177
178Property | Type | Default | Description
179--- | --- | --- | ---
180`baseDir` | String | null | Base directory to use instead of the default
181`includeNpm` | Boolean | false | If shallow NPM modules should be included
182`fileExtensions` | Array | ['js'] | Valid file extensions used to find files in directories
183`excludeRegExp` | Array | false | An array of RegExp for excluding modules
184`requireConfig` | String | null | RequireJS config for resolving aliased modules
185`webpackConfig` | String | null | Webpack config for resolving aliased modules
186`layout` | String | dot | Layout to use in the graph
187`fontName` | String | Arial | Font name to use in the graph
188`fontSize` | String | 14px | Font size to use in the graph
189`backgroundColor` | String | #000000 | Background color for the graph
190`nodeColor` | String | #c6c5fe | Default node color to use in the graph
191`noDependencyColor` | String | #cfffac | Color to use for nodes with no dependencies
192`cyclicNodeColor` | String | #ff6c60 | Color to use for circular dependencies
193`edgeColor` | String | #757575 | Edge color to use in the graph
194`graphVizOptions` | Object | false | Custom GraphViz [options](https://graphviz.gitlab.io/_pages/doc/info/attrs.html)
195`graphVizPath` | String | null | Custom GraphViz path
196`detectiveOptions` | Object | false | Custom `detective` options for [dependency-tree](https://github.com/dependents/node-dependency-tree)
197`dependencyFilter` | Function | false | Function called with a dependency filepath (exclude substree by returning false)
198
199> Note that when running the CLI it's possible to use a runtime configuration file. The config should placed in `.madgerc` in your project or home folder. Look [here](https://github.com/dominictarr/rc#standards) for alternative locations for the file. Here's an example:
200
201```json
202{
203 "fontSize": "10px",
204 "graphVizOptions": {
205 "G": {
206 "rankdir": "LR"
207 }
208 }
209}
210```
211
212# CLI
213
214## Examples
215
216> List dependencies from a single file
217
218```sh
219$ madge path/src/app.js
220```
221
222> List dependencies from multiple files
223
224```sh
225$ madge path/src/foo.js path/src/bar.js
226```
227
228> List dependencies from all *.js files found in a directory
229
230```sh
231$ madge path/src
232```
233
234> List dependencies from multiple directories
235
236```sh
237$ madge path/src/foo path/src/bar
238```
239
240> List dependencies from all *.js and *.jsx files found in a directory
241
242```sh
243$ madge --extensions js,jsx path/src
244```
245
246> Finding circular dependencies
247
248```sh
249$ madge --circular path/src/app.js
250```
251
252> Show modules that depends on a given module
253
254```sh
255$ madge --depends wheels.js path/src/app.js
256```
257
258> Excluding modules
259
260```sh
261$ madge --exclude '^(foo|bar)\.js$' path/src/app.js
262```
263
264> Save graph as a SVG image (graphviz required)
265
266```sh
267$ madge --image graph.svg path/src/app.js
268```
269
270> Save graph as a [DOT](http://en.wikipedia.org/wiki/DOT_language) file for further processing (graphviz required)
271
272```sh
273$ madge --dot path/src/app.js > graph.gv
274```
275
276> Using pipe to transform tree (this example will uppercase all paths)
277
278```sh
279$ madge --json path/src/app.js | tr '[a-z]' '[A-Z]' | madge --stdin
280```
281
282# Debugging
283
284> 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.
285
286```sh
287$ madge --debug path/src/app.js
288```
289
290# Running tests
291
292```sh
293$ npm test
294```
295
296# FAQ
297
298## Missing dependencies?
299
300It 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.
301
302## What's the "Error: write EPIPE" when exporting graph to image?
303
304Ensure you have Graphviz installed. And if you're running Windows graphviz is not setting PATH variable during install. You should add the folder of gvpr.exe (typically %Graphviz_folder%/bin) to PATH variable.
305
306## The image produced by madge is very hard to read, what's wrong?
307
308Try running madge with a different layout, here's a list of the ones you can try:
309
310* **dot** "hierarchical" or layered drawings of directed graphs. This is the default tool to use if edges have directionality.
311
312* **neato** "spring model'' layouts. This is the default tool to use if the graph is not too large (about 100 nodes) and you don't know anything else about it. Neato attempts to
313minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.
314
315* **fdp** "spring model'' layouts similar to those of neato, but does this by reducing forces rather than working with energy.
316
317* **sfdp** multiscale version of fdp for the layout of large graphs.
318
319* **twopi** radial layouts, after Graham Wills 97. Nodes are placed on concentric circles depending their distance from a given root node.
320
321* **circo** circular layout, after Six and Tollis 99, Kauffman and Wiese 02. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.
322
323# License
324
325MIT License