177 points | by knsv17 hours ago
It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: (https://calendly.com/dominic-01w/mermaid-shapers-product-int...)
Thanks for taking a look at our latest release!
https://github.com/mermaid-js/mermaid/issues/2485
<rant> Aside, I'm the author of KeenWrite (https://keenwrite.com/), a Markdown text editor that allows embedding diagrams using the triple-backtick syntax. Here's a GraphViz example:
``` diagram-graphviz
digraph {
rankdir="LR";
a -> b -> c;
}
```
In Markdown, formatting a source code snippet entails using the standard syntax for code blocks:
``` graphviz
digraph {
rankdir="LR"
a -> b -> c;
}
```
Seconding the question on browserless rendering in the other comment. Having to (unseccessfully for us so far; the text renders incorrectly) tweak selenium setups to do headless builds is madness and I would have thought this to be top prio as a base feature beyond PoC for anything aiming for wide adoption.
1. SVGs generated by Mermaid use the SVG 2 features, but other than browsers, most libraries only support SVG 1.1 features, i.e. <https://github.com/mermaid-js/mermaid/issues/2102>, which is what the other comment mentioned.
2. Mermaid requires a browser layout engine to render the diagrams (your issue), i.e. <https://github.com/mermaid-js/mermaid/issues/3650>. This is something I also really want to fix (I maintain the [`mermaid-js/mermaid-cli`][1] project and we need to use Puppeteer/Headless Chrome to render mermaid diagrams, which isn't ideal.) However, I don't think this would be easy, since we'd need a browserless tool that supports a browser-like layout engine (although I'm hoping that [Servo][2] might eventually be able to support it).
And if you do want to do headless renders of Mermaid diagrams, I'd recommend using (or adapting, since the code is all MIT licensed and I'm not aware of one that uses Selenium):
- <https://github.com/mermaid-js/mermaid-cli>, which uses Puppeteer as the headless browser API.
- <https://github.com/remcohaszing/mermaid-isomorphic>, which uses Playwright as the headless browser API.
And make sure that whatever server is doing the headless renders of Mermaid diagrams has all the correct fonts installed!
[1]: https://github.com/mermaid-js/mermaid-cli
[2]: https://servo.org/
However after getting into it some I ran into some significant frustrations. After creating a medium-complexity diagram, I was excited to see the Whiteboard feature to drag things around / improve the layout manually. But it really started breaking, it just wouldn't let me organize/drag things where I wanted, and I couldn't get things to not overlap. I also wished more diagram types supported Whiteboard (I noticed some didn't).
Also I some confusion between the capabilities of mermaidchart.com and mermaid.live. Are these competitors? Variations of similar apps. I was confused. Also "Playground" vs "Live Editor" is confusing.
Overall glad this exists and hope it continues to improve.
I hear you on the whiteboard. It's still in its early days. Should be substantially improved in the coming months.
To clarify on mermaidchart.com and mermaid.live, we are the same team. Mermaid.live is our fully open source hosted editor. This was the original editor for our 10 year old open source project. The creator of Mermaid recently founded mermaidchart.com with the CEO of Gitlab's venture studio to expand the capabilities of Mermaid for more users and build an enterprise grade product. The company is open core and venture backed. The Mermaid project will remain forever open source and will continue to invest in growing it and the company for those that desire more advanced business features.
We really appreciate your feedback and support. Ping me if you'd like to chat with our product team about the features you're hoping for:) andrew@mermaidchart.com
9.2.2 2022-11-09 1.09 MB
9.3.0 2022-12-15 899 kB
9.4.0 2023-02-15 2.82 MB
10.9.1 2024-05-14 3.34 MB
11.4.1 2024-11-27 2.57 MB
Is there a plan to reduce the required bundle size for viewers and users that only use a small subset of mermaid's wide feature set?
I suspect this might be a fundamental issue with mermaid. I've always had issues getting it to lay things out in any other way than how it "wants" me to, with giant gaps between things
Thanks for your comment:)
What's dearly needed in my opinion is a graph layout algo based on a machine learning model (so that it can take into account readability and aesthetics). Unfortunately what I found so far is mostly concerned with displaying large graphs, which is kind of another domain altogether.
I hope Mermaid is collecting every single edition point that happens on their UI, that would make for a nice dataset I guess.
Bigger example: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
(I don't like to self promo on competitor posts, but since Mermaid doesn't compete in making its own layout engine I felt sharing this under this thread is relevant to HN. If anyone from Mermaid finds it in poor taste just let me know and I'll delete)
In fact what I'm trying to do is generating beautiful flow graph illustrations like this (non-sensical, just to give you a vibe):
https://th.bing.com/th/id/OIG4.sqo88280g1BDb7r2aORg?pid=ImgG...
Tis hard. Graph layout (bites fist). Layout based image diffusion (tears). One day though.
Graphviz-like generic graph-drawing library. More options, more control.
Experiments by the same team responsible for the development of ELK, at Kiel University
https://github.com/kieler/KLighD
Kieler project wiki
https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
Constraint-based graph drawing libraries
JS implementation
https://ialab.it.monash.edu/webcola/
Some cool stuff:
HOLA: Human-like Orthogonal Network Layout
https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf
Confluent Graphs demos: makes edges more readable.
https://www.aviz.fr/~bbach/confluentgraphs/
Stress-Minimizing Orthogonal Layout of Data Flow Diagrams with Ports
https://arxiv.org/pdf/1408.4626.pdf
Improved Optimal and Approximate Power Graph Compression for Clearer Visualisation of Dense Graphs
But its layouting engine sucks and everything requires hacks and workarounds and configuration tweaks to display properly. Only the most trivial graphs render nicely on the first try.
All I really want to do is define how to actually lay out the blocks using a DSL so that they don't look like absolute shit. I hate drag and drop UIs and I hate mermaid. There's no decent code-first diagram building tool out there, let alone one that I can embed into my notes as easily as mermaid.
I understand that automatic layout algos is one of the big draws of Mermaid since it creates a lot of speed, but our current layouts can get a little convoluted. I like your idea on creating a machine learning model, but I'm curious what your biggest pain points are or if you have any basic requirements for a readable and aesthetic diagram. Is it made with hard corners on edges? Rounded?
Would love to hear any thoughts you might have on this! You can email me at dominic@mermaidchart.com if you'd be willing to share. Thanks for your comment!
The idea of using machine learning is just a kind of knee jerk reaction to this fact. Maybe we could just throw graphs at a graph neural network and have the model learn all the features we are interested in without listing them explicitly (let alone the rules to decide which to prioritize). It's more an art than a science, really.
Among those listed in these papers[1][2] those I am the the most interesting in, beyond the usual overlap minimization, edge crossing and edge length reduction are the following:
symmetry/alignment
hierarchical layouts (subgraphs within nodes)
Fine-grained control of flow direction (doesn't have to be the same in each subgraph)
A palace's layout must not change if you decide to build an extension. Stability isn't guaranteed with most graph layout algos: add a node and you might end up with a graph that doesn't look like the previous version. Nodes shifts, edges move around. Confusing. There has been research in this direction[3], namely "interactive graph layout". It forces us to move away from a stateless approach to graph generation (graph specification -> picture) and into a stateful paradigm where the previous state of the layout will be preserved to some extent in the new version. With the layout specified as a mixture of previous layout state + constraints I could picture a pipeline where an LLM watches the commit log of some git repo and updates diagrams via semantic reasoning automatically with a 90% success rate, while the remaining 10% is left to the developer to fix.
And there is also "UI-bility". A high degree of customization, being able to plug your own (react,vue,whatever) components into a graph can turn it into a monitoring tool. I wrote an (incomplete) debugger for a go-style channel framework that displays interactions as sequential diagrams, and, although neither D2 nor PlantUML offer this, I had to give up on using the former because it did not provide on-hover tool-tips, which was critical for my use case.
[1] https://nrl.northumbria.ac.uk/id/eprint/16689/1/survey_graph...
[2] in particular chapter 6, https://repository.library.northeastern.edu/files/neu:4f196k...
[3] https://rtsys.informatik.uni-kiel.de/~biblio/downloads/paper...
I was exploring this yesterday and actually came acorss the new GUI that is being introduced in this submission. I ended up exporting to PNG and suffer with fitting it inside beamer page layout.
For sequence-diagrams, nothing beats https://sequencediagram.org/ (I am not connected with them in any way, just a happy user)
While Draw.io's integration with Mermaid and the availability of plug-ins for VSCode and other IDEs are great, they primarily support programmatic editing of diagrams. What sets Mermaid Chart apart is its bi-directional editing capability. You can edit the code to update the diagram and make changes directly to the diagram, which will automatically reflect in the code.
Currently, this two-way editing functionality is available for class diagrams and flowcharts, but we're excited to expand it to other popular diagram types in the future. Stay tuned!
Thanks for sharing!