This extension helps you visualize the flow of your Node.js (Express) application by scanning your project for route definitions and displaying a modern, interactive diagram of your app's endpoints, handlers, and files.
Features
Automatic Project Analysis: Detects your project's entry point and scans for Express routes, including advanced patterns and middlewares.
Modern UI: Presents a clear, color-coded summary and a detailed, scrollable table of all routes.
Interactive TreeView: Use the activity bar to trigger analysis and refresh the diagram.
Output Channel Logging: See detailed logs of the analysis process, including errors and scanned files.
Supported Route Patterns
router.route('/path').post(handler)
router.route('/path').post(middleware, handler)
router.post('/path', handler)
router.post('/path', middleware, handler)
app.get(...), app.post(...), etc.
Arrow functions and multiple middlewares as handlers
How to Use
Open your Node.js/Express project in VS Code.
Open the Activity Bar: Click the "Node.js App Flow Diagram" icon.
Click "Analyze Project": This will scan your project and open the diagram webview.
View the Diagram: The webview will show a summary and a detailed table of all detected routes.
Check Logs: Open the "Node.js App Flow Scanner" output channel for progress and error logs.
Commands
Analyze Project: Triggers a fresh scan and updates the diagram.
Refresh: Re-runs the analysis and refreshes the diagram.
Hello World: Test command to verify extension activation.
Requirements
Your project must have an index.js or app.js entry point in the root folder.
Only Express-based projects are supported.
Troubleshooting
If you see only the loader, check the output channel for errors (e.g., missing entry point or no routes found).
Make sure your routes use supported Express patterns.
For best results, keep your route definitions in .js or .ts files.
Feedback & Contributions
If you have suggestions, want to support more route patterns, or want to contribute, please open an issue or pull request!
