mdx-pele

Mermaid code block integration for @bobril/mdx, rendered with @bobril/pele.

Usage

npm install @bobril/mdx-pele

import { install } from "@bobril/mdx-pele";

install();

The API matches @bobril/mdx-mermaid: change the installer import to use Pele. Code fences keep the mermaid language name.

import * as mdx from "@bobril/mdx";

<mdx.CodeBlock info="mermaid">{`flowchart LR; A-->B;`}</mdx.CodeBlock>;

Syntax highlighting and custom renderers

If you use @bobril/mdx/highlighter, install it first, then call install() once:

import * as mdxCodeBlock from "@bobril/mdx/highlighter";
import * as styles from "@bobril/highlighter/styles";
import { install } from "@bobril/mdx-pele";

mdxCodeBlock.setDefaultCodeBlock(styles.docco);
install();

install(wrapCodeBlock?) accepts an explicit code block renderer. By default, it wraps the current mdx.defaultComponents.CodeBlock, or mdx.mdxCodeBlock when none is installed.

Behavior

• Intercepts code blocks with info="mermaid", case-insensitively.
• Renders synchronously using @bobril/pele; no Suspense is required.
• Preserves the wrapped renderer for other languages.
• Displays a text error and the original code block when Pele cannot render the diagram.
• Retries rendering when the diagram source changes after an error.

Use this installer instead of @bobril/mdx-mermaid; install one diagram renderer per application.

Theme and rendering options

Configure diagrams through @bobril/pele:

import * as pele from "@bobril/pele";

pele.setDarkMode(true);
pele.setOptions({ links: false, images: false });

See @bobril/pele for themes, options, and compatibility notes.

Development

npm install
npm run typecheck
npm test
npm run build

The build writes the example application to docs/.