Flow

Start

Branch A
Branch B
Branch C

<Flow>
  <Flow.Node>Start</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Branch A</Flow.Node>
    <Flow.Node>Branch B</Flow.Node>
    <Flow.Node>Branch C</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>End</Flow.Node>
</Flow>

Installation

Barrel

import { Flow } from "@cloudflare/kumo";

Granular

import { Flow } from "@cloudflare/kumo/components/flow";

Usage

The Flow components work together to create directed flow diagrams. Use Flow as the container, Flow.Node for individual steps, and Flow.Parallel to create branching paths.

import { Flow } from "@cloudflare/kumo";

export default function Example() {
  return (
    <Flow>
      <Flow.Node>Step 1</Flow.Node>
      <Flow.Node>Step 2</Flow.Node>
      <Flow.Node>Step 3</Flow.Node>
    </Flow>
  );
}

Examples

Sequential Flow

A simple linear flow with nodes connected in sequence.

Step 1
Step 2
Step 3

<Flow>
  <Flow.Node>Step 1</Flow.Node>
  <Flow.Node>Step 2</Flow.Node>
  <Flow.Node>Step 3</Flow.Node>
</Flow>

Parallel Branches

Use Flow.Parallel to create branching paths that run in parallel.

Start

Branch A
Branch B
Branch C

<Flow>
  <Flow.Node>Start</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Branch A</Flow.Node>
    <Flow.Node>Branch B</Flow.Node>
    <Flow.Node>Branch C</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>End</Flow.Node>
</Flow>

Custom Node Styling

Use the render prop to completely customize node appearance. The render prop accepts a React element that will be used instead of the default styled node.

my-worker

<Flow>
  <Flow.Node render={<li className="rounded-full size-4 bg-kumo-ring" />} />
  <Flow.Node
    render={
      <li className="bg-kumo-contrast text-kumo-inverse rounded-lg font-medium py-2 px-3">
        my-worker
      </li>
    }
  />
</Flow>

Centered Alignment

Use the align prop to vertically center nodes. This is useful when nodes have different heights.

my-worker
Taller node

<Flow align="center">
  <Flow.Node render={<li className="rounded-full size-4 bg-kumo-ring" />} />
  <Flow.Node>my-worker</Flow.Node>
  <Flow.Node
    render={
      <li className="py-6 px-3 rounded-md shadow bg-kumo-base ring ring-kumo-line">
        Taller node
      </li>
    }
  />
</Flow>

Complex Flow

Combine sequential and parallel nodes to build complex workflows.

Trigger

Validate Input
Check Cache

Process Request

Log Analytics
Update Cache
Send Notification

Complete

<Flow>
  <Flow.Node>Trigger</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Validate Input</Flow.Node>
    <Flow.Node>Check Cache</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>Process Request</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Log Analytics</Flow.Node>
    <Flow.Node>Update Cache</Flow.Node>
    <Flow.Node>Send Notification</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>Complete</Flow.Node>
</Flow>

By default, connectors attach to the center of each node. Use Flow.Anchor with its render prop to specify custom attachment points. The type prop controls whether the anchor serves as a "start" point (where connectors leave) or "end" point (where connectors arrive).

Load balancer
my-worker
Bindings2

DATABASE
OTHER_SERVICE

<Flow>
  <Flow.Node>Load balancer</Flow.Node>
  <Flow.Node
    render={
      <li className="shadow-none rounded-lg ring ring-kumo-line bg-kumo-overlay">
        <Flow.Anchor
          type="end"
          render={
            <div className="text-kumo-subtle h-10 flex items-center px-2.5">
              my-worker
            </div>
          }
        />
        <Flow.Anchor
          type="start"
          render={
            <div className="bg-kumo-base rounded ring ring-kumo-line shadow px-2 py-1.5 m-1.5 mt-0">
              Bindings
              <span className="text-kumo-subtle w-5 ml-3">2</span>
            </div>
          }
        />
      </li>
    }
  />
  <Flow.Parallel>
    <Flow.Node>DATABASE</Flow.Node>
    <Flow.Node>OTHER_SERVICE</Flow.Node>
  </Flow.Parallel>
</Flow>

Panning Large Diagrams

When a diagram exceeds its container, Flow automatically enables panning. Drag to pan the viewport, or use the scroll wheel. Scrollbars appear on hover to indicate available scroll area.

Start
Authenticate
Validate
Transform
Process
Store
Notify
Log
Complete
End

<Flow>
  <Flow.Node>Start</Flow.Node>
  <Flow.Node>Authenticate</Flow.Node>
  <Flow.Node>Validate</Flow.Node>
  <Flow.Node>Transform</Flow.Node>
  <Flow.Node>Process</Flow.Node>
  <Flow.Node>Store</Flow.Node>
  <Flow.Node>Notify</Flow.Node>
  <Flow.Node>Log</Flow.Node>
  <Flow.Node>Complete</Flow.Node>
  <Flow.Node>End</Flow.Node>
</Flow>

Components

The root container for flow diagrams. Provides panning and scrolling for large diagrams.

Prop	Type	Description
align	"start" \| "center"	Vertical alignment of nodes. `"start"` (default) aligns to top, `"center"` vertically centers nodes.
className	string	Additional CSS classes for the container
children	ReactNode	Flow.Node and Flow.Parallel components

Flow.Node

A single node in the flow diagram. Renders as a styled card with automatic connector points. Use the render prop to customize the element.

Prop	Type	Description
render	ReactElement	Custom element to render instead of the default styled node
children	ReactNode	Content to display inside the node

Flow.Anchor

A component that marks a custom attachment point for connectors within a Flow.Node. Use this to control exactly where connector lines attach instead of the default node center by providing a custom element via the render prop.

Prop	Type	Description
type	"start" \| "end"	Whether this anchor serves as a "start" point (outgoing connectors) or "end" point (incoming connectors). When omitted, serves as both.
render	ReactElement	Custom element to render for the anchor point
children	ReactNode	Content to render at the anchor point

Flow.Parallel

A container for parallel branches. Child Flow.Node components are displayed in parallel with junction connectors.

Prop	Type	Description
children	ReactNode	Flow.Node components to display in parallel