FlowGraph
FlowGraph is an advanced visual data flow analyzer for React. It automatically parses your React codebase, visualizing component hierarchy, props passing, and context usage in a dynamic, interactive graph.
Unlike static visualizers, FlowGraph is context-aware and performance-focused.
Killer Features
Stop performance bottlenecks before they ship. Toggle "Perf" mode to instantly visualize risky prop passing:
- Orange Dashed Lines: Identify where you are passing inline objects, arrays, or arrow functions directly to children. these break memoization!
2. Focus Mode
Debug complex codebases without the noise.
- Double-Click any node to enter Focus Mode.
- Checks out only the node, its parents, and its children.
- Shift + Double-Click to jump straight to the source code file.
3. Git Impact Analysis
Visualize the blast radius of your changes.
- Toggle "Git Impact" to see which files you have modified (Yellow).
- Purple Nodes: See exactly which other components are impacted by your changes (via potential re-renders or context updates).
4. Prop Drill Heatmap
See the flow of data.
- Toggle "Heatmap" to visualize deep prop drilling chains.
- Helps you decide when to switch to Context or Redux.
5. Component Complexity Score
FlowGraph calculates a Complexity Score (CCS) using a weighted formula optimized for maintainability.
Formula: CCS = P + (2 * H) + (3 * C) + L
- P (Props): 1 point each
- H (Hooks): 2 points each (State, Effects, Memos)
- C (Connections): 3 points each (Context, Redux, Queries) - High coupling cost!
- L (Logic Density): 1 point per conditonal return or ternary.
Thresholds:
- Green (1-7): Simple. ("Pure" component)
- Yellow (8-15): Moderate. (Feature component)
- Orange (16-25): Complex. (Consider refactoring)
- Red (26+): Critical. ("God" component)
6. Zombie Component Detection
Find dead code instantly.
- Toggle "Zombie" mode.
- Dark Grey / Faded Nodes: Components that are defined but NEVER rendered by any other component in the graph.
- These are safe to delete or refactor.
Usage
- Open your React project.
- Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
- Run "FlowGraph: Open Graph".
- Wait a moment for the parser to analyze your project.
Legend
- Blue Lines: Safe props passed.
- Purple Dashed Lines: Context consumption.
- Orange Dashed Lines: Performance Risk (Inline object/function).
- Neon Pink Halo: Circular Dependency detected.
Contributing
This project is open source. Feel free to submit PRs!
License
Apache 2.0
