Repolode
Submit
obsidianmd

obsidianmd/pele

A small, synchronous renderer that turns Mermaid diagram text into SVG with no runtime dependencies.

View on GitHubWebsite
Stars
2,476
Forks
74
Open issues
23
Last commit
10 hours ago

What is it?

Pele renders Mermaid diagram source to SVG. It targets Mermaid 12.1.0 syntax and supports every diagram type built into that version, using its own layout and visual style rather than Mermaid's.

Rendering is synchronous and has no runtime dependencies. Colors and fonts are controlled through CSS variables, so a diagram can follow a page's theme and update when the theme changes without being re-rendered. In the browser, a mount helper renders into an element, reads fonts from CSS, and adapts the layout to the container width. The main entry includes all diagram types, but individual types can be registered or loaded on demand to reduce bundle size.

The project escapes diagram text, filters links and styles, and limits input and output size, with guidance on handling untrusted diagrams. It is distributed on npm and can also be loaded from a CDN as a global script.

Key features

  • 01Renders all diagram types built into Mermaid 12.1.0 to SVG.
  • 02Has no runtime dependencies and synchronous rendering.
  • 03Styles colors and fonts through CSS variables that update with theme changes.
  • 04Provides a browser mount helper that adapts layout to container width.
  • 05Supports on-demand loading of individual diagram types to reduce bundle size.
  • 06Escapes text and filters links and styles for untrusted input.

Use cases

  • Rendering Mermaid diagrams in a web page or documentation site without a heavy dependency.
  • Embedding diagrams that should follow a site's light or dark theme through CSS.
  • Generating SVG diagrams from Mermaid text on the server or in build tools.
  • Reducing the JavaScript payload by loading only the diagram types a page uses.

Quick start

  1. 1

    Install the package

    npm install pele
  2. 2

    Import render and convert Mermaid text to SVG

Things to know

  • The README does not state a license; the metadata shows NOASSERTION, though the README mentions MIT.
  • Pele targets Mermaid 12.1.0 syntax with its own layout and visual style, so output may differ from Mermaid.

Topics

#mermaid#diagrams#svg#typescript#visualization#javascript#charts#diagramming#mermaid-diagrams#mermaidjs

FAQ

What is pele?
A small, synchronous renderer that turns Mermaid diagram text into SVG with no runtime dependencies. Pele renders Mermaid diagram source to SVG. It targets Mermaid 12.1.0 syntax and supports every diagram type built into that version, using its own layout and visual style rather than Mermaid's.
Is pele free to use? What license does it have?
pele is open source under the Other license. Check the license terms before using it in commercial products.
Is pele still maintained?
Actively maintained. The last commit to pele was on Oct 19, 2026.
What can I use pele for?
Rendering Mermaid diagrams in a web page or documentation site without a heavy dependency. Embedding diagrams that should follow a site's light or dark theme through CSS. Generating SVG diagrams from Mermaid text on the server or in build tools. Reducing the JavaScript payload by loading only the diagram types a page uses.
How do I install pele?
Install the package: npm install pele Import render and convert Mermaid text to SVG
Where can I get pele?
The source code and installation instructions are on GitHub: https://github.com/obsidianmd/pele

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects