Hacker News Reader

Comment by lukeify | Hacker News Reader

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.

View on HN

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

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.

I've tested a couple of diagrams that I found on some website and I couldn't see any major differences in the layout. Can you point to some systematic differences?

FYI, first two examples are identical here: https://pele.run/examples/timeline

Edit: So is #7 (and almost #8), #9, 10, 11, 12 are identical as well

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

To quote another reply regarding mermaid by @kepano:

> Mermaid.js has transitioned to "mermaid.ai" and is losing its original vision. Take a look at their new site.

> The latest version of Mermaid (12.1) ships with yet another layout engine (three now), and has a questionable safety record (see CVEs). In Obsidian 1.13 we had to introduce a new toggle/warning because of potential unsafe Mermaid diagrams.

https://x.com/kepano/status/2111575190081847776

This is so so awesome! I always find Mermaid hard to read but Pele is a delight. Just sponsored you on Github as a small way of saying thanks for Pele. Thank you so much kepano

Graph layout is a famously hard problem!

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.

A common layout implementation is to provide constraints to a SAT Solver… so you were close :)

To my taste, most automatic layout implementations produce horrible layouts. Yes, you can use SAT-solve and optimize your way towards a node ordering that produces no crossing lines, but those rarely create something that makes intuitive sense of the content

Good layout is a lot more like writing, in that you have to think about how the intended recipient will perceive and what you want them to notice in which order, and how to make it easy to follow the various relationships

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.

The tala layout engine for d2 is now included it provides a very good layout.

If only it had a good documentation. I really like the elkjs JavaScript version (thanks, Ulf!) bitte unfortunately transcoding makes transferring the Java docs even harder...

Then you may like tool I use https://ferroman.github.io/diagc/

I have the same issue. A neat trick is to have it so the large language model creates an HTML file with what you need inside of it too. That allows for even more flexibility.

I don't even bother writing mermaid by hand when I'm making decision trees. Instead of visualizing it using PrecisionTree in excel (I just use that for the actual data modeling), I've been first modeling the tree in plaintext, then pipe it through claude with a previous tree I've made as reference. I then ask it to use the content of the current tree and match it to the style of the previous one.

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.

Indeed. I still can't bring myself to appreciate Mermaid even with Pele.

I found I had better results with D2, sadly not as ubiquitous as Mermaid.

I like TikZ for this.

Reply on news.ycombinator.com