diagram

PromptLoopDiagram

An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and connector as the cycle advances.

Install

pnpm add @fractaldesign/machines-ui

import '@fractaldesign/machines-ui/style.css';
import { PromptLoopDiagram } from '@fractaldesign/machines-ui';

Preview

+- - - - - - - - -[ THE PROMPT LOOP ]- - - - - - - - -+
|                                                     |
|       ~> Ask for the thing you want                 |
|                         │                           |
|                         v                           |
|                    AI builds it  ◀ - - - - - - - ┐  |
|                         │                        │  |
|                         v                        │  |
|               It's not quite right               │  |
|                         │                        │  |
|                         v                        │  |
|       ~> Make me a few variants                  │  |
|                         │                        │  |
|                         v                        │  |
|               v1 · v2 · v3 · v4                  │  |
|                         │                        │  |
|                         v                        │  |
|                None of them are it               │  |
|                         │                        │  |
|                         v                        │  |
|                         └ - - - - - - - - - - -  ┘  |
|                             Repeat forever          |
|                                                     |
+- - - - - - - - - - - - - - - - - - - - - - - - - - -+

Speed 1.2s

<PromptLoopDiagram autoPlay speedMs={1200} />

Props

Prop	Type	Default	Description
autoPlay	boolean	true	Start playing on mount. Default true.
speedMs	number	1200	Milliseconds per step. Default 1200.
showControls	boolean	true	Show the playback controls. Default true.
class	string	''

API

class forwarded to the outer element
a11y honours prefers-reduced-motion

Theming

CSS custom properties this component reads.

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

src/lib/components/diagram/PromptLoopDiagram.svelte