FlowTrace
Trace call chains from any function down to the database.
Put your cursor on a function, press Ctrl+Alt+R, and FlowTrace draws an interactive diagram of the full call flow — callers above, callees below, and every database table your code touches at the bottom, with per-column read/write badges.
Built for layered backend architectures (NestJS, controller → service → repository → ORM), powered by AST analysis.
Features
📊 Layered call-chain diagram
- Recursive call-chain analysis from the selected function (AST-based, up to 8 levels deep)
- Callers (references) above the center node, callees below — laid out as a tree
- Interface / abstract types are resolved to their implementations automatically (
IUserRepository → UserRepository), including NestJS { provide, useClass } custom providers
- Node colors by file kind: Controller, Service, UseCase, Repository, Entity, Handler, …
- Decorator-aware badges: HTTP method + route,
@Body/@Param inputs, guards/interceptors
- Utility/helper functions are folded into a single "Utils · Libs" bundle node
🗄 Database table lane
- Every DB access in the chain is detected and mapped to its table
- ERD-style table nodes at the bottom: full entity column list with read / insert / update / delete badges on exactly the columns your code touches
- Entity resolution:
@Entity scan + repository generic resolution (class FooRepository extends Repository<BarEntity>)
- Per-table query list with one-click jump to the source line
- Supported access patterns:
- TypeORM — repository methods, QueryBuilder chains, custom repository base classes (
*Orm, getReader() chains)
- Prisma —
prisma.model.findMany() etc.
- Raw SQL — string literals and
SQL`...` tagged-template queries (columns parsed from the SQL text)
🌐 External HTTP calls
axios / fetch / NestJS HttpService calls appear as external-call nodes with method + URL
🔍 Focus mode
- Select any node to highlight its connected structure (upstream callers + downstream callees + touched tables); everything else fades out
🖱 Interactive
- Click any line badge to jump to the code
- Drill up (find more callers) or down (expand callees) from any node
- Auto-layout (dagre) with a re-layout button
Usage
- Open a TypeScript/JavaScript file
- Place the cursor on a function or method name
- Run
References: Show Diagram (Ctrl+Alt+R, or right-click → References: Show Diagram)
Settings
| Setting |
Description |
refsDiagram.decoratorMappings |
Map custom decorators to a display style (endpoint, input, pipeline, meta, hidden). Example: { "RequireFunctionPermission": "pipeline" } |
Requirements
- Works best on TypeScript projects with a language server (uses VS Code's built-in reference/definition providers plus its own Babel-based AST engine)
- Path aliases are resolved from your workspace
tsconfig.json (compilerOptions.paths)
Release Notes
0.12.0
- First Marketplace release
- Layered call-chain diagram with interface → implementation resolution
- DB table lane with per-column access badges (TypeORM / Prisma / raw SQL / tagged-template SQL)
- Repository generic entity resolution, domain-repository wrapper false-positive suppression
- Selection focus mode, external HTTP call nodes, decorator badges
| |
