pele README

The project's README from github.com/obsidianmd/pele. As one markdown file: README.md.

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.

Install

npm install pele

Or load it from a CDN:

<script src="https://cdn.jsdelivr.net/npm/pele@1/dist/pele.global.js"></script>
<script>
  for (const el of document.querySelectorAll('pre.mermaid')) pele.mount(el, el.textContent);
</script>

Use

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);

Theme

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.

Security

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.

Compatibility

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.

Develop

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.

License

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

pele (obsidianmd/pele)

charts
Searching Database…

2.4K ·GitHub
Pele
What is this?Pele is a lightweight library that renders Mermaid diagrams to SVG, built for speed and with no runtime dependencies.
Is this a full charting library or just a Mermaid renderer?It is a dedicated Mermaid renderer, not a general charting library: it turns Mermaid diagram syntax into SVG and supports every diagram type built into Mermaid 12.1.0.
How do I add it to a project?Install it as a package or load it straight from a CDN, then call mount() in the browser to render a diagram into an element.
Does it need Mermaid.js installed to work?No, Pele ships its own parsers and has no runtime dependencies, so it doesn't rely on the Mermaid.js library itself, only on compatible Mermaid syntax.
Does it support every Mermaid diagram type?Yes, the main entry point covers every diagram type in Mermaid 12.1.0, though you can register individual types or load them on demand to cut the bundle size.
Is it safe to render diagrams from untrusted user input?Pele escapes diagram text, filters links and styles, and limits source and output size, which is specifically meant to make rendering untrusted diagrams safer.
How do I customize diagram colors and fonts?Set CSS variables on the diagram element or a parent container; chart series use --pele-series-1 through --pele-series-8, and colors update live without needing a re-render.
Why would I pick Pele over Mermaid's own renderer?Pele is a small, synchronous, dependency-free SVG renderer focused on speed, with its parsers tested against Mermaid's own parser specs plus differential fuzzing for compatibility.
Can I shrink the bundle if I only need a few diagram types?Yes, instead of importing the full entry point you can register only the individual diagram types you use or load extra types on demand.
What are similar projects?beautiful-mermaid, diagram-design, plotly.js, charts, graph, echarts, cesium, d3
Which topics is it in?diagramming, mermaid, diagrams, charts, rendering, svg, visualization, data-visualization, javascript-library, css, browser, performance
Creator
obsidianmd
Size
2.2 MB
Stars
2.4K
Updated
CommitOct 19Release1.7.0Oct 19
Age
14d
Commits · 90 Days