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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
Noting that the mermaid preview in the playground is broken.
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
Looks like https://github.com/obsidianmd/pele maybe?
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.
There is also Merman on Github that outputs a SVG.
https://github.com/Latias94/merman
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.
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.
Just FYI, "pele" is "mouse" in Latvian. :)
and "skin" in portuguese :)
and a football player in brazil :D
Only with an accent on the final é.
and "d*ck" in slovak...
Spade in French