Svelte 5 component · machines-ui · Graphs

GraphCells

One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.

Install

GraphCells is a Svelte 5 ASCII cells 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 { GraphCells } from '@fractaldesign/machines-ui';

Usage

Example

<GraphCells
  title="TWO WAYS TO LEARN"
  items={[
    {
      label: 'fragments',
      cells: [
        [1, 0, 1, 0, 0],
        [0, 1, 0, 1, 0],
        [1, 0, 0, 0, 1]
      ]
    },
    {
      label: 'a system',
      cells: [
        [1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1]
      ]
    }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`items`	`CellGrid[]` The labeled grids to draw, in order; each label sits under its grid.	`—`
`glyphs`	`Glyphs` Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest.	`—`
`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`	`''`

GraphCompare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through,…GraphCountdown Time left until a date.GraphDiff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.GraphFlow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes…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.

Install

Import

Usage

Props

Related components