Dependency Graph

Visualize component relationships and data flow in your React application.

Overview

The Dependency Graph visualizes how components interact, share state, and depend on each other, helping you understand your application's architecture.

API

import { DependencyGraph } from 'react-dev-debugger';

<DependencyGraph
  layout="hierarchical" // or "force-directed"
  showProps={true}
  showState={true}
  onNodeClick={(node) => console.log(node)}
/>

Basic Example

import { DependencyGraph } from 'react-dev-debugger';

function App() {
  return (
    <div>
      <YourApp />
      <DependencyGraph layout="hierarchical" />
    </div>
  );
}

Live Playground

Graph Visualization

Component Graph

Graph Controls

Layout:HierarchicalForce Directed

Show Props

Show State

<DependencyGraph
  layout="hierarchical"
  showProps={true}
  showState={true}
  onNodeClick={(node) => {
    console.log(node);
  }}
/>

Node Details

Click on a node to see details

Legend:

• ● Components
• ● State
• ● Props
• ━━━ Parent-Child
• - - - Props Flow

Features:

• Visualize component hierarchy
• Track data flow (props & state)
• Interactive node selection
• Multiple layout options

Features

• Visual Relationships: See how components connect
• Data Flow: Track prop and state flow
• Interactive Nodes: Click to inspect components
• Multiple Layouts: Choose visualization style
• Performance Highlights: Identify bottlenecks

Next Steps

• Graph View - UI component for graphs
• Inspector View - Inspect components