Schematex

Introduction

Every diagram a doctor, engineer, or lawyer would actually use. Free. Fully open source. Made for AI. Industry-standard diagrams — genogram to fault tree — from a text DSL.

Schematex renders every diagram a doctor, engineer, or lawyer would actually use — clinical genograms, IEC 61131-3 ladder logic, NSGC pedigrees, IEEE 315 single-line diagrams, cap tables, and many more. A tiny text DSL in; standards-compliant SVG out.

Free. Fully open source. Made for AI. AGPL-3.0, zero runtime dependencies, and a DSL designed around how LLMs actually write text — paste output from ChatGPT or Claude and get a professional diagram back on the first try.

What can I draw?

Schematex draws 45 diagram types across 14 domains — each built to a published standard:

DomainDiagrams
RelationshipsGenogram, Ecomap, Pedigree chart, Phylogenetic tree, Sociogram
Electrical & IndustrialTiming / waveform diagram, Logic gate netlist, Circuit schematic, Control-systems block diagram, Ladder logic, Function Block Diagram (FBD), Sequential Function Chart (SFC), Single-line diagram, P&ID (Piping & Instrumentation), Breadboard / Physical wiring, Welding symbols
Behavior ModelingState diagram, BPMN business process, UML use case diagram, UML sequence diagram, Markov chain
Software / UMLUML Class Diagram, Git commit graph
Corporate & LegalEntity structure, Entity-Relationship Diagram (ERD), Organisation chart, Event-driven Process Chain (EPC)
Causality & AnalysisFishbone (Ishikawa), Venn / Euler, Decision tree, Causal Loop Diagram
StrategyMatrix / quadrant
KnowledgeMindmap
ResearchPRISMA 2020 flow diagram
Project ManagementPERT / CPM network, IDEF0 function model
ConcurrencyPetri net
Risk & ReliabilityFault Tree Analysis, Bowtie risk diagram, Event Tree Analysis, FMEA (Failure Mode and Effects Analysis)
Network & InfrastructureNetwork topology, Threat model (DFD + STRIDE)
GeneralFlowchart, Timeline

Quick example

genogram·§ McGoldrick
↘ preview
100%
Genogram: The Smiths Genogram diagram with 4 individuals across 2 generations The Smiths John (1950) Mary (1952) Alice (1975) Bob (1978) John (b. 1950) Mary (b. 1952) Alice (b. 1975) Bob (b. 1978) RELATIONSHIPS Close MARKERS Index person (focal subject)
UTF-8 · LF · 7 lines · 140 chars✓ parsed·1.0 ms·7.6 KB SVG

Use with AI

Schematex ships a tool layer built for LLMs. Connect Claude.ai to the hosted MCP server in 10 seconds and let it generate validated diagrams in any conversation — no install, no setup.

https://schematex.js.org/mcp
Open in Claude

Or build your own AI feature on top of the Vercel AI SDK. See Use Schematex with AI.

Next steps


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. Diagrams professionals actually use — 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.
  2. Free & fully open source — AGPL-3.0, zero runtime dependencies (no D3, no dagre, no parser generators), everything hand-written. Small bundle, no supply-chain risk. Commercial license available for closed-source use.
  3. Made for AI — the DSL is designed around how LLMs actually write text (CJK quotes, nesting ambiguity, AI-readable errors). Paste output from ChatGPT or Claude and get a professional diagram back on the first try.
  4. Semantic SVG output — every SVG includes <title> and <desc> for accessibility, CSS classes for theming, and data-* attributes for interactivity.

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;