@yantrakit/flowchart-react

A React flowchart component with automatic node layout, path detection, and interactive controls.

GitHub Repo: https://github.com/yantrakitinc/flowchart-react

View Documentation & Examples →

Installation

npm install @yantrakit/flowchart-react
# or
pnpm add @yantrakit/flowchart-react

Usage

import { FlowChart } from '@yantrakit/flowchart-react';
import '@yantrakit/flowchart-react/styles';

const nodes = [
  { id: 'start', label: 'Start', type: 'start' },
  { id: 'process', label: 'Process', type: 'process' },
  { id: 'end', label: 'End', type: 'end' },
];

const edges = [
  { from: 'start', to: 'process' },
  { from: 'process', to: 'end' },
];

function App() {
  return (
    <FlowChart
      nodes={nodes}
      edges={edges}
      onNodeClick={(node) => console.log('Clicked:', node)}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | nodes | FlowNode[] | required | Array of node objects | | edges | FlowEdge[] | required | Array of edge objects | | title | string | - | Optional title displayed above the chart | | onNodeClick | (node) => void | - | Callback when a node is clicked | | onPathSelect | (path) => void | - | Callback when a path is selected | | className | string | - | Additional CSS class for the container |

Node Types

• start - Entry point (rounded rectangle)
• end - Exit point (rounded rectangle)
• process - Standard process step (rectangle)
• decision - Decision point (diamond shape)

Features

• Auto Layout - Automatic node positioning based on graph structure
• Path Detection - Detects all paths from start to end nodes
• Interactive Controls - Zoom, pan, and click nodes
• Path Filtering - Select and highlight specific paths

Documentation

For full documentation, interactive examples, and API reference, visit:

yantrakit.com/flowchart-react

License

MIT © Yantrakit Inc