Component

Flow Editor

A pan/zoom node-and-edge diagram editor for architecture diagrams and decision trees. Renders inside InfiniteCanvas; edges are smooth cubic bezier SVG paths; nodes support click and drag callbacks.

Architecture diagram

Model system components and service boundaries. Click a node to select it.

Client

API Gateway

Auth Service

Database

Decision tree

Branching logic flows with labelled edges (Yes/No, route names, etc.).

Start

Logged in?

Show Login

Show Dashboard

Selected node

Pass selectedId or set selected: true on a node directly to show the selection ring.

Node B is pre-selected via the selected property.

Node A

Node B

Node C

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { FlowEditor } from '@refraction-ui/react'
import type { FlowNode, FlowEdge } from '@refraction-ui/react'

const nodes: FlowNode[] = [
  { id: 'a', x: 40,  y: 100, label: 'Service A' },
  { id: 'b', x: 260, y: 100, label: 'Service B' },
]

const edges: FlowEdge[] = [
  { id: 'e1', source: 'a', target: 'b', label: 'calls' },
]

export function MyDiagram() {
  const [selectedId, setSelectedId] = React.useState<string | undefined>()

  return (
    <FlowEditor
      nodes={nodes}
      edges={edges}
      selectedId={selectedId}
      onNodeClick={(id) => setSelectedId(id)}
      aria-label="Architecture diagram"
    />
  )
}

Props

Prop	Type	Default	Description
`nodes`	`FlowNode[]`	--	Array of nodes to render. Each node has id, x, y, label and optional width/height/selected.
`edges`	`FlowEdge[]`	--	Array of directed edges. Each edge has id, source node id, target node id, and optional label.
`onNodeClick`	`(id: string) => void`	--	Called with the id of the node that was clicked.
`onNodeMove`	`(id: string, x: number, y: number) => void`	--	Called when a node is dragged to a new position. Passes the node id and new canvas coordinates.
`renderNode`	`(node: FlowNode) => React.ReactNode`	--	Override the content rendered inside a node box.
`selectedId`	`string`	--	Id of the currently selected node (controlled). Adds a ring to the matching node.
`showGrid`	`boolean`	`true`	Pass to InfiniteCanvas — shows the background dot/line grid.
`showControls`	`boolean`	`true`	Pass to InfiniteCanvas — shows zoom and pan control buttons.
`className`	`string`	--	Additional CSS classes for the outer wrapper.