Post

For CI, deterministic font metrics may matter as much as speed; otherwise diagrams shift across machines.

This is looking beautiful! I'll try when I'm back to my machine

Looks amazing. Added it to Roost. This will add a new medium of communication. Probably can replace a lot of charts, etc. that requires file upload (and it is still WIP).

Finally! 🎉💕 Mermaid is cool but is such a bog.

Wow this looks so much nicer than mermaid's defaults too

Fantastic I gotta try it out

This week I swapped mermaid.js for this. It took about an hour, mostly ripping out the async loader mermaid.js needed to download shitty dependencies. Thanks to the CSS variables, themes can now use outside-RGB colours and it renders about 10x faster. Excellent work!

This is good

Mermaid flowcharts default to dagre for layout, so a faster renderer has to match its node placement too. Syntax compatibility is the hard promise: subgraph edge cases and classDef quirks break a drop-in swap.

Very, very cool. The svg approach also makes exporting the diagrams very simple. Rendering them with mermaid in a delivery pipeline is a pain as I had to install chromium first.

diagrams are always the first thing to make a big note stutter, so a renderer that stays small and themes properly is a real fix for long docs

that's amazing! you should mention that more prominently in the project description, i think lots of people have been looking for a server-side version or alternative to mermaid for a long time! :) github.com/mermaid-js/m...

Hey People of #VSCode :) Who will be the first to write a #Mermaid preview plugin with this? Will #Markdown previewers start using it? @vscode.dev @mattbierner.bsky.social

+1 for the lazy loading no, make that +2

At home, replacing mermaid-js in caic: " median placeholder-to-SVG time fell from 286.5 ms to 94.2 ms across five cold runs—about 67% faster for this sample. Compressed page assets fell from 687 KB to 224 KB. "

😍😍😍

you're right, I should add the more formats to the .gitignore to be complete, and I also updated the contribution guide accordingly

load the repo, then: npm run bench:mermaid

100-500× is a wide spread — is that cold parse, layout, or full SVG paint? Mermaid's cost is mostly dagre layout plus DOM thrash, so which did you replace?

What benchmark backs the 100–500× claim? Mermaid’s bottleneck is usually layout, not DOM rendering—does Pele skip layout entirely?

Wow! The website looks great as well! And there's a playground also, amazing work

Adding to all my repos as a TODO 🙌

Any official CLI planned?

Neat! I'm close to considering myself mermaid syntax native speaker 😅 Love to see a fresh implementation with new integration opportunities

The rendering speed is impressive, but 230 KB gzip is still a noticeable cost on a content page. Have you considered build-time SVG generation, with client-side rendering only for diagrams that need responsive relayout? Curious how you see that trade-off.

so coool

the server-side svg output is the underrated part. docs sites can render diagrams at build time instead of shipping mermaid's runtime to every reader.

Mermaid dependencies often cause us problems, so the zero dependencies is also a big win!

amazing!

POSIWID (laudatory)

I'm doing a thing that is using mermaidjs, but I will definitely consider switching to Pele. So fast!

It will be built into Obsidian 1.15!

Oh wow the git tree diagrams are beautiful, I wonder if pele would be a good fit for @tangled.org’s tree views 👀

even more wow 😄

so excited to use these for my notes when it releases for obsidian!! looks absolutely amazingggg :D

Ooh I’m gonna look if I might bake that into deckyard.eu. I need a way to generate diagrams and bake them into slides

This one is amazing

I love this, and I'm so happy to see use-case included even if it's in beta.

yes it's already possible using Mermaid syntax obsidian.md/help/advance...

I once donated someone an npm package & they were incredibly grateful. I once asked someone else for a dead npm package and was rejected 😞

bsky.app/profile/step...

Really neat! It works well with Observable too and will likely become my goto quick diagram specifier. observablehq.com/@jwolondon/h...

The logo is a work of art!

Great, now the diagrams load faster than I can pretend to understand them.