Svelte 5 component · machines-ui · Diagram

DiagramEditor

An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.

All components Source

Install

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

Usage

Example

<DiagramEditor />

Props

This component takes no props of its own.

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…AsciiDiagram Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of…