machines-ui
diagram

DiagramEditor

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

Install

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

Preview

Preset
Glyphs
Rounded
Light Box
Heavy Box
Double Box
Arrows
Meters
Input 620 chars · 13 lines
Preview 
+ - - - - - - [ NESTED RADII ] - - - - - - +
|                                             |
|   ╭ - - - - - - - - - - - - - - - - - - ╮   |
|   |  outer   16px                       |   |
|   |     ╭ - - - - - - - - - - - - ╮     |   |
|   |◀ - ▶|  inner   12px           |     |   |
|   |     ╰ - - - - - - - - - - - - ╯     |   |
|   |          inset   4px                |   |
|   ╰ - - - - - - - - - - - - - - - - - - ╯   |
|                                             |
|        inner = outer - inset                |
|        12px = 16px - 4px                    |
+ - - - - - - - - - - - - - - - - - - - - - - +
<DiagramEditor />

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/diagram/DiagramEditor.svelte

machines-ui