Testing pele as a replacement for mermaid

News and Events Announcements

AI-generated summary

zogstrip announced that the mermaid theme component has been replaced by pele on the meta site for testing purposes. pele offers significant performance improvements, being 6x smaller and up to 500x faster than mermaid, with no dependencies, MIT licensing, and development by the Obsidian team. The change retains the same ```mermaid syntax, ensuring backward compatibility for existing posts. Users are encouraged to report visual bugs by providing post links, screenshots, and browser/theme details.

Community feedback has been largely positive. putty humorously noted the lack of a :tada: reaction but confirmed the diagrams look good. satonotdead expressed surprise at discovering pele just a week prior and praised its speed, while StefanoCecere highlighted pele’s widespread adoption and good performance in both Obsidian and Discourse.

Regarding customization, Lief asked if pele elements could adopt a community’s brand styling. zogstrip confirmed that the theme component automatically maps pele’s CSS variables to the site’s color palette, meaning all diagrams—both existing and new—inherit the site’s colors and support light/dark modes. Further customization is possible by overriding --pele-* variables on the .pele-diagram class in a site theme.

1

We’ve swapped the mermaid theme component for pele here on meta, for testing purposes :test_tube:

pele is 6x smaller, up to 500x faster, has no dependencies, theme-able with css variables, MIT licensed, and developed by obsidian’s team.

same ```mermaid syntax, so nothing to change in your posts.

here’s the theme component if you want to give it a try on your own site.

flowchart LR
  A[mermaid] -->|swap| B[pele]
  B --> C{looks good?}
  C -->|yes| D[🎉]
  C -->|no| E[reply here]

if you spot any visual bug, please :folded_hands: reply here with

  • a link to the post (or the diagram source)
  • a screenshot
  • your browser and theme (light/dark)

thanks :wink:

26 Likes
2

Instructions unclear; no :tada: reaction available :pensive_face:

Looks good!

9 Likes
3

Last week I found out about Pele, I thought about trying some internal integration, and today I came across this. Super fast and from the Core, thanks!

2 Likes
4

Pele is already integrated in so many platform.. for good reasons!

i’m using it in Obsidian and tested now my Discourse community.. very good

3 Likes
5

Do I understand correctly… with pele we could set pele elements to respect our community/brand such that all pre-existing mermaid charts (or maybe just new ones) would have a default look and feel of our style?

6

yes :+1:

the component already maps pele’s css variables to your site’s color palette, so all diagrams, old and new, automagically pick up your colors (light/dark included)

if you want to tweak further, override any --pele-* variable on .pele-diagram in your theme’s css :wink:

2 Likes