@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 --withNestedTemplateElements 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 https://stackblitz.com/edit/dwrgd7?file=package.json

npx @tsharp/ng-component-hierarchy-visualizer ng-route-hierarchy app-routing.module.ts --withServices --basePath=src/app

Find file Component-Diagram.mmd
copy output to https://mermaid.live/

Output

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

flowchart LR
Root --o DashboardComponent(DashboardComponent)
Root --o HeroDetailComponent(HeroDetailComponent)
Root --o HeroesComponent(HeroesComponent)
DashboardComponent --- HeroService{{HeroService}}
HeroService --- MessageService{{MessageService}}
HeroDetailComponent --- HeroService{{HeroService}}
HeroesComponent --- HeroService{{HeroService}}

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

Known Limitations

At this stage the library does have several limitations:

Complex Route Configurations: The library may not handle very complex route configurations accurately, especially those involving variable routes.
Service Detection: Limited to services directly injected into components or explicitly imported. It may not detect dynamically injected services.
Recursion Depth: The library has a fixed recursion depth for detecting nested dependencies, potentially missing very deep or complex chains.
Path Resolution: Unusual project structures or symbolic links may cause resolution issues.
Mermaid Diagram Complexity: Large applications may produce complex diagrams that are difficult to read.

Contributing

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