Svelte 5 component · machines-ui · Animated
GraphWorkflow
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
GraphWorkflow is a Svelte 5 animated ASCII workflow component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphWorkflow } from '@fractaldesign/machines-ui';Usage
<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} />Props
| Name | Type | Default |
|---|---|---|
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 Enable the step transitions; reduced motion freezes the first step. Default true. | true |
autoPlay | boolean Start stepping through the path on mount. Default false. | false |
speedMs | number Milliseconds between path steps; adjustable with the speed slider. Default 1200. | 1200 |
showControls | boolean Show the prev/play/next buttons, step dots, and speed slider. Default true. | 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 | '' |
Related components
ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and…TextTyping Types a line of text one character at a time, restarting when the text changes or the line becomes active…GraphAgni An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed,…GraphAum An Aum (ॐ) figure drawn in terminal glyphs, inked in stroke by stroke and then rippled by a resonance wave…GraphBoot An animated boot/deploy run in ASCII: each step fills a progress bar, shows its ETA, and lands on a ✓ or ✗,…GraphCron A live, character-based preview of a cron schedule, showing matching minute and calendar positions.