Edge

Dotted step connections with rounded corners and idle, animated, active, done and skipped states.

import { WorkflowEdge } from "../components/workflow-edge";
import { getEdgePath } from "../lib/workflow";
import type { WorkflowEdgeDemo } from "../types/workflow";

const PATH = getEdgePath({ x: 6, y: 40 }, { x: 314, y: 8 });

const STATUSES: WorkflowEdgeDemo[] = [
  { label: "idle", status: "idle" },
  { animated: true, label: "animated", status: "idle" },
  { label: "active", status: "active" },
  { label: "done", status: "done" },
  { label: "skipped", status: "skipped" },
];

export default function WorkflowEdgeExample() {
  return (
    <div className="grid w-full max-w-md gap-1">
      {STATUSES.map(({ animated, label, status }) => (
        <div
          className="grid grid-cols-[5rem_minmax(0,1fr)] items-center gap-3"
          key={label}
        >
          <span className="text-muted-foreground font-mono text-xs">
            {label}
          </span>
          <svg
            aria-hidden="true"
            className="h-12 w-full overflow-visible"
            viewBox="0 0 320 48"
          >
            <WorkflowEdge animated={animated} path={PATH} status={status} />
          </svg>
        </div>
      ))}
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-edge

WorkflowFlowEdge is the React Flow edge type behind the canvas, and WorkflowEdge is the stroke it draws, which you can also use in any SVG with a path from getEdgePath. WorkflowConnectionLine draws the same stroke while you drag a new connection. Edges are rows of round dots that turn at right angles with rounded corners, so a graph reads like a circuit. While a run passes through an edge it turns active: the dots flow towards the next step, a glowing dot travels along it, and it settles to done in your primary color. Edges behind a branch that wasn’t taken fade out. Set animated on an edge to keep its dots flowing when nothing runs.

The stroke uses currentColor, so it follows your primary and muted-foreground tokens. The dash animation is animate-workflow-dash and stops when the reader prefers reduced motion.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.