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.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { AsciiDiagram } from '@fractaldesign/machines-ui';

Preview

Signal path 
+ - - - - - - [ SIGNAL PATH ] - - - - - - +
|                                         |
|   source ──> filter ──> gain ──> out    |
|                    ^                    |
|                    └─── feedback        |
|                                         |
+ - - - - - - - - - - - - - - - - - - - - +
<AsciiDiagram title="Signal path">
  {`
+ - - - - - - [ SIGNAL PATH ] - - - - - - +
|                                         |
|   source ──> filter ──> gain ──> out    |
|                    ^                    |
|                    └─── feedback        |
|                                         |
+ - - - - - - - - - - - - - - - - - - - - +
  `}
</AsciiDiagram>

Props

PropTypeDefaultDescription
content string ''Raw ASCII or Unicode diagram text.
title string ''Optional label above the diagram. Uppercase, 1-2 words.
showCopy boolean trueShow a copy-to-clipboard button. Default true.
bordered boolean trueDashed border around the diagram. Default true.
glow boolean falsePhosphor glow on accent tokens. Default false.
fontSize string '0.85rem'Font size of the diagram text.
lineHeight string '1.35'Line height of the diagram text.
align 'left' | 'center' 'left'Horizontal alignment of the diagram text within the frame.
class string ''

API

  • snippet children Custom content instead of text.
  • class forwarded to the outer element

Theming

CSS custom properties this component reads.

  • --border
  • --diag-font-size
  • --diag-line-height
  • --graph-accent
  • --text-primary
  • --text-secondary

Related

Used by

src/lib/components/diagram/AsciiDiagram.svelte

machines-ui