machines-ui
animated

Workflow

A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them, and a step-through that walks a path and lights each node as active or done.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphWorkflow } from '@fractaldesign/machines-ui';

Preview

[ DEPLOY ]
  ┌────────┐  
  │commit  │  
  └────────┘  
       │      
       v      
   ┌──────┐   
   │lint  │   
   └──────┘   
       │      
       v      
┌────────────┐
│test        │
│unit + e2e  │
└────────────┘
      ┌┘      
      v       
  ┌───────┐   
  │build  │   
  └───────┘   
      │       
      v       
 ┌─────────┐  
 │publish  │  
 └─────────┘

a CI pipeline, top-to-bottom

<script lang="ts">
	import { GraphWorkflow, type WorkflowNode } from '@fractaldesign/machines-ui';

	const nodes: WorkflowNode[] = [
	  { id: 'commit',  label: 'commit' },
	  { id: 'lint',    label: 'lint' },
	  { id: 'test',    label: 'test', hint: 'unit + e2e' },
	  { id: 'build',   label: 'build' },
	  { id: 'publish', label: 'publish' }
	];
</script>

<GraphWorkflow title="DEPLOY" autoPlay {nodes} />
[ CI DIAMOND ]
         ┌──────┐          
         │push  │          
         └──────┘          
    ┌────────└─────────┐   
    v         v        v   
┌──────┐  ┌──────┐  ┌─────┐
│lint  │  │unit  │  │e2e  │
└──────┘  └──────┘  └─────┘
    └────────┌─────────┘   
             v             
         ┌───────┐         
         │build  │         
         └───────┘         
             │             
             v             
         ┌──────┐          
         │ship  │          
         └──────┘          
import { GraphWorkflow, type WorkflowNode, type WorkflowEdge } from '@fractaldesign/machines-ui';

const nodes: WorkflowNode[] = [
  { id: 'push',  label: 'push' },
  { id: 'lint',  label: 'lint' },
  { id: 'unit',  label: 'unit' },
  { id: 'e2e',   label: 'e2e' },
  { id: 'build', label: 'build' },
  { id: 'ship',  label: 'ship' }
];

const edges: WorkflowEdge[] = [
  { from: 'push',  to: 'lint' },
  { from: 'push',  to: 'unit' },
  { from: 'push',  to: 'e2e' },
  { from: 'lint',  to: 'build' },
  { from: 'unit',  to: 'build' },
  { from: 'e2e',   to: 'build' },
  { from: 'build', to: 'ship' }
];

<GraphWorkflow title="CI DIAMOND" autoPlay {nodes} {edges} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
nodes* WorkflowNode[] —The workflow's nodes; boxes are sized to fit each label and hint.
edges WorkflowEdge[] —Explicit edges between node ids; when omitted, the nodes link into a chain in list order.
path string[] —Node ids in the order the playthrough visits them; defaults to a topological order.
animated boolean trueEnable the step transitions; reduced motion freezes the first step. Default true.
autoPlay boolean falseStart stepping through the path on mount. Default false.
speedMs number 1200Milliseconds between path steps; adjustable with the speed slider. Default 1200.
showControls boolean trueShow the prev/play/next buttons, step dots, and speed slider. Default true.
label string —Short caption under the diagram; omitted entirely when not set.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
WorkflowTonetype
'default' | 'accent' | 'muted'
WorkflowNodeinterface
WorkflowEdgeinterface
Celltype
{ ch: string; cls?: string }
Segtype
{ text: string; cls?: string }

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-muted
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphWorkflow.svelte

machines-ui