Flow

A node-and-edge canvas for workflows, pipelines, agent trees and driver maps, themed with Gaudi tokens and built on React Flow.

Installation

pnpm add github:ahmadassaf/design-system @xyflow/react

import { Flow } from '@gaudi/design-system/core/Flow';

Usage

import '@gaudi/design-system/flow.css';import { Flow, layoutFlow } from '@gaudi/design-system/core/Flow';
const edges = [{ id: 'start-review', source: 'start', target: 'review' }];const nodes = layoutFlow([  { id: 'start', type: 'pill', data: { title: 'Draft ready', icon: 'FileText', target: false } },  { id: 'review', type: 'step', data: { title: 'Editor review', status: 'running', meta: ['Due today'] } }], edges);
<Flow label='Publishing pipeline' nodes={nodes} edges={edges} className='h-[32rem]' />

Examples

Agent tree with test run

Automation workflow editor

Growth impact map

Payments pipeline with an inspector

Pipeline run monitor

API

Accessibility

The canvas is a labelled region described by a step count, followed by a visually hidden list of every step and where it leads. Nodes and edges are focusable: Enter or Space selects, arrow keys move a selected node and Delete removes it, with React Flow announcing moves. Controls, menus and insert buttons are labelled; handles are pointer targets described by their node. Dragging is never the only way to edit: offer menus, toolbars or an inspector for the same actions.

Notes

• Requires the @xyflow/react peer dependency; its structural CSS is imported inside the Gaudi stylesheet.
• React Flow does not provide a keyboard way to draw a new connection between handles; offer an inspector field or menu action for linking.
• Give the canvas an explicit height with className; it scrolls and zooms inside its own region.

Related