Getting StartedInstallation and setup guides 6
FormInput and selection components 27
FlowWorkflow graph and execution surfaces 4
LayoutStructural layout components 9
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Flow Execution Graph

Flow Execution Graph is the standalone workflow diagram used by live execution surfaces. Use it when a product already owns the surrounding inspector, properties panel, routing, or layout but still needs the same execution-aware graph surface.

Running workflow

Switch one controlled graph between editable, inspect-only, and readonly interaction modes.

Running workflow graph with Plain CSS

Select a node to reveal connection points. Drag to connect; select a connection and press Delete or Backspace to remove it.

Ticket intakeReceives a support ticket from the help desk queue. completed
Normalize ticketCleans fields, detects language, and extracts customer account metadata. completed
1 validation error
Risk checkScores urgency, SLA risk, and churn probability. running

Scoring account risk signals.

Profile lookupLoads account plan, owner, and recent product usage. queued

Waiting for normalized ticket.

Human reviewSupport lead approves the proposed escalation response. idle
Publish responsePosts the final customer response and escalates ownership. idle
Notify ownerSends the account owner the escalation summary. idle
Archive auditStores the run transcript and payload metadata. idle

Responsibilities

The graph maps a workflow definition and run snapshot into node and connection presentation state. It controls selection, inspected node, selected execution, viewport forwarding, and execution activation events.

Boundary

The component does not render a property panel, execution history, payload viewer, or split layout. Pair it with Flow Node Properties or a product-owned inspector when users need details beside the diagram. Use mode="edit" when users need to move nodes or author connections, mode="inspect" for selection without mutations, and mode="readonly" for viewport-only interaction.