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.
🛡️ Hook Dependency Analyzer
Never miss a dependency again. FlowMind analyzes your useEffect, useMemo, and useCallback hooks in real-time.
Missing Deps: Visual red dashed edges trace back from the missing state/logic node to your hook.
Unnecessary Deps: Warning badges alert you to dependencies that aren't actually used in the hook body.
Dependency Graph: See a clear visual map of what your hooks are watching.
🎯 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.3.0
Milestone 2.2: Hook Dependency Analyzer:
Real-time Validation: Detects missing and unnecessary dependencies for useEffect, useMemo, and useCallback.
Visual Warning Edges: Traces red dashed lines from missing state dependencies directly to the hook node.
Warning Badges: Pulsing ⚠️ icons on hook nodes with detailed error messages available on hover/expansion.
Architecture Overview: All correct dependencies are now visualized as solid edges, providing a complete map of hook reactivity.
🆕 What's New in v0.2.2
Milestone 1.2: Chained Cross-File Tracing:
Infinite Logic Chaining: Follow logical paths across an infinite chain of files (A → B → C).
Module Groups: Traced logic is now visually encapsulated in titled, color-coded containers, keeping remote files separate from local logic.
Hierarchical Auto Layout: Smart layout engine organizes multi-file chains into clean "islands" of logic without mixing files.
Improved Navigation: Fixed canvas panning over large clusters and refined pointer-event handling.
🆕 What's New in v0.2.1
Milestone 1.1: Project-Level Module Graph:
Visual Architecture: New command FlowMind: Show Project Module Graph scans your src directory and builds a high-level map of file dependencies.
File Navigation: Click any file node in the project graph to instantly open it and switch to its detailed spatial index.
Deep Import Resolution: Automatically resolves aliased imports (@/) and barrel exports to draw accurate connection lines.
🆕 What's New in v0.2.0
Milestone 0: Foundation Hardening Completed:
Lazy Subgraph Loading: Large files (>2000 lines by default) now load components as collapsed nodes. Expand and collapse component details on demand to save memory and parsing overhead.
Fixed Simulation Accuracy: Resolved edge case bugs with decrement state update detection in arrow functions.
Optimized Parsing: Refactored logic declarations to filter out static style sheets (StyleSheet.create) and non-functional variables.
🆕 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 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 (default: true).
flowmind.lazyLoadThreshold: Threshold (in lines of code) above which React component details are collapsed by default (default: 2000).
