gulp-angular-architecture-graph

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

gulp-angular-architecture-graph

★ 11 Open GitHub ↗

Generate modules dependencies graph

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# gulp-angular-architecture-graph
[![Dependency Status][depstat-image]][depstat-url] [![devdependencies][devdepstat-image]][devdepstat-url] [![Build status][build-image]][build-url] [![NPM version][npm-image]][npm-url] [![Coverage Status][coverage-image]][coverage-url] [![Codacy Badge][codacy-image]][codacy-url]

[depstat-url]: https://david-dm.org/vogloblinsky/gulp-angular-architecture-graph
[depstat-image]: https://david-dm.org/vogloblinsky/gulp-angular-architecture-graph.svg
[devdepstat-url]: https://david-dm.org/vogloblinsky/gulp-angular-architecture-graph#info=devDependencies
[devdepstat-image]: https://david-dm.org/vogloblinsky/gulp-angular-architecture-graph/dev-status.png
[build-url]: https://travis-ci.org/vogloblinsky/gulp-angular-architecture-graph
[build-image]: https://travis-ci.org/vogloblinsky/gulp-angular-architecture-graph.svg?branch=master
[npm-url]: http://badge.fury.io/js/gulp-angular-architecture-graph
[npm-image]: https://badge.fury.io/js/gulp-angular-architecture-graph.svg
[coverage-url]: https://coveralls.io/r/vogloblinsky/gulp-angular-architecture-graph?branch=master
[coverage-image]: https://coveralls.io/repos/vogloblinsky/gulp-angular-architecture-graph/badge.svg?branch=master
[codacy-url]: https://www.codacy.com/public/vincentogloblinsky/gulp-angular-architecture-graph
[codacy-image]: https://www.codacy.com/project/badge/8d00b4d7b46a465fbf8a79dea9013d39

Generate modules dependencies graph.
Port of https://github.com/lucalanca/grunt-angular-architecture-graph

![angular-ui/ui-router state module](https://raw.githubusercontent.com/vogloblinsky/gulp-angular-architecture-graph/master/docs/images/ui.router.state.png "angular-ui/ui-router Dependencies graph")

## Getting Started

### 0 - Install graphviz

#### OS X

- [**graphviz**](http://www.graphviz.org/)

if running OS X and using homebrew, simply execute:

```
 brew install graphviz
```

#### Windows 7

The windows installer of graphviz: [graphviz-X.XX.msi](http://www.graphviz.org/Download..php)

**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](http://gulpjs.com/) before, be sure to check out the [Getting Started](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) guide, as it explains how to create a [Gulpfile](https://github.com/gulpjs/gulp#sample-gulpfilejs) as well as install and use Gulp plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
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:

```js
var ngGraph = require('gulp-angular-architecture-graph');

gulp.task('default', function(){
    gulp.src('src/js/*.js', '!src/js/external/*')
        .pipe(ngGraph({
            dest: 'architecture'
        }));
});
```

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

## Demo

![legend](https://raw.githubusercontent.com/vogloblinsky/gulp-angular-architecture-graph/master/docs/images/legend.png "Generated Graph Legend")

- ui-router overview diagram
![angular-ui/ui-router overview](https://raw.githubusercontent.com/vogloblinsky/gulp-angular-architecture-graph/master/docs/images/all.ui-router.png "angular-ui/ui-router Dependencies graph")

## Options

### options.dest
Type: `String`
Default value: `architecture`

A string value that define the output directory.

```js
dest: 'out'
```

### options.hideAngularServices
Type: `Boolean`
Default value: `true`

A boolean value that shows angular services (e.g. $http, $q) as dependencies when set to false.

```js
hideAngularServices: false
```

### options.largeGraph
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.

```js
largeGraph: false
```

### options.shapeModules
Type: `String`
Default value: `component`

A string value that allows you to change the default shape used for

* module

nodes.

```js
shapeModules: 'triangle'
```

### options.shapeFactories
Type: `String`
Default value: `ellipse`

A string value that allows you to change the default shape used for

* Provider
 * Controller
 * Service
 * Factory
 * Injected Service

nodes.

```js
shapeFactories: 'house'
```

### options.shapeFilters
Type: `String`
Default value: `rectangle`

A string value that allows you to change the default shape used for filters nodes.

```js
shapeFilters: 'house'
```

### options.shapeDirectives
Type: `String`
Default value: `note`

A string value that allows you to change the default shape used for directives nodes.

```js
shapeDirectives: 'trapezium'
```

### options.shapeComponents
Type: `String`
Default value: `folder`

A string value that allows you to change the default shape used for components nodes.

```js
shapeComponents: 'trapezium'
```

Available graphviz shapes are shown [here](http://www.graphviz.org/doc/info/shapes.html)

### options.colorScheme
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

```js
colorScheme: 'set19'
```

Available graphviz colour schemes are shown [here](http://www.graphviz.org/doc/info/colors.html)

### options.filterModulesPrefixes
Type: `Array`
Default value: `[]`

An array containing strings of module name prefixes to remove from graph
```js
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

[CHANGELOG.md](https://github.com/vogloblinsky/gulp-angular-architecture-graph/blob/master/CHANGELOG.md)

gulp-angular-architecture-graph

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README