@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}}

Loading

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

Known Limitations

At this stage the library does have some limitations:

Optimised for Standalone: Modules only get parsed for the routes.
Path Resolution: Unusual project structures may cause resolution issues.

Detective

Check out Detective for even more insights into your Angular/TS Apps.

npx @softarc/detective detective

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!