Workflow Canvas

Work in Progress

Interactive canvas for building visual AI workflow diagrams. Features drag-and-drop nodes, automatic edge routing, zoom/pan controls, mini-map, and undo/redo. Perfect for creating complex automation workflows.

Note: This component is currently under development. Some features may not work as expected. We're actively working on improvements and will update the documentation once stable.

Preview

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

Installation

Terminalbash

Usage

Reacttsx

Examples

Simple Workflow

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

Read-only Mode

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

Without Minimap/Controls

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

With Custom Event Handlers

Props

Name	Type	Default	Description
`initialNodes`	`Node[]`	`[]`
`initialEdges`	`Edge[]`	`[]`
`nodeTypes`	`Record<string, React.ComponentType<any>>`	—
`onNodesChange`	`OnNodesChange`	—	Callback when nodes are added, removed, or modified
`onEdgesChange`	`OnEdgesChange`	—	Callback when edges are added, removed, or modified
`onConnect`	`OnConnect`	—	Callback when two nodes are connected
`readOnly`	`boolean`	`false`
`showMiniMap`	`boolean`	`true`
`showControls`	`boolean`	`true`	Display zoom/pan controls
`showBackground`	`boolean`	`true`
`backgroundVariant`	`'dots' \| 'lines' \| 'cross'`	`'dots'`
`isRTL`	`boolean`	`false`
`className`	`string`	—	Additional CSS classes
`fitViewOptions`	`FitViewOptions`	`{ padding: 0.2 }`
`defaultEdgeOptions`	`DefaultEdgeOptions`	`{ animated: false, type: 'smoothstep' }`