FlowLens turns source code into a clear, explorable execution map — directly in your browser.
Reading an unfamiliar codebase often means jumping between files, following function calls, and trying to keep the entire execution path in your head. FlowLens makes that process visual.
Paste source code or open a local file, and FlowLens discovers named functions, traces calls between them, and renders the result as an interactive flow map. Select any node to inspect its signature, source preview, incoming connections, and next calls.
The current MVP is completely browser-based. Your code is analyzed locally and is never uploaded to a server.
- Understand unfamiliar code faster — see the main execution path at a glance.
- Navigate complex logic — follow calls without constantly switching between functions.
- Explain systems clearly — export the discovered flow as a Mermaid diagram.
- Reduce onboarding time — give new contributors a visual entry point into the code.
- Keep source private — analysis runs entirely inside the browser.
| Capability | What it does |
|---|---|
| Function discovery | Finds named functions in JavaScript, TypeScript, and basic Python source |
| Call mapping | Connects calls made between discovered functions |
| Interactive canvas | Supports node selection, panning, and zooming |
| Two layouts | Switches between horizontal Flow and vertical Stack views |
| Node inspector | Shows signature, line number, source preview, and connections |
| Instant search | Highlights matching functions and dims unrelated nodes |
| File import | Opens .js, .jsx, .ts, .tsx, and .py files |
| Mermaid export | Copies the current graph as a Mermaid flowchart |
| Built-in examples | Includes checkout, authentication, and background-worker flows |
| Keyboard shortcuts | Analyze with Ctrl/⌘ + Enter and focus search with / |
- Node.js 18 or newer
- A modern web browser
FlowLens has no third-party runtime dependencies, so there is no install step.
git clone https://github.com/Payroniz/FlowLens.git
cd FlowLens
npm startOpen http://localhost:4173 in your browser.
To use a different port:
PORT=3000 npm start- Paste JavaScript, TypeScript, or Python code into the source editor.
- Select Analyze flow or press
Ctrl/⌘ + Enter. - Click a node to inspect its source and outgoing calls.
- Search for a function, change the layout, or zoom and pan around the canvas.
- Select Export to copy the graph as Mermaid syntax.
You can also use the upload button to open a supported source file or load one of the included examples.
flowchart LR
A["Source code"] --> B["Function discovery"]
B --> C["Local call detection"]
C --> D["Graph construction"]
D --> E["Interactive SVG map"]
E --> F["Node inspector"]
E --> G["Mermaid export"]
The analyzer uses lightweight, dependency-free heuristics:
- It scans the source for supported function declaration patterns.
- It records each function's name, parameters, line number, and source body.
- It looks for calls to other functions discovered in the same source.
- It classifies nodes by naming convention, such as entry, decision, data, or process.
- It calculates graph depth and passes the result to the SVG renderer.
This approach makes the MVP fast and easy to run. It is not intended to replace a full abstract syntax tree parser yet; see Current limitations.
| Language | Current support |
|---|---|
| JavaScript | Named functions, async functions, and common arrow-function declarations |
| TypeScript | JavaScript-compatible function syntax; type-heavy signatures may be partial |
| Python | Basic def and async def declarations with local function calls |
The current analyzer maps calls only when both the caller and target are declared in the pasted or imported source.
FlowLens/
├── index.html # Application shell and accessible UI structure
├── styles.css # Dashboard and graph styling
├── app.js # UI state, SVG renderer, and interactions
├── analyzer.js # Source analysis and Mermaid export
├── server.js # Dependency-free local development server
├── tests/
│ └── analyzer.test.js # Analyzer behavior tests
├── package.json # Project scripts and metadata
└── README.md # Project documentation
The analysis engine is kept separate from the interface, allowing it to be tested or replaced without rewriting the visual layer.
Run the analyzer tests with:
npm testYou can also validate the JavaScript syntax directly:
node --check app.js
node --check analyzer.js
node --check server.jsFlowLens currently performs all analysis in the browser:
- Source code is not sent to an API.
- No account is required.
- No analytics or tracking SDK is included.
- Imported files are read locally using the browser File API.
If a future version introduces cloud analysis or project synchronization, those features should be opt-in and documented separately.
The MVP analyzer is deliberately heuristic. At this stage it does not fully understand:
- Imports and calls across multiple files
- Aliased, dynamic, or computed function calls
- Overloaded TypeScript signatures and advanced syntax
- Class inheritance and method resolution
- Runtime branches, loops, and data-dependent execution paths
- Framework-specific routing and dependency injection
The displayed graph represents relationships inferred from source text, not a recorded runtime trace.
- Interactive function-call map
- JavaScript and basic Python support
- Search, zoom, pan, and node inspection
- Local file import and Mermaid export
- AST-based JavaScript and TypeScript analysis
- Multi-file and full-repository scanning
- Python
astintegration - Import, route, and event-flow discovery
- GitHub repository import
- Shareable read-only maps
- VS Code extension
- Saved projects and team workspaces
Contributions and experiments are welcome. A simple workflow is:
- Fork the repository.
- Create a focused branch:
git switch -c feature/my-improvement. - Make the change and add tests where appropriate.
- Run
npm test. - Open a pull request describing the problem and your approach.
For analyzer changes, include a small source example that demonstrates the new syntax or edge case.
FlowLens is an early MVP. The interface and core interaction model are functional, while the analyzer is intentionally lightweight so the product direction can be validated before investing in language-specific AST infrastructure.