Obsidian Rebuilt Mermaid From Scratch. Pele Renders Diagrams 500x Faster.

Vinay Bhaskarla

7 min read

·

Oct 17, 2026

--

11

Listen

Share

Open source, zero dependencies, and it themes itself from your CSS.

Press enter or click to view image in full size

Your Mermaid diagrams render 500 times slower than they need to, and the replacement fits in 230 kilobytes.

Update, October 24, 2026: one week after launch, Pele is already in dozens of apps, including Obsidian 1.15, Outline, Inkdrop, and Grok Bot. The week also added math support (KaTeX, MathJax, and Temml), gradients in sankey diagrams, fewer edge crossings in diagrams with subgraphs, and richer labels (subscript, superscript, inline code, and styles like kbd and underline). Steph Ango says rendering got even faster.

Mermaid, the text-to-diagram language where you type flowchart TD and get boxes and arrows, runs half the technical internet's diagrams. GitHub renders it. Obsidian renders it. Your docs probably render it.

The standard renderer, mermaid.js, ships 1.6 megabytes of JavaScript after gzip compression, the shrinking your browser applies to every download, and drags along 23 direct dependencies. A single diagram can take 6 to 82 milliseconds to draw. That was fine when a page held one diagram.

Then Obsidian decided it wanted dozens of diagrams per note, rendered instantly, themed like the rest of the app. So Steph Ango, known as kepano, Obsidian’s co-founder and designer, rebuilt the renderer from zero. His reason, in his own words, in pursuit of making Obsidian insanely fast and cohesively designed, he found the Mermaid library too big, too slow, and too hard to theme.

He called it Pele, pronounced PEH-leh, after the goddess of volcanoes and fire, and open-sourced it under the MIT license at pele.run. He announced it today, October 17, 2026, and Obsidian’s official account endorsed it within the hour.

The mechanism is the real story here

Pele takes the exact Mermaid syntax you already write and compiles it straight to SVG, Scalable Vector Graphics, the image format that stays sharp at any zoom level. No dependency tree. No theme configuration objects. It skips the layout-engine bloat and draws the diagram directly, which is why 82 milliseconds becomes 0.3.

So if the syntax stays the same, what actually changed?

Think of mermaid.js as a print shop. You hand over your order, it disappears into the back room, and later you get a fixed poster. Pele is a whiteboard. You write, it appears. You change a word, it redraws before your cursor blinks.

Press enter or click to view image in full size

The second mechanism is theming. Mermaid.js themes through configuration objects, a settings panel for colors buried in JavaScript. Pele themes through CSS variables, named color slots your stylesheet already controls, like --pele-bg. Change a variable and the diagram recolors without re-rendering. Your diagram dresses itself from your site's palette the way text inherits fonts.

It is the difference between repainting a wall and changing the room’s lighting. One is a project. The other is a switch.

Pele supports every diagram type built into Mermaid 12.1.0, so flowcharts, sequence diagrams, Gantt charts, pie charts, and the rest all work with the syntax you already know.

Refer to these different examples here: https://pele.run/examples

Three examples you can steal

1. The flowchart, the hello world of diagrams

Paste this into the playground at pele.run and watch the right pane draw it:

flowchart TD
  A[Mermaid text] --> B{Flowchart?}
  B -- Yes --> C[Pele]
  B -- No --> D[Mermaid]
  C --> E([SVG])
  D --> E

Press enter or click to view image in full size

2. The sequence diagram, for anything with back-and-forth

Documenting an API call, a signup flow, or two services talking? This is the diagram type for it:

sequenceDiagram
  participant U as You
  participant P as Pele
  U->>P: Send Mermaid text
  P-->>U: Return SVG in 0.1 ms

Press enter or click to view image in full size

3. Theming with CSS variables, the part that kills dark-mode bugs

This is the whole theming API. Seven named color slots:

.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-muted: #6f6e69;
  --pele-line: #100f0f;
  --pele-surface: #f2f0e5;
  --pele-surface-alt: #e6e4d9;
  --pele-border: #cecdc3;
}

Change --pele-bg to a dark color and the diagram follows, no re-render, no config object, no second code path for dark mode. If your site already toggles a dark class, scope the variables under it and every diagram on the page switches themes with the site.

The old way: a theme configuration object per diagram, passed through JavaScript, re-rendered on toggle. The Pele way: the diagram reads colors from the page like text reads fonts. One of these survives a 2 a.m. dark-mode bug report.

Use it in 10 minutes, three paths

Path A: the playground, no install, 2 minutes

1. Open pele.run in any browser. The page loads a live editor: Mermaid syntax on the left, rendered SVG on the right.
2. Edit the example. Change an arrow label, add a node. The diagram updates as you type, because rendering takes 0.05 to 0.3 milliseconds. There is no build step and nothing to save.
3. Scroll to the CSS panel and change --pele-fg to any color. The diagram recolors instantly without re-rendering. This is the theming model in action.
4. Right-click the diagram and copy or save the SVG. It is a real vector file, sharp at any size, ready to paste into a README, a slide deck, or a blog post.

Path B: in your own site, 10 minutes

1. Install the package. You need Node.js 18 or newer. On Mac, brew install node in Terminal. On Windows, download the installer from nodejs.org and run it, then open a fresh terminal.

2. In your project folder, run:

npm install pele

3. Render Mermaid text to SVG and insert it into your page:

import { render } from 'pele';

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

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

render() is synchronous. It returns the SVG string plus the diagram's width, height, and detected type. Wrap it in a try/catch on PeleError to show a friendly message for bad syntax instead of crashing the page.

4. Theme it from your stylesheet, not your JavaScript:

.pele {
  --pele-bg: #ffffff;
  --pele-fg: #1a1a1a;
  --pele-line: #1a1a1a;
}
.dark .pele {
  --pele-bg: #1a1a1a;
  --pele-fg: #f5f5f5;
  --pele-line: #f5f5f5;
}

5. For diagrams that adapt when the page resizes, use mount() instead of render():

import { mount } from 'pele';

const diagram = mount(container, source);
// later, to change the diagram:
diagram.update('flowchart LR\n  A[Draft] --> B[Published]');

mount() measures its container and re-renders on resize. Below 640 pixels wide, supported layouts flip to vertical on their own, so a wide left-to-right flowchart becomes top-to-bottom on a phone instead of shrinking into unreadability.

No npm? Load it from a CDN, the content network that serves the file for you, with two lines:

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

Press enter or click to view image in full size

Path C: in Obsidian, where it was born

Pele was built for Obsidian, to render diagrams fast and match your theme. It shipped in Obsidian 1.15 within a week of launch. The official Obsidian account describes it as a fast, beautiful, open source renderer for Mermaid diagrams created for that release, already tryable in the Pele playground and integrable into your own apps.

What this means for you: diagrams inside Obsidian will pick up your theme’s colors automatically, the same way Pele reads CSS variables on a web page. No per-diagram theme settings to maintain. With Pele now in Obsidian 1.15, your existing mermaid code fences keep working, because the syntax is unchanged. Only the engine underneath gets faster.

To be honest,

• Pele supports every diagram type in Mermaid 12.1.0. If your diagrams use something added after that release, verify it renders before you migrate a whole docs site.
• The 500x figure compares Pele’s 0.05 to 0.3 ms against mermaid.js at 6 to 82 ms. Real pages vary, but the order of magnitude is the point: sub-millisecond versus tens of milliseconds.
• Rendering untrusted user input? The API docs recommend catching PeleError and displaying messages with textContent, never as HTML, plus reviewing the Security section on pele.run/api for links, images, and icons.
• Source length defaults to a 50,000 character cap per diagram, adjustable. Generous for hand-written diagrams, worth knowing for generated ones.
• Pele is MIT licensed, so you can use it in commercial projects without asking permission. The docs cover Examples, API, Theming, Compatibility, Security, and a Playground, all from pele.run.

The reframe nobody mentions

Here is the second-order effect. When a diagram costs a tenth of a millisecond, it becomes cheaper than a screenshot. Documentation stops rationing diagrams to one per page and starts using one per idea. Tutorials get a diagram for every step instead of a wall of text with a single sad architecture graphic at the top.

The bottleneck was never your willingness to draw. It was the renderer tax on every draw.

Pele does not make your diagrams prettier. It makes them so cheap you finally draw enough of them.

Disclosure: This article was developed with the assistance of an AI writing program. The ideas, direction, research review, revisions, and final editorial decisions are my own.