Getting started

Install

npm install schematex

Render

import { render } from 'schematex';

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

The diagram type is inferred from the first keyword. The output is a plain SVG string — safe to inject via dangerouslySetInnerHTML, innerHTML, or write to disk.

Live previews

render() is strict: invalid DSL throws. For an AI canvas or editor preview, use the preview API so a parser failure stays visible instead of leaving an empty surface.

import { renderPreview, renderResult } from 'schematex';

const svg = renderPreview(dsl);
const state = renderResult(dsl);

preview.innerHTML = state.svg;
if (!state.ok) console.error(state.diagnostics);

renderPreview() always returns SVG. A failed strict render becomes a visible diagnostic SVG. Use renderResult() when you also need ok, status, and diagnostics for retry or repair logic.

Optional frontmatter

Mermaid-style YAML frontmatter is accepted before the DSL body. A title: value is merged into the diagram title when the header line does not already provide one.

---
title: Smith Family
---
genogram
  john [male, 1950]

Leading blank lines and pure comment lines are skipped before diagram detection for parsers that support comments. For the Mermaid-compatible parsers touched in v0.4.3, %% is accepted as a full-line comment marker.

Tree-shakable imports

Import only what you need:

import { render } from 'schematex/genogram';
import { render } from 'schematex/ladder';
import { render } from 'schematex/sld';

Each sub-module ships its own parser / layout / renderer and is fully independent.

Frameworks

• React — use <SchematexDiagram /> from schematex/react, or inject a strict/preview SVG string yourself. The component shows a diagnostic fallback SVG when its DSL cannot render.
• SSR — Schematex is pure string output, no DOM. Works in Node, edge runtimes, Cloudflare Workers, and the browser.
• Markdown — a remark-schematex plugin is planned.

import { SchematexDiagram } from 'schematex/react';

<SchematexDiagram dsl={dsl} theme="monochrome" />;

Use with AI

Schematex was designed for LLMs. The hosted MCP server lets Claude generate validated, standards-compliant DSL on its own — no plumbing required.

→ Building your own AI feature? See Use Schematex with AI for the Vercel AI SDK adapter, the five tools, and the recommended self-correcting agent loop.

What's next?

Pick your diagram type from the sidebar and read its syntax guide.