CodeFlow Lite

Instantly visualize how your files and functions connect as a flow graph inside VS Code.

What it does

• Scans your workspace (JavaScript/TypeScript) and detects:
  • File-level imports/includes
  • Function declarations and intra-project function calls
• Builds a node graph
  • File → File (imports)
  • File → Function (definition)
  • Function → Function (calls)
• Renders the graph in a VS Code Webview using an interactive force layout

How to use

1. Open a workspace folder with .ts/.js sources(supported for .ts/.js for now).
2. Run CodeFlow: Show Project Graph (Command Palette or the contributed command ).
3. Inspect the graph:
   • Blue nodes = files
   • Purple nodes = functions
   • Gray nodes = external modules
   • Orange edges = function calls
   • Blue edges = imports
   • Green edges = file→function definitions

Notes & limits

• Analysis currently targets JavaScript/TypeScript (ts/tsx/js/jsx/mjs/cjs).
• Imports are resolved for relative paths; package imports are shown as external nodes.
• Function call resolution is heuristic (name-based) and favors matches in the same file.
• The scanner skips common build/output folders (node_modules, dist, out, build, .git, .vscode, coverage).

Development

npm install
npm run compile   # type-check, lint, bundle
npm test          # runs the VS Code extension tests

Roadmap ideas

• Broader language support
• Runtime/DSA visualizations
• Marketplace publishing polish (icon, categories, CI)