Skip to content

DoubleY

New developers opening a React repo often cannot quickly see how components nest and which file owns what.

Code Demo Cerebral Valley

Core trick

Parses React source files to build a component import graph, rendered as an interactive panel inside a JetBrains IDE.

Tags

dev tools

Description

New developers opening a React repo often cannot quickly see how components nest and which file owns what. Reading files one by one or searching imports takes time and does not give a clear mental map of hierarchy, so onboarding and debugging feel slow and confusing. React Flow Visualizer is an IntelliJ plugin that scans the project and draws an interactive component graph in a side panel. Beginners can see parent–child structure at a glance and jump to source from nodes, so they can understand code layers faster.
YiZhang527/react-flow-visualizer★ 00 forksHTMLCreated Apr 18, 2026 · last push Apr 19, 2026

README excerpt

# React Flow Visualizer

Beginners opening a React repo often cannot quickly see how components nest and which file owns what. Reading files one by one takes time and does not give a clear mental map of the hierarchy, so onboarding and debugging feel slow and confusing.

A **JetBrains IDE** plugin built on the **IntelliJ Platform**. It scans React components in your project from a right-side tool window, renders a component graph with **D3**, and lets you jump to source by clicking nodes. The explanation panel is generated in the embedded page from heuristics.

## Features

- **Project analysis**: Walks `.js`, `.jsx`, `.ts`, and `.tsx` files under content roots and detects function and arrow-function components.
- **Component graph**: Infers parent–child links from `import` usage; prefers a component named `App` as the root, otherwise uses the first parsed component.
- **Node details**: Shows `useState` usage and a props list parsed from the function signature.
- **Graph UI**: Uses the embedded browser (JCEF) — click nodes to open sources, zoom, and toggle the side panel.

## Tech stack

| Item | Details |
|------|---------|
| Language | Kotlin (JVM 17) |
| Build | Gradle 8.5, `org.jetbrains.intellij.platform` 2.2.0 |
| Target IDE | IntelliJ IDEA Community **2023.2.1** (`sinceBuild = 232`, `untilBuild = 241.*`) |
| Visualization | Embedded browser loads `graph.html`; charting uses [D3 v7](https://d3js.org/) |

## Requirements

- **JDK 17**
- Gradle downloads the matching Inte

Team