Pele – Mermaid diagrams as themeable SVG

218 pointsposted 9 hours ago
by dchest
(pele.run)

24 Comments

lukeify

4 hours ago

Anytime I try mermaid for anything more complex than a toy diagram I always end up absolutely frustrated by the arcane and topologically poor layout that is produced.

Styling seems like a trivial problem by comparison.

kepano

4 hours ago

I strongly agree, and that's why I designed Pele to only follow its syntax not its layout. See the examples https://pele.run/examples

The playground also has a Compare mode https://pele.run/playground

DenisM

an hour ago

The layout quality is very impressive!

Have you given much thought to diffing diagrams? The source can be version controlled and a source diff can be seen, but a visual diff would be amazing and easily sway me from writing prose to writing diagrams.

CrimsonRain

an hour ago

Could you not make Pele part of Marmaid or they wont accept a contribution like this?

giancarlostoro

3 hours ago

I kinda just shove what I want out of it to literally any basic model from the frontier labs, I usually dont need anything super fancy, but it does the job, even color coded regions for me (which is fancier than I usually do) and then I can shove that into Lucid since it can render them.

tptacek

4 hours ago

Graph layout is a famously hard problem!

mcapodici

2 hours ago

I wonder if it is almost like writing. In that to make the diagram that communicates well you need to have solved the problem properly.

thegagne

2 hours ago

I have had good luck with D2 and elk or dagre. If you get into the nitty gritty of elk you can do a _lot_ with it.

dmix

21 minutes ago

I used to let AI make Mermaid diagrams to help explain code to other devs but I realized you get much better results just asking it to use standard CSS/JS and visualize flows in a pretty way.

Imustaskforhelp

6 hours ago

Is pele open source?

I tried to find the source code of it but I was unable in finding so

Edit: found it, https://github.com/obsidianmd/pele

Also folks, this is a good reminder to please have a github icon on the top of the page to easily show git/github links if the app is open source, also helps in the fact that I can star your projects and bookmark them more easily :-D

nickmain

7 hours ago

Does the official Mermaid library still require a full or headless browser environment in order to lay out the SVG? If so, Pele is great news for embedding Mermaid rendering in other places.

invokestatic

5 hours ago

The python mermaidx library works for this, which works well for generating documentation with embedded diagrams as part of CI/CD but the layout/rendering can sometimes be very wonky. For instance I will have a bunch of connections crossing over each other instead of neatly arranged to avoid it. Changing the layout settings does not fix it so sometimes I will just export it from mmdc and embed a png.

druvisc

6 hours ago

Just FYI, "pele" is "mouse" in Latvian. :)

hmokiguess

6 hours ago

and "skin" in portuguese :)

apodik

5 hours ago

and a football player in brazil :D

mixmastamyk

5 hours ago

Only with an accent on the final é.

dbg31415

2 hours ago

Tools like this are so amazing because they allow Claude to edit and draw and save to a single markdown file. So practical! Version control friendly. People can use them, sure. Buy AI can really take off with tools like this.