Why?
Large NestJS codebases grow into a tangled web of modules, providers, and injections. Reading the code linearly hides the structure. NestJS View Helper statically analyzes your project and renders a navigable, IDE-themed graph so you can answer questions like:
- Which modules import
AuthModule? - Where is
UserServiceinjected? - What HTTP routes does
OrderControllerexpose?
…in seconds, without leaving the editor.
Features
Interactive dependency graph
- Modules, controllers, and services rendered as color-coded nodes
- Edges typed by relationship:
import,provides,controls,inject - Click any node to focus its closed neighborhood — the rest fades out
Search
- Live filter nodes by name; matches highlight in yellow with their neighbors visible
Escto reset
Multiple layouts
| Layout | Best for |
|---|---|
| Force | Free-floating organic view of clusters |
| Concentric | Modules → Controllers → Services in concentric rings |
| Tree | Hierarchical / dependency direction |
| Grid | Compact catalog overview |
Detail panel
Inspect the selected node:
- File path with click-to-jump to the exact line
- Injected dependencies, imports, providers, controllers, exports
- HTTP methods with route paths and color-coded badges (
GET/POST/PUT/DELETE/PATCH)
Minimap
A live minimap in the top-right shows the entire graph, the current viewport, and lets you click/drag to pan.
Auto-refresh
Saves to any .ts file in the workspace trigger a debounced re-analysis — the graph stays in sync with your code.
Getting Started
- Install NestJS View Helper from the VS Code Marketplace.
- Open a NestJS project (folder containing
tsconfig.json). - Press
Cmd/Ctrl + Shift + P→ NestJS View Helper: Open Graph.
That's it. The graph opens in a new editor tab.
Requirements
- VS Code
^1.85.0 - A NestJS / TypeScript project with a discoverable
tsconfig.json
How it works
Under the hood, NestJS View Helper uses ts-morph to parse the TypeScript AST and identify classes decorated with @Module(), @Controller(), and @Injectable(). Relationships are extracted from decorator metadata and constructor parameters, then rendered with Cytoscape.js.
No runtime instrumentation. No code execution. Pure static analysis.
Roadmap
- Filter by module subtree
- Export graph as PNG / SVG
- Support for dynamic modules (
forRoot,forRootAsync) - Custom decorator detection (
@CustomProvider, etc.) - Graph diff between branches
Issues & Contributions
Found a bug or have an idea? Open an issue on GitHub.
License
MIT © pinomaker