Flow
kumo-svelte

Flow

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

  • Start
    • Branch A
    • Branch B
    • Branch C
  • End
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node>Start</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Branch A</Flow.Node>
    <Flow.Node>Branch B</Flow.Node>
    <Flow.Node>Branch C</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>End</Flow.Node>
</Flow>

Installation

Barrel

import { Flow, FlowAnchor, FlowList, FlowNode, FlowParallel, FlowRoot } from 'kumo-svelte';

Granular

import { Flow, FlowAnchor, FlowList, FlowNode, FlowParallel, FlowRoot } from 'kumo-svelte/components/flow';

Usage

The Flow components work together to create directed flow diagrams. Use Flow as the container, Flow.Node for individual steps, and Flow.Parallel to create branching paths.

<script lang="ts">import { Flow } from "kumo-svelte";</script>    <Flow>      <Flow.Node>Step 1</Flow.Node>      <Flow.Node>Step 2</Flow.Node>      <Flow.Node>Step 3</Flow.Node>    </Flow>

Examples

Sequential Flow

A simple linear flow with nodes connected in sequence.

  • Step 1
  • Step 2
  • Step 3
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node>Step 1</Flow.Node>
  <Flow.Node>Step 2</Flow.Node>
  <Flow.Node>Step 3</Flow.Node>
</Flow>

Parallel Branches

Use Flow.Parallel to create branching paths that run in parallel.

  • Start
    • Branch A
    • Branch B
    • Branch C
  • End
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node>Start</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Branch A</Flow.Node>
    <Flow.Node>Branch B</Flow.Node>
    <Flow.Node>Branch C</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>End</Flow.Node>
</Flow>

Custom Node Styling

Use the bare prop to remove the default card styling, then pass your own content and classes inside the node.

  • my-worker
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node bare class="size-4 rounded-full bg-kumo-hairline" />
  <Flow.Node bare class="rounded-lg bg-kumo-contrast px-3 py-2 font-medium text-kumo-inverse">
    my-worker
  </Flow.Node>
</Flow>

Centered Alignment

Use the align prop to vertically center nodes. This is useful when nodes have different heights.

  • my-worker
  • Taller node
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow align="center">
  <Flow.Node bare class="size-4 rounded-full bg-kumo-hairline" />
  <Flow.Node>my-worker</Flow.Node>
  <Flow.Node class="px-3 py-6">Taller node</Flow.Node>
</Flow>

Complex Flow

Combine sequential and parallel nodes to build complex workflows.

    • HTTP Trigger
    • Cron Trigger
  • Process Request
    • Log Analytics
    • Update Cache
    • Send Notification
  • Complete
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Parallel>
    <Flow.Node>HTTP Trigger</Flow.Node>
    <Flow.Node>Cron Trigger</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>Process Request</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Log Analytics</Flow.Node>
    <Flow.Node>Update Cache</Flow.Node>
    <Flow.Node>Send Notification</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>Complete</Flow.Node>
</Flow>

Custom Anchor Points

By default, connectors attach to the center of each node. Use Flow.Anchor around custom content to specify attachment points. The type prop controls whether the anchor serves as a "start" point (where connectors leave) or "end" point (where connectors arrive).

  • Load balancer
  • my-worker
    Bindings 2
    • DATABASE
    • OTHER_SERVICE
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node>Load balancer</Flow.Node>
  <Flow.Node bare class="overflow-hidden rounded-lg bg-kumo-overlay shadow-none ring ring-kumo-hairline">
    <div class="flex h-10 items-center px-2.5 text-kumo-subtle">my-worker</div>
    <div class="m-1.5 mt-0 rounded bg-kumo-base px-2 py-1.5 shadow ring ring-kumo-hairline">
      Bindings <span class="ml-3 inline-block w-5 text-kumo-subtle">2</span>
    </div>
  </Flow.Node>
  <Flow.Parallel>
    <Flow.Node>DATABASE</Flow.Node>
    <Flow.Node>OTHER_SERVICE</Flow.Node>
  </Flow.Parallel>
</Flow>

Panning Large Diagrams

When a diagram exceeds its container, Flow automatically enables panning. Drag to pan the viewport, or use the scroll wheel. Scrollbars appear on hover to indicate available scroll area.

  • Start
  • Authenticate
  • Validate
  • Transform
  • Process
  • Store
  • Notify
  • Log
  • Complete
  • End
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow class="max-w-full rounded-lg border border-kumo-hairline">
  <Flow.Node>Start</Flow.Node>
  <Flow.Node>Authenticate</Flow.Node>
  <Flow.Node>Validate</Flow.Node>
  <Flow.Node>Transform</Flow.Node>
  <Flow.Node>Process</Flow.Node>
  <Flow.Node>Store</Flow.Node>
  <Flow.Node>Notify</Flow.Node>
  <Flow.Node>Log</Flow.Node>
  <Flow.Node>Complete</Flow.Node>
  <Flow.Node>End</Flow.Node>
</Flow>

Disabled Nodes

Use the disabled prop on a node to visually indicate it's inactive. Connectors linking to disabled nodes are rendered with reduced opacity.

  • Request
    • Primary Handler
    • Backup Handler (disabled)
  • Response
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node>Request</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Primary Handler</Flow.Node>
    <Flow.Node disabled>Backup Handler (disabled)</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>Response</Flow.Node>
</Flow>

Parallel Node Alignment

Use the align prop on Flow.Parallel to control how nodes with different widths are aligned. Use "start" (default) to align left, or "end" to align right.

  • Start
    • Short
    • Medium Length
    • Very Long Node Name
  • End
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Node>Start</Flow.Node>
  <Flow.Parallel align="end">
    <Flow.Node>Short</Flow.Node>
    <Flow.Node>Medium Length</Flow.Node>
    <Flow.Node>Very Long Node Name</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>End</Flow.Node>
</Flow>

Known Issue: Sidebar / Layout Shift

Toggling the sidebar shifts the Flow container's viewport position. Because connector coordinates are computed from stale getBoundingClientRect values stored in state (captured before the layout shift), the connector lines jump out of alignment until the next remeasure is triggered. Scroll the page while the sidebar is open to hit the same bug via the scroll path.

  • HTTP Request
    • Auth Check
    • Rate Limit
    • Cache Lookup
  • Route Handler
<script lang="ts">
  import { Flow } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">

      <Flow>
        <Flow.Node>HTTP Request</Flow.Node>
        <Flow.Parallel>
          <Flow.Node>Auth Check</Flow.Node>
          <Flow.Node>Rate Limit</Flow.Node>
          <Flow.Node>Cache Lookup</Flow.Node>
        </Flow.Parallel>
        <Flow.Node>Route Handler</Flow.Node>
      </Flow>
    
</div>

Other Examples

Nested Node Lists in Parallel

Use Flow.List inside Flow.Parallel to create parallel branches where each branch contains a sequence of connected nodes.

      • Client Users
      • Engineering Team Access
        • All Authenticated Users
        • Client Users
        • Site Users
      • Contractor Access
  • Destinations
<script lang="ts">
  import { Flow } from 'kumo-svelte';
</script>

<Flow>
  <Flow.Parallel>
    <Flow.List>
      <Flow.Node>Client Users</Flow.Node>
      <Flow.Node>Engineering Team Access</Flow.Node>
    </Flow.List>
    <Flow.List>
      <Flow.Parallel>
        <Flow.Node>All Authenticated Users</Flow.Node>
        <Flow.Node>Client Users</Flow.Node>
        <Flow.Node>Site Users</Flow.Node>
      </Flow.Parallel>
      <Flow.Node>Contractor Access</Flow.Node>
    </Flow.List>
  </Flow.Parallel>
  <Flow.Node>Destinations</Flow.Node>
</Flow>

Components

Flow

The root container for flow diagrams. Provides panning and scrolling for large diagrams.

PropTypeDescription
orientation"horizontal" | "vertical"Layout direction for the flow
align"start" | "center"Vertical alignment of nodes. `"start"` (default) aligns to top, `"center"` vertically centers nodes.
classstringAdditional CSS classes for the container
canvasbooleanEnables the scrollable canvas wrapper
padding{ x?: number; y?: number }Canvas padding in pixels
childrenSnippetFlow.Node and Flow.Parallel components

Flow.Node

A single node in the flow diagram. Renders as a styled card with automatic connector points. Use bare and class to customize the element chrome.

PropTypeDescription
disabledbooleanWhen true, connectors linking to this node are rendered with reduced opacity
idstringStable node id used for connector registration
childrenSnippetContent to display inside the node
barebooleanRemoves the default node card styling
classstringAdditional CSS classes for the node

Flow.Anchor

A component that marks a custom attachment point for connectors within a Flow.Node. Use this to control exactly where connector lines attach instead of the default node center by wrapping the anchor point content.

PropTypeDescription
type"start" | "end"Whether this anchor serves as a "start" point (outgoing connectors) or "end" point (incoming connectors). When omitted, serves as both.
childrenSnippetContent to render at the anchor point

Flow.Parallel

A container for parallel branches. Child Flow.Node components are displayed in parallel with junction connectors.

PropTypeDescription
align"start" | "end"Controls horizontal alignment of nodes within the parallel group. `"start"` (default) aligns left, `"end"` aligns right.
childrenSnippetFlow.Node or Flow.List components to display in parallel
classstringAdditional CSS classes for the parallel group

Flow.List

A container for a sequence of Flow.Node components with automatic connectors between them. Use inside Flow.Parallel to create branches with multiple sequential steps.

PropTypeDescription
childrenSnippetFlow.Node components to display in sequence
classstringAdditional CSS classes for the list