Schematex

---

Schematex is the open-source rendering and editing engine for the diagrams professionals actually use — medical, electrical, legal, production, and analytical. 52 diagram families spanning medicine, engineering, law, live production, and analysis:

• 👪 Relationships — genograms, ecomaps, pedigrees, sociograms, phylogenetic trees
• ⚡ Electrical & Industrial — ladder logic, single-line diagrams, circuit schematics, logic gates, timing, block diagrams, FBD, SFC, breadboard, P&ID (ISA-5.1)
• 🔄 Behavior & process — UML 2.5 / Harel state diagrams (Mermaid-compatible superset), BPMN 2.0 (OMG), use case diagrams (UML 2.5.1 §18), sequence diagrams (UML 2.5.1 §17 — all 12 combined fragments + ref)
• 🧩 Software & data modeling — UML class diagrams (UML 2.5.1 §9–§11, namespaces + 6 relationships), ERD crow's-foot notation
• 🏢 Corporate & Legal — entity structures, cap tables, org charts
• 🐟 Causality & Analysis — fishbone / Ishikawa, decision trees (Howard-Raiffa EV · CART/sklearn · taxonomy), Venn / Euler
• 🛡️ Risk & Reliability — fault trees (NUREG-0492 / IEC 61025) that compute MOCUS minimal cut sets + P(top), bowtie barrier-based risk (CCPS / Energy Institute 2018)
• 🗓️ Project management — PERT / CPM networks (PMBOK 7) that compute the schedule: ES/EF/LS/LF, slack, critical path, three-point estimation, swimlanes, time-scaled layout
• 🖧 Network & Infrastructure — network topology diagrams (Cisco-convention icons) with device/link/port integrity, IP-CCTV camera systems, three-tier campus, spine-leaf fabric, subnets & VLANs
• 🏠 Architecture & Space — measurable single/multi-floor plans, standards-aware evacuation plans, and venue-ready stage plots with auto-derived input lists
• ◉ Concurrency — Petri nets (Murata 1989 / ISO-IEC 15909) that compute enablement and fire token sequences
• 🔬 Research — PRISMA 2020 systematic-review flow diagrams
• 📅 Timelines — proportional / equidistant / log axis · swimlane · gantt · lollipop · BC dates · geological Ma scale
• 🧠 Knowledge & strategy — mindmaps, 2×2 / N×M matrices, flowcharts, comparison & decision matrices (Pugh / ASQ weighted scoring that computes the winner · pros-cons · T-chart / Y-chart · Thinking-Maps double-bubble)

Mermaid draws generic flowcharts. Schematex draws the diagrams doctors, engineers, and lawyers actually use — a genogram a genetic counselor accepts clinically, ladder logic that maps 1:1 to IEC 61131-3, a cap table that survives a Series A review.

🆓 Free & fully open source · 📐 10+ industry standards · 🤖 Made for AI · 🌱 SSR-ready pure SVG · Zero deps

Install

npm install schematex

Quick start

import { render } from 'schematex';

const svg = render(`
genogram "The Smiths"
  john [male, 1950]
  mary [female, 1952]
  john -- mary
    alice [female, 1975, index]
    bob [male, 1978]
`);

The diagram type is inferred from the first keyword. Tree-shake by importing only what you need:

import { render } from 'schematex/genogram';

React editor

The same package includes a controlled, open-source canvas editor. Your app owns the DSL state, persistence, undo, and collaboration; Schematex owns safe SVG gestures and WYSIWYG label editing.

'use client';

import { useState } from 'react';
import { InteractiveSchematexDiagram } from 'schematex/react';

export function DiagramEditor() {
  const [dsl, setDsl] = useState('flowchart "Release"\n  draft [Draft]\n  draft -> shipped [Ship]');

  return (
    <InteractiveSchematexDiagram
      value={dsl}
      onChange={setDsl}
      viewport
      ariaLabel="Release workflow editor"
    />
  );
}

viewport opts into built-in pan, pinch/wheel zoom, and fit-to-view while your app keeps ownership of any zoom controls through viewportRef.

Twenty-one parser-native diagram types support deterministic canvas editing; 18 also support stable-ID drag or native geometry handles. The other 31 remain fully renderable and editable through their DSL source, without guessed canvas handles. See the interactive editing guide and live workspace.

Coding agents can start at llms.txt, load the complete Markdown corpus from llms-full.txt, or query the machine-readable interaction capability registry. Append .md to any documentation URL for clean Markdown.

Gallery

All 52 diagram types share one unified pipeline. A selection is shown below — try any of them live at schematex.js.org/playground.

👪 Genogram — McGoldrick family-systems standard

Multi-generation family trees for therapy, social work, and medicine. Gender-specific shapes, medical condition fills, emotional relationship lines, index-person markers.

genogram "The Potter Family"
  fleamont [male, 1909, 1979, deceased]
  euphemia [female, 1920, 1979, deceased]
  fleamont -- euphemia
    james [male, 1960, 1981, deceased]
  mr_evans [male, 1925, deceased]
  mrs_evans [female, 1928, deceased]
  mr_evans -- mrs_evans
    lily [female, 1960, 1981, deceased]
    petunia [female, 1958]
  james -- lily "m. 1978"
    harry [male, 1980, index]
  petunia -- vernon [male, 1951]
    dudley [male, 1980]
  harry -cutoff- petunia
  harry -hostile- dudley
  harry -close- lily

Genogram syntax →

---

🌐 Ecomap — Hartman 1978 standard

Family systems embedded in institutional, social, and cultural support networks. Radial layout, weighted connection strengths, directional energy flow.

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗