Generate modules dependencies graph

Downloads in past


1130.0.65 years ago9 years agoMinified + gzip package size for gulp-angular-architecture-graph in KB


!Dependency Statusdepstat-imagedepstat-url !devdependenciesdevdepstat-imagedevdepstat-url !Build statusbuild-imagebuild-url !NPM versionnpm-imagenpm-url !Coverage Statuscoverage-imagecoverage-url !Codacy Badgecodacy-imagecodacy-url
Generate modules dependencies graph. Port of
angular-ui/ui-router state module

Getting Started

0 - Install graphviz


if running OS X and using homebrew, simply execute:
brew install graphviz

Windows 7

The windows installer of graphviz: graphviz-X.XX.msi
Remember to set the graphviz bin directory in your PATH. e.g. ``C:\Program Files (x86)\GraphvizX.XX\bin``.

Manjaro 0.8.11 (arch linux)

Install via yaourt the graphviz package e.g.: yaourt graphviz.

1 - Install plugin in your project

This plugin requires Gulp ~3.8.7
If you haven't used Gulp before, be sure to check out the Getting Started guide, as it explains how to create a Gulpfile as well as install and use Gulp plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install --save-dev gulp-angular-architecture-graph

Once the plugin has been installed, it may be injected inside your Gulpfile with this line of JavaScript:
var ngGraph = require('gulp-angular-architecture-graph');

gulp.task('default', function(){
    gulp.src('src/js/*.js', '!src/js/external/*')
            dest: 'architecture'

execute the task and the diagrams will be in the output folder, in this example it is in the folder ``architecture``.


  • ui-router overview diagram
angular-ui/ui-router overview



Type: String Default value: architecture
A string value that define the output directory.
dest: 'out'


Type: Boolean Default value: true
A boolean value that shows angular services (e.g. $http, $q) as dependencies when set to false.
hideAngularServices: false


Type: Boolean Default value: false
A boolean value that switch the rendering engine from dot for small projects to sdfp for large projects. dot engine render horizontal graph, sfdp render square graph.
largeGraph: false


Type: String Default value: component
A string value that allows you to change the default shape used for
shapeModules: 'triangle'


Type: String Default value: ellipse
A string value that allows you to change the default shape used for
Provider Controller Service Factory Injected Service
shapeFactories: 'house'


Type: String Default value: rectangle
A string value that allows you to change the default shape used for filters nodes.
shapeFilters: 'house'


Type: String Default value: note
A string value that allows you to change the default shape used for directives nodes.
shapeDirectives: 'trapezium'


Type: String Default value: folder
A string value that allows you to change the default shape used for components nodes.
shapeComponents: 'trapezium'

Available graphviz shapes are shown here


Type: String Default value: set312
A string value that allows you to change the graph colour scheme. You currently need to choose a scheme with at least 9 colours to ensure that all nodes are coloured. Colour schemes which include white or very pale colours will cause some nodes to be hard to see or appear invisible against the white background
colorScheme: 'set19'

Available graphviz colour schemes are shown here


Type: Array Default value: []
An array containing strings of module name prefixes to remove from graph
filterModulesPrefixes: ['ng', 'ui', 'formly', 'angular']

List of Contributors

  • vogloblinsky (current maintainer)
  • lucalanca (initial creator of grunt version)
  • carlo-colombo (initial creator of the project)
  • manekinekko

Release notes