Rendered at 11:32:30 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
lukeify 15 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 15 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
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?
DenisM 12 hours 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 12 hours ago [-]
Could you not make Pele part of Marmaid or they wont accept a contribution like this?
blazarquasar 4 hours ago [-]
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.
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.
kylepomykala 7 hours ago [-]
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.
tptacek 15 hours ago [-]
Graph layout is a famously hard problem!
mcapodici 13 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.
alfiedotwtf 10 hours ago [-]
A common layout implementation is to provide constraints to a SAT Solver… so you were close :)
thegagne 13 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.
jeffreygoesto 6 hours ago [-]
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...
jhoechtl 7 hours ago [-]
The tala layout engine for d2 is now included it provides a very good layout.
giancarlostoro 14 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.
oliveralbertini 15 hours ago [-]
[dead]
Ancapistani 9 hours ago [-]
> A flowchart subgraph keeps its own direction even when it links to nodes outside the subgraph.
This, in and of itself, is sufficient reason for me to switch, even if it were slower than Mermaid.js.
I’ve not even made it through the list yet and I’m sold.
9dev 2 hours ago [-]
Amazing. I just migrated the diagrams on the docs site of a project of mine, and they just look great[0]. Before, I had a combination of mermaid, panzoom, and some minor workarounds to get integrated styling and dark theme work right. Pele not only takes care of all of that, but also manages a nicer layout!
Brazilian me thought it was an homage to Pelé. I’m glad the text explains the name.
haburka 4 hours ago [-]
Thank goodness. Theming mermaid and using it server side is such a nightmare. I had many issues trying to get it to work competently with CSS variables for dark mode / light dark. This seems way better.
nickmain 18 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.
falsaberN1 14 hours ago [-]
There is also Merman on Github that outputs a SVG.
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.
Imustaskforhelp 17 hours ago [-]
Is pele open source?
I tried to find the source code of it but I was unable in finding so
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
longtime user of GraphViz for that kind of use case but I have a TODO to try programmatic generation of my next software diagram in Inkscape's XML format.
11 hours ago [-]
sog 16 hours ago [-]
[flagged]
dbg31415 13 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.
Styling seems like a trivial problem by comparison.
The playground also has a Compare mode https://pele.run/playground
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.
> 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, in and of itself, is sufficient reason for me to switch, even if it were slower than Mermaid.js.
I’ve not even made it through the list yet and I’m sold.
[0] https://cetacean.mazetti.me/authentication#oidc
https://github.com/Latias94/merman
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