Hacker News

Pele – Mermaid diagrams as themeable SVG

126 points by dchest ago | 15 comments

lukeify |next [-]

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 |root |parent |next [-]

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

giancarlostoro |root |parent |next |previous [-]

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 |root |parent |next |previous [-]

Graph layout is a famously hard problem!

oliveralbertini |root |parent |previous [-]

[dead]

Imustaskforhelp |next |previous [-]

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

blktiger |root |parent [-]

nickmain |next |previous [-]

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.

falsaberN1 |root |parent |next [-]

There is also Merman on Github that outputs a SVG.

https://github.com/Latias94/merman

invokestatic |root |parent |previous [-]

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 |next |previous [-]

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

hmokiguess |root |parent [-]

and "skin" in portuguese :)

apodik |root |parent [-]

and a football player in brazil :D

mixmastamyk |root |parent |next [-]

Only with an accent on the final é.

mtros |root |parent |previous [-]

and "d*ck" in slovak...

aslakhellesoy |root |parent [-]

Spade in French

sog |previous [-]

[flagged]