Svelte 5 component · machines-ui · Graphs

GraphTree

An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and an optional accent, and a single root is drawn without branches.

All components Source

Install

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

Usage

Example

<GraphTree
  title="REGISTRY"
  nodes={[
    {
      label: 'src/lib',
      children: [
        {
          label: 'graphs',
          children: [
            { label: 'GraphStat.svelte', meta: 'graph' },
            { label: 'GraphTable.svelte', meta: 'graph' }
          ]
        },
        {
          label: 'frame',
          children: [{ label: 'Frame.svelte', meta: 'frame', accent: true }]
        }
      ]
    }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`nodes`	`TreeNode[]` The root nodes of the tree, nested through `children`.	`—`
`corner`	`string` Character drawn at each corner of the frame.	`—`
`class`	`string`	`''`

GraphUptime A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.GraphWaffle Share grid of ~100 cells; filled cells carry the accent.GraphWaterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.GraphActivity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.GraphBars Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.GraphBullet A bullet chart: each row lays an actual value against an optional target along a ticked track, with the…

Install

Import

Usage

Props

Related components