COMPJOENENTS
Start Process
Initial Setup
Data Validation
Task A1
SubTask A2.1
SubTask A2.2
SubTask A2.3
Task A3
Task B1
Task C1
Task C2

Flow Diagram

Component
React
charts
diagrams

A responsive flow diagram component for visualizing processes and workflows

npx shadcn@latest add https://www.compjoenents.com/r/flow-diagram.json

Features

  • Linear Flows: Create simple sequential processes
  • Parallel Branches: Split flows into multiple parallel paths
  • Nested Forks: Create complex nested branch structures
  • Custom Node Content: Add React components inside nodes
  • Automatic Layout: Handles spacing and connections automatically
  • Responsive Design: Adapts to different screen sizes

Data Structure

The Flow Diagram component uses a structured data format to define nodes and their relationships:

type Nodes = {
  graph: FlowGraphDefinition;
};

// The graph can contain node references or column definitions
type FlowGraphDefinition = (FlowNodeRef | FlowColumnsDefinition)[];

// A node reference can be a string ID or an object with properties
type FlowNodeRef =
  | string
  | {
      id: string;
      title?: string;
      element?: React.ReactNode;
    };

// A columns definition is an array of columns (for forks)
type FlowColumnsDefinition = FlowColumn[];

// A column is an array of items (nodes or nested forks)
type FlowColumn = (FlowNodeRef | FlowColumnsDefinition)[];

Basic Usage

The most common use case is a simple process flow with a fork that rejoins. The component accepts a nodes prop with a graph array that defines the flow structure.

Start Process
Initial Setup
Branch A
Process A
Branch B
Process B
Additional Step B
Consolidate Results
Complete
 
// Basic Flow Diagram Example

import { FlowDiagram, type Nodes } from "@/components/flow-diagram";

const nodes: Nodes = {
  graph: [
    "Start Process",
    "Initial Setup",
    [
      ["Branch A", "Process A"],
      ["Branch B", "Process B", "Additional Step B"],
    ],
    "Consolidate Results",
    "Complete",
  ],
};

export default function DocumentationBasicFlowDiagram() {
  return <FlowDiagram nodes={nodes} />;
}

Custom Node Content

You can add custom React components inside nodes to create rich, interactive diagrams:

User Registration
Start of user flow
Email Signup
Social Login
Complete Profile
User enters additional details
Welcome Page
 
// Custom Elements Flow Diagram Example

import { FlowDiagram, type Nodes } from "@/components/flow-diagram";
import { Button } from "@/components/ui/button";

const nodes: Nodes = {
  graph: [
    { 
      id: "start", 
      title: "User Registration", 
      element: <div className="text-xs text-muted-foreground">Start of user flow</div>
    },
    [
      [
        { 
          id: "email", 
          title: "Email Signup", 
          element: <Button variant="outline" size="sm">Enter Email</Button>
        }
      ],
      [
        { 
          id: "social", 
          title: "Social Login", 
          element: <div className="flex gap-2">
            <Button variant="secondary" size="sm">Google</Button>
            <Button variant="default" size="sm">GitHub</Button>
          </div>
        }
      ],
    ],
    { 
      id: "profile", 
      title: "Complete Profile", 
      element: <div className="text-xs text-muted-foreground">User enters additional details</div>
    },
    { 
      id: "welcome", 
      title: "Welcome Page", 
      element: <Button variant="default" size="sm">Get Started</Button>
    },
  ],
};

export default function DocumentationCustomFlowDiagram() {
  return <FlowDiagram nodes={nodes} />;
}