Svelte 5 component · machines-ui · Graphs

GraphFlow

One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes for what trails it.

All components Source

Install

GraphFlow is a Svelte 5 ASCII flow chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import

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

Usage

Example

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

	const rows: GraphFlowRow[] = [
	  { nodes: [{ label: 'tap' }, { label: 'server' }, { label: 'update' }] },
	  {
	    nodes: [
	      { label: 'tap' },
	      { label: 'update', tone: 'accent' },
	      { label: 'server syncs', stretch: true, tone: 'muted' }
	    ]
	  }
	];
</script>

<GraphFlow title="OPTIMISTIC UI" {rows} />

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`rows`	`GraphFlowRow[]` Flow rows, top to bottom; each row is a sequence of nodes.	`—`
`palette`	`GraphPalette` How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.	`—`
`corner`	`string` Character drawn at each corner of the frame.	`—`
`class`	`string`	`''`

GraphFunnel A proportional funnel showing labeled stages, values, and their relative widths.GraphGantt A character-based timeline that positions task bars across a shared track and can show progress.GraphHeatmap A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels…GraphInvoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.GraphKpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.GraphLatency Percentile band chart.

Install

Import

Usage

Props

Related components