Introduction

Schematex is a zero-dependency TypeScript library that turns a small text DSL into standards-compliant SVG diagrams. Each diagram type implements a published domain specification — not our own invention.

What can I draw?

Quick example

Next steps

• Getting started — install, import, render
• Playground — try all 20 diagram types live
• API reference

How it works

Each diagram type follows the same pipeline:

Text DSL ──→ Parser ──→ AST ──→ Layout Engine ──→ LayoutResult ──→ SVG Renderer ──→ SVG string

Every diagram implements a DiagramPlugin with four methods:

interface DiagramPlugin {
  detect(text: string): boolean;           // auto-detects diagram type
  parse(text: string): DiagramAST;         // text → typed AST
  layout(ast, config): LayoutResult;       // AST → positioned nodes/edges
  render(layout, config): string;          // LayoutResult → SVG string
}

Layout algorithms are domain-specific by design — genogram uses a generation-based layered layout, ecomap uses radial/polar, logic gates use DAG topological sort, ladder logic uses a fixed power-rail layout. Generic layout engines (dagre, ELK) cannot produce standards-compliant output for these diagram types.

Design principles

1. Zero runtime dependencies — no D3, no dagre, no parser generators. Everything is hand-written. Small bundle, no supply-chain risk.
2. Semantic SVG output — every SVG includes <title> and <desc> for accessibility, CSS classes for theming, and data-* attributes for interactivity.
3. Standards compliance — each diagram type implements a published domain specification: McGoldrick 2020 (genogram), Hartman 1978 (ecomap), Bennett 2022 (pedigree), Moreno 1934 (sociogram), IEEE Std 91 (logic gates), IEC 61131-3 (ladder logic), IEEE 315 (SLD), and more.

Theming

Three built-in presets: default (blue-gray), monochrome (black-and-white / print), dark (Catppuccin Mocha).

Override any token via CSS custom properties injected into each SVG's <style> block:

--schematex-stroke: #1a1a1a;
--schematex-fill: #f5f5f5;