Technology2 min read

Pele – Mermaid diagrams as themeable SVG

By · Published by Everything Blog

In short

Pele is a library that renders Mermaid diagrams to SVG, using CSS variables for themeable colors and fonts, making it 6× smaller and 500× faster than Mermaid.js, and is open source and developed for Obsidian.

Key points

  • Pele is a library for rendering Mermaid diagrams.: Pele is a library for rendering Mermaid diagrams.
  • It supports every diagram type built into Mermaid 12.1.0.: It supports every diagram type built into Mermaid 12.1.0.
  • It is 6× smaller and up to 500× faster than Mermaid.js.: It is 6× smaller and up to 500× faster than Mermaid.js.

Sources checked by our analysis pipeline: 1

Pele is a lightweight library that renders Mermaid diagrams to SVG, themed with CSS variables.

How it works

Write Mermaid syntax, Pele renders it to SVG. Try editing the example below.

Mermaid

1flowchart TD2 A[Mermaid text] --> B{Flowchart?}3 B -- Yes --> C[Pele]4 B -- No --> D[Mermaid]5 C --> E([SVG])6 D --> E

Use CSS variables to set colors and fonts. Color changes apply without re-rendering.

CSS

1.pele {2 --pele-bg: #fffcf0;3 --pele-fg: #100f0f;4 --pele-muted: #6f6e69;5 --pele-line: #100f0f;6 --pele-surface: #f2f0e5;7 --pele-surface-alt: #e6e4d9;8 --pele-border: #cecdc3;9}

Pele

Why Pele?

Zero dependencies, 6× smaller, and up to 500× faster than Mermaid.js. Pele supports every diagram type built into Mermaid 12.1.0.

Pele | Mermaid.js | |

---|---|---|

Bundle size gzip | 230 kB | 1.6 MB |

Render time | 0.05–0.3 ms | 6–82 ms |

Direct dependencies | 0 | 23 |

Small screens | Adapts the layout | Scales the diagram |

Theming | CSS variables | Theme configuration |

Pele in your app

Add Pele to your app using the API.

Pass Mermaid syntax to render()

and insert the returned SVG into your page.

Explore

Examples

Browse supported diagram types.

API

Render diagrams in your app.

Theming

Set colors and fonts with CSS variables.

Compatibility

Compare syntax, layout, and features with Mermaid.

Pele in use

Pele is open source, developed for Obsidian to render diagrams quickly and match your theme. It is named after Pele, the goddess of volcanoes and fire.

Original source: pele.run

Technology

More in Technology