obsidianmd/pele

Pele renders Mermaid diagrams to SVG. It is small, synchronous, has no runtime dependencies, and uses CSS variables for colors and fonts.

Pele supports every diagram type built into Mermaid 12.1.0.

Documentation, examples, and a playground are at pele.run.

npm install pele

Or load it from a CDN; see Using a CDN.

import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Mermaid text] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;

In a browser, mount() renders into an element, reads fonts from CSS, and adapts the layout to the container width:

import { mount } from 'pele';

mount(document.querySelector('#diagram'), text);

See the API for options and error handling.

The main entry point includes every diagram type. Reduce the initial bundle size by registering individual types or loading them on demand:

import { register, render } from 'pele/core';
import flowchart from 'pele/diagrams/flowchart';

register(flowchart);

import { renderAsync } from 'pele/lazy';

const { svg } = await renderAsync(text);

Set CSS variables on the diagram or a parent element to customize colors and fonts:

.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-muted: #6f6e69;
  --pele-line: #100f0f;
  --pele-surface: #f2f0e5;
  --pele-surface-alt: #e6e4d9;
  --pele-border: #cecdc3;
  --pele-accent: #205ea6;
  --pele-font: sans-serif;
  --pele-radius: 4px;
}

Charts use --pele-series-1 through --pele-series-8. Colors adapt to theme changes without being re-rendered. See Theming for all variables, fonts, and class names.

Pele escapes diagram text, filters links and styles, and limits source and output size. See Security for handling untrusted diagrams, displaying errors, and supplying icons.

Pele targets Mermaid 12.1.0 syntax, with its own layout and visual style. Its parsers are tested against Mermaid's parser specs and with differential fuzzing.

npm install
npm test
npm run build
npm run bench

The documentation site and playground are in website/ and use Node 24 and pnpm 12. With nvm:

cd website
nvm use
pnpm install
pnpm dev

After installing the website dependencies, run npm run test:website from the repository root to check the playground.

See Contributing for parser testing.

MIT. The specs under tests/compat and the grammar files beside them come from Mermaid, which is also MIT licensed.