NestJS View Helper
Visualize your NestJS architecture as an interactive graph — right inside VS Code.
English · 한국어
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
UserService injected?
- What HTTP routes does
OrderController expose?
…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
Esc to 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
