rehype-schematex

rehype plugin that renders Schematex diagrams in fenced code blocks.

```schematex
genogram
[John]m -- [Mary]f
  [Alice]f
```

becomes an inline SVG diagram.

Install

npm install rehype-schematex schematex

Usage

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeSchematex from "rehype-schematex";
import rehypeStringify from "rehype-stringify";

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeSchematex)
  .use(rehypeStringify, { allowDangerousHtml: true })
  .process(markdownContent);

console.log(String(file));

With Next.js / MDX

// next.config.ts
import rehypeSchematex from "rehype-schematex";

const config = {
  pageExtensions: ["mdx", "md", "ts", "tsx"],
};

export default withMDX({
  options: {
    rehypePlugins: [rehypeSchematex],
  },
})(config);

With Astro

// astro.config.ts
import { defineConfig } from "astro/config";
import rehypeSchematex from "rehype-schematex";

export default defineConfig({
  markdown: {
    rehypePlugins: [rehypeSchematex],
  },
});

Options

interface RehypeSchematexOptions {
  /**
   * CSS class name for the wrapper div.
   * @default "schematex-diagram"
   */
  className?: string;

  /**
   * Language identifier(s) to treat as Schematex diagrams.
   * Matches fenced code blocks with these language tags.
   * @default ["schematex"]
   */
  languages?: string[];

  /**
   * Show render errors as visible <pre> blocks instead of throwing.
   * @default true
   */
  showErrors?: boolean;

  /**
   * CSS class added to the wrapper when rendering fails.
   * @default "schematex-error"
   */
  errorClassName?: string;
}

Custom language tags

Support multiple language tags (e.g., schematex and stx):

.use(rehypeSchematex, { languages: ["schematex", "stx"] })

Supported diagrams

All 20 Schematex diagram types are supported:

| Family | Types | |--------|-------| | Relationships | genogram, ecomap, pedigree, sociogram | | Biological | phylo | | Electrical & Industrial | circuit, logic, ladder, sld, timing | | Corporate / Legal | entity, orgchart, flowchart, block | | Analysis | fishbone, venn, decision |

See the Schematex documentation for DSL syntax.

License

MIT