Flow

A group of components for building directed flow diagrams with nodes and connectors.

Start

Branch A1
Branch A2

Installation

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

Copy the Source Code

Copy and paste the following code into your project:

connectors.svelte

connectors.ts

descendants.svelte.ts

diagram-context.svelte.ts

flow-anchor.svelte

flow-node-list.svelte

flow-node.svelte

flow-parallel.svelte

flow-root.svelte

index.ts

node-context.svelte.ts

render-props.ts

types.ts

Add Tailwind CSS

Add the following to your routes/layout.css file:

src/lib/styles/kumo.css

Folder Structure

Examples

Simple

Step 1
Step 2
Step 3

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

Custom Node Styling

my-worker
Taller node

Disabled Nodes

Request

Primary Handler
Backup Handler (disabled)

Response

Nested Node List

Client Users
Engineering Team Access

All Authenticated Users
Client Users
Site Users

Contractor Access

Destinations

Parallel Node Adjustment

Start

Short
Medium Length
Very Long Node Name

Planning Large Diagrams

Start
Authenticate
Validate
Transform
Process
Store
Notify
Log
Complete
End

Vertical Parallel

Start

Branch A
Branch B
Branch C

Vertical

Step 1
Step 2
Step 3