@tsharp/ng-component-hierarchy-visualizer NPM

@tsharp/ng-component-hierarchy-visualizer

Generate Mermaid representations of your Angular component hierarchy representation based on the route configurations.

Features

Visualize Angular routing component hierarchy using Mermaid.js.
Supports eagerly and lazily loaded components.
Optionally include services in the visualization.

Usage

Navigate to the directory that contains the routes from which the graph should be generated.

cd src/app
npx @tsharp/ng-component-hierarchy-visualizer ng-route-hierarchy [path-to-routes-file] --withServices

Defaults to app.routes.ts if no path-to-routes-file is provided.
Use --withServices to include injected services in the output. (ignores Angular services for clarity)
Use --withNestedDependencies to include importet standalone elements (components, pipes, directives) in the output. (ignores Angular elements for clarity)
Use --basePath= to execute from this location.

Example

go to Stackblitz and run:

npx @tsharp/ng-component-hierarchy-visualizer ng-route-hierarchy app.routes.ts --withServices --basePath=quickapp.client/src/app

Find file Component-Diagram.mmd
copy output to Mermaid JS

Output

Generates Mermaid Flowcharts that can be used directly in github and everywhere else where mermaid is rendered natively.

flowchart LR
Root -.-o HomeComponent(HomeComponent)
Root -.-o LoginComponent(LoginComponent)
Root -.-o CustomersComponent(CustomersComponent)
Root -.-o ProductsComponent(ProductsComponent)
Root -.-o OrdersComponent(OrdersComponent)
Root -.-o SettingsComponent(SettingsComponent)
Root -.-o AboutComponent(AboutComponent)
Root -.-o NotFoundComponent(NotFoundComponent)
HomeComponent --- AuthService{{AuthService}}
HomeComponent --- ConfigurationService{{ConfigurationService}}
AuthService --- OidcHelperService{{OidcHelperService}}
AuthService --- ConfigurationService{{ConfigurationService}}
AuthService --- LocalStoreManager{{LocalStoreManager}}
OidcHelperService --- LocalStoreManager{{LocalStoreManager}}
OidcHelperService --- ConfigurationService{{ConfigurationService}}
ConfigurationService --- LocalStoreManager{{LocalStoreManager}}
ConfigurationService --- AppTranslationService{{AppTranslationService}}
ConfigurationService --- ThemeManager{{ThemeManager}}
AppTranslationService --- TranslateService{{TranslateService}}
LoginComponent --- AlertService{{AlertService}}
LoginComponent --- AuthService{{AuthService}}
LoginComponent --- ConfigurationService{{ConfigurationService}}
SettingsComponent --- AccountService{{AccountService}}
AccountService --- AuthService{{AuthService}}
AccountService --- AccountEndpoint{{AccountEndpoint}}
AccountEndpoint --- ConfigurationService{{ConfigurationService}}

Or it can be pasted into the mermaid live editor: Mermaid JS