Bobril Pele Component

Bobril wrapper for Pele, rendering Mermaid syntax as SVG.

npm install @bobril/pele

Usage

import * as b from "bobril";
import { Pele } from "@bobril/pele";

b.init(() => (
    <b.ErrorBoundary fallback={(e) => <div>{(e as Error).message}</div>}>
        <Pele style={{ maxWidth: 800 }}>{`graph TD; A-->B;`}</Pele>
    </b.ErrorBoundary>
));

Rendering is synchronous, so Suspense is optional. An existing Suspense boundary can stay in place. Invalid diagrams throw PeleError, which can be caught by ErrorBoundary.

Component props

• children: string: Mermaid diagram source.
• style?: b.IBobrilStyles: Bobril styles, including Pele CSS variables.
• options?: RenderOptions: per-diagram options overriding the global options.

Render results are memoized per component. Replace an options object when changing its values. Each component receives a unique SVG ID prefix; setting idPrefix yourself overrides this protection. maxWidth controls layout width; container resizing does not automatically recalculate the layout.

Global settings

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

pele.setOptions({ fontSize: 16, links: false, images: false });
pele.setTheme("dark"); // "default" | "dark"
pele.setDarkMode(false); // returns to "default"

setOptions() replaces the global render options and refreshes mounted diagrams. Call setOptions({}) to restore Pele's defaults. Component options take precedence. The package re-exports RenderOptions, RenderResult, and PeleError. See the Pele API for all render options.

The default theme inherits Pele CSS variables from your application. The dark theme supplies a dark palette. Component styles override that palette:

<Pele style={{ "--pele-bg": "#101010", "--pele-fg": "#eeeeee", "--pele-surface": "#252525" }}>
    {`flowchart LR; A-->B;`}
</Pele>

Migration from @bobril/mermaid

Mermaid is an alias for Pele, so existing component calls can keep their name:

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

<mermaid.Mermaid style={{ maxWidth: 800 }}>{`graph TD; A-->B;`}</mermaid.Mermaid>;

children, style, setTheme("default" | "dark"), and setDarkMode() have equivalent entry points. Mermaid-specific themes, MermaidConfig, setSecurityLevel(), and setLogLevel() are not provided. Use Pele options and CSS variables instead. Diagram layout and supported syntax follow Pele's compatibility.

Development

npm install
npm run typecheck
npm test
npm run build

The build writes the interactive example to docs/.