Introducing Schemd: a small text-to-SVG compiler for circuits and UML

작성자

카테고리:

← 피드로
DEV Community · John Owolabi Idogun · 2026-07-18 개발(SW)
Cover image for Introducing Schemd: a small text-to-SVG compiler for circuits and UML

John Owolabi Idogun

I like diagrams that live close to the code they explain. An exported image is easy to forget, difficult to review, and usually out of date after a few changes.

That is why I built @schemd/core, a zero-dependency compiler that turns a small text format into accessible SVG.

Schemd currently handles common circuit components, classical and quantum gates, configurable ICs, and the UML diagrams I use most often: class, sequence, state, and use-case diagrams. It runs on the server or during a build, so the browser does not need the compiler or a Markdown package.

A quick example

Install the package:

npm install @schemd/core

Enter fullscreen mode Exit fullscreen mode

Then compile a diagram:

import { compileSchematic, parseSchematicFence } from "@schemd/core";

const fence = parseSchematicFence(
  'schemd bounds="640x260" title="Sensor input"',
)!;

const { svg } = compileSchematic(
  `
port:VIN "Input" at (120, 130) #blue
resistor:R1 "10 k\\Omega" at (300, 130) #amber
capacitor:C1 "100 nF" at (500, 130) #cyan

VIN.out -> R1.in #blue [ortho]
R1.out -> C1.in #amber [ortho]
`,
  fence,
);

Enter fullscreen mode Exit fullscreen mode

The result is deterministic inline SVG with a title, description, intrinsic dimensions, and safe text output. Orthogonal wires avoid component bodies and receive bridge arcs where they cross.

UML uses the same syntax:

class:User "User" at (160, 120) #slate [attributes="- id: UUID" operations="+ save(): void"]
class:Admin "Admin" at (460, 120) #blue

Admin.left -> User.right #blue [ortho generalization]

Enter fullscreen mode Exit fullscreen mode

Why another diagram tool?

I wanted a compiler with a narrow job:

  • no runtime dependencies;
  • no DOM or browser layout pass;
  • useful SVG from one function call;
  • source that is readable in a pull request;
  • bounded work and predictable output;
  • enough styling hooks for documentation and simulations.

The compiler entry has a hard 20 KiB gzip budget in CI. The current build is around 18 KiB. Code coverage is also enforced at 100% for statements, branches, functions, and lines.

Schemd does not include a Markdown parser. A host can detect a schemd fence with Marked, markdown-it, unified, or its own parser, then pass only the fence body to core. This keeps the package small and lets each application keep its existing Markdown pipeline.

Try it

The playground compiles on the server and shows the result as you type. The simulation lab uses the optional SVG metadata to connect diagrams to live circuit and quantum examples.

The documentation covers the grammar, components, math labels, output modes, framework adapters, and Markdown integrations. The source is available on GitHub.

A note on scope

Version 0.2.0 is a foundation, not a claim that every engineering or UML notation is already present. Some symbols and diagram semantics are still missing, and dense automatic layout remains hard work. I would rather be clear about that and improve it with real examples than hide the limits behind a broad promise.

Contributions are welcome, especially for missing symbols, adversarial routing cases, UML notation, accessibility, and browser rendering differences. If a change affects the grammar, please open an issue first so we can keep the language coherent and the compiler within its size budget.

I built Schemd for my own technical writing and engineering tools. I hope it also makes your diagrams easier to maintain.

원문에서 계속 ↗

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다