Svelte 5 component · machines-ui · Animated
GraphSequence
An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request messages flowing between them in order and activations marking who is busy.
Install
GraphSequence is a Svelte 5 animated ASCII sequence 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 { GraphSequence } from '@fractaldesign/machines-ui';Usage
<GraphSequence title="REQUEST" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Animate the message flow. Default true. Reduced motion freezes the first message as current. | true |
cols | number Width of the scene in characters; at least 40 so four participants fit. Default 68. | 68 |
rows | number Height of the scene in rows; at least 10 so header + 6 messages fit. Default 12. | 12 |
speedMs | number Milliseconds per message. Default 600. | 600 |
label | string Short caption under the art; the diagram itself is the message. | 'who calls who, in order' |
class | string | '' |
Related components
GraphSpinners A framed text spinner with built-in or custom frames and an optional loading label.GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing…GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting…GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely…GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.