fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Diagram

AsciiDiagram

Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of titles, arrows, and corners.

All components Source

Install

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

Usage

Example 1 
<AsciiDiagram title="Signal path">
  {`
+ - - - - - - [ SIGNAL PATH ] - - - - - - +
|                                         |
|   source ──> filter ──> gain ──> out    |
|                    ^                    |
|                    └─── feedback        |
|                                         |
+ - - - - - - - - - - - - - - - - - - - - +
  `}
</AsciiDiagram>
Example 2 
<AsciiDiagram title="Box" content={'+---+\n| a |\n+---+'} showCopy={false} />

Props

NameTypeDefault
content string Raw ASCII or Unicode diagram text.''
title string Optional label above the diagram. Uppercase, 1-2 words.''
showCopy boolean Show a copy-to-clipboard button. Default true. The button copies `content`, so it appears only when `content` is passed (not when the diagram is given as children).true
bordered boolean Dashed border around the diagram. Default true.true
glow boolean Phosphor glow on accent tokens. Default false.false
fontSize string Font size of the diagram text.'0.85rem'
lineHeight string Line height of the diagram text.'1.35'
align 'left' | 'center' Horizontal alignment of the diagram text within the frame.'left'
class string ''
children Snippet Custom content instead of text.—

Snippets

NameTypeDefault
default unknown —

Related components

DiagramEditor An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.MetricsTableDiagram An ASCII ledger of cost: one row per tool with its call count and time, and a totaled summary row at the…NestedRadiiDiagram An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values…PromptLoopDiagram An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and…AmplifierDiagram An ASCII amplifier: a small calm wave goes in, a gain slider scales it, and a large wave comes out — a…