Sequence
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
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphSequence } from '@fractaldesign/machines-ui';Preview
who calls who, in order
<GraphSequence title="REQUEST" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| animated | boolean | true | Animate the message flow. Default true. Reduced motion freezes the first message as current. |
| cols | number | 68 | Width of the scene in characters; at least 40 so four participants fit. Default 68. |
| rows | number | 12 | Height of the scene in rows; at least 10 so header + 6 messages fit. Default 12. |
| speedMs | number | 600 | Milliseconds per message. Default 600. |
| label | string | 'who calls who, in order' | Short caption under the art; the diagram itself is the message. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| Participant | interface | |
| Message | interface | |
| Seg | interface |
Theming
CSS custom properties this component reads.
- --border
- --graph-accent
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphSequence.svelte