(First-time for each project) Make sure your project has been compiled by Angular ('ng serve' / 'ng build').
'Show NG Project Diagram' in the Command Palette (Ctrl+Shift+P), OR
From the context menu option in the Explorer (Ctrl+Shift+E).
Features
Displays modules, components, services, and their relationships as an interactive network with movable symbols.
Unique icons and colours for groups of symbols to help distinguish between them.
Single-click symbols to view more details.
Double-click symbols to open the corresponding file in the editor.
Save network as image (location: '<workspaceRoot>/.ng-project-diagram/project-diagram.png').
Buttons to reset layout back to default (quick-reset) and to sync file changes (full-refresh).
Filter by symbol type.
Transparency support (also extends to transparency included/excluded in saved image).
Zoom and pan network with mouse, keyboard (↑ UP, ↓ DOWN, ← LEFT, → RIGHT, - MINUS, + PLUS), or on-screen navigation controls.
User interface compliments the current VS Code colour theme.
Requirements
Support for Angular versions ≤ 12. Compatibility with Angular versions < 10 is untested.
VS Code version ≥ 1.63.2.
Known Issues
VS Code theme colour change detection is not automatic. When switching between light, dark, or high-contrast themes, you will need to trigger a quick-reset to the network for navigation controls and symbol label colours to update.
Other
This project uses the following libraries, you should go check them out:
