Svelte Animations
Command Palette
Search for a command to run
300

Flow

A group of components for building directed flow diagrams with nodes and connectors. Inspired by Kumo UI.

  • Start
    • Branch A1
    • Branch A2
  • End

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/flow.json

Usage

Examples

Sequential Flow

  • Step 1
  • Step 2
  • Step 3

Parallel Branches

  • Start
    • Branch A
    • Branch B
    • Branch C
  • End

Vertical Orientation

  • Step 1
  • Step 2
  • Step 3

Custom Node Styling

  • my-worker
  • Taller node

Centered Alignment

  • Start
  • Taller node
  • End

Complex Flow

    • HTTP Trigger
    • Cron Trigger
  • Process Request
    • Log Analytics
    • Update Cache
    • Send Notification
  • Complete

Custom Anchor Points

  • Load balancer
  • my-worker
    Bindings 2
    • DATABASE
    • OTHER_SERVICE

Panning Large Diagrams

  • Start
  • Authenticate
  • Validate
  • Transform
  • Process
  • Store
  • Notify
  • Log
  • Complete
  • End

Disabled Nodes

  • Request
    • Primary Handler
    • Backup Handler (disabled)
  • Response

Parallel Node Alignment

  • Start
    • Short
    • Medium Length
    • Very Long Node Name
  • End

Nested Node Lists in Parallel

      • Client Users
      • Engineering Team Access
        • All Authenticated Users
        • Client Users
        • Site Users
      • Contractor Access
  • Destinations

Vertical Parallel

  • Start
    • Branch A
    • Branch B
    • Branch C
  • End

Additional Examples

Junction Markers

Compare square junction markers with connectors that have no markers.

Square markers

  • Start
    • Branch A
    • Branch B
  • End

No markers

  • Start
    • Branch A
    • Branch B
  • End

Overflow Detection

Detect horizontal and vertical canvas overflow as the diagram changes size.

Horizontal overflow: No · Vertical overflow: No

  • Start
  • Authenticate
  • Validate
  • Transform
  • Process
  • Store
  • Notify
  • Complete

Parallel Start vs End Alignment

Compare start-aligned and end-aligned nodes inside parallel branches.

Start aligned

  • Start
    • Short
    • Medium branch
    • Longer branch label
  • End

End aligned

  • Start
    • Short
    • Medium branch
    • Longer branch label
  • End

Responsive Orientation Toggle

Switch a flow between horizontal and vertical orientations at runtime.

  • Start
  • Process
  • Complete

Dynamically Adding and Removing Nodes

Add and remove keyed flow nodes while keeping their connectors in sync.

  • Start
  • Review
  • Complete

Interactive Custom Nodes

Build selectable workflow nodes as a reusable component.

Selected node: Upload files