FlowMind is a high-performance visual code navigator for VS Code that transforms your React, JavaScript, and TypeScript files into an interactive, node-based graph.
✨ Key Features
🧩 Spatial Mapping
Stop scrolling through hundreds of lines. FlowMind maps your UI Components, Logic Handlers, and State Hooks into a spatial canvas. Using a Stable ID System, nodes stay in place even as you add or remove lines of code.
⚡ Live Simulation Mode
Visualize execution before you even run your app.
Trace Events: Click a UI node to see the event trigger travel to its logic handler.
State Ripples: Watch as state mutations (like count + 1) animate back to the UI, highlighting exactly which components will re-render.
Mock Values: See real-time value badges on your state nodes during simulation.
🎯 Bi-Directional Navigation
Graph to Code: Click any node to instantly jump to the exact line in your editor.
Code to Graph: Real-time AST synchronization ensures your visual map updates as you type.
🛠️ Configurable Visuals
Toggle between Animated/Blinking edges or Static lines.
Auto-layout your graph with a single click using the integrated Dagre engine.
🚀 Getting Started
Open any .tsx, .jsx, .ts, or .js file.
Click the FlowMind Icon in the top-right Editor Toolbar.
Explore your code structure visually!
🆕 What's New in v0.1.4
Incremental AST Parsing:
Performance Boost: Only re-parses changed functions and components instead of the entire file.
Block-Level Hashing: Smart detection of code changes keeps your UI responsive even on 1000+ line files.
Improved Stability: Fixed ghost edges and duplicate nodes by ensuring clean cache updates.
🆕 What's New in v0.1.3
Foundation Hardening:
Virtualized Rendering: Extremely smooth performance even with 100+ nodes using viewport culling.
Graceful Error Recovery: No more blank screens! If your code has a syntax error, FlowMind shows a warning and a partial graph of the valid parts.
Stability Fix: Fixed the "reopening sync" bug that caused blank screens when toggling the canvas.
Improved Simulation: Enhanced logic for detecting state update patterns (increments, decrements, and functional updaters).
🆕 What's New in v0.1.1
Official Branding: Fully transitioned to the FlowMind name and icon.
🔧 Settings
FlowMind provides the following settings:
flowmind.edgeAnimation: Enable/Disable animated lines for node connections.
