Visualizes the current code file as a Mermaid flowchart, in the same editor tab.
Features
Click the diagram icon in the editor title bar to switch the current file to a flowchart view.
Click the code icon in the title bar to switch back to the text editor.
The diagram updates while you edit the file in another split.
Source is parsed into an AST (@babel/parser) — function entries, await calls, if/switch decisions, return, and throw become candidate nodes.
A local Transformers.js model (Xenova/all-MiniLM-L6-v2, 8-bit quantized) scores candidates for architectural relevance. Only the top nodes are drawn, so diagrams stay small (8 nodes max).
Fully local after first setup: no API calls. Falls back to a deterministic offline parser for non-JS/TS files and unparseable code.
Commands
Code Flow: Visualize File (code-flow.visualize) — opens the current file in the diagram editor.
Code Flow: Show Code (code-flow.showCode) — returns the diagram tab to the text editor.
Requirements
On first render the embedding model (~23 MB) downloads once to the extension's global storage. A network connection is needed that one time.
If the model cannot load, diagrams still generate via a deterministic node ranking.
Untitled files cannot be visualized. Save the file first.
Development
npm install — installs dependencies.
npm run lint / npm test — lint and run the test suite.
node setup-junction.js — links the repo into the editor's extension directory so code changes take effect after Developer: Reload Window. No repackaging needed.
npm run package — builds a .vsix for distribution.
Release Notes
0.0.1
Initial release: in-place code/diagram toggle powered by a custom editor and Mermaid.
