@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

1. go to Stackblitz and run:

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

2. Find file Component-Diagram.mmd
3. 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.