node-angular-diagram's Introduction

dd-angular-graph

Very simple angular project file crawler.

Execute

install
- npm i --save-dev dd-angular-graph
add script to package.json e.g.:
- "show_graph": "dd-angular-graph --open-svg"
execute in terminal
- npm run show_graph

Debugging

Clone repository and in VsCode open the launch.json and add the --sourcedir <DIR> argument for your Angular project /src folder then hit F5 in index.js. The file output.plantuml can then be used to generate a diagram e.g. at plantuml.com (keep in mind that the resulting diagram could be too big for PNG so try generating SVG instead).

Arguments

--sourcedir <DIR> optional if angular.json is in working dir else mandatory path to /src dir
--output <FILENAME> standard 'output', used for generating files i.e. output.plantuml
--download will try to download SVG diagram
--open-svg will try to open SVG diagram in Chrome without downloading

Issues & TODOs

The parsing code is very simple and doesn't account for:

modules importing other modules
different objects with same name
class inheritance
interfaces (will occur as external/unknown dependencies when encountered)

What For

Creates a plantuml code representation of the Angular project's source files by:

searching for all .ts files
extracting @Injectable, @Directive, @Component, @NgModule classes
- extracting class constructor parameters as dependencies
generating plantuml by flagging dependencies as composition targets

Recommend Projects