91–100 of 113 posts
I really like using Mermaid to create state diagrams. I'd been looking for a tool like it for quite some time, and I think it slipped under my radar because it's more focused on sequence / flow diagrams and doesn't hype its state diagram capabilities as much. Using a text-based tool for this is so much better than my previous workflow of Visio or Powerpoint.
Have you seen xstate's visualizer? https://xstate.js.org/viz/
Earlier quoted context omitted.
I'm one of the maintainers of the mermaid-cli project, and unfortunately, no. Mermaid needs a browser's layout engine to run properly [1], but I haven't yet seen a library that will help us without puppeteer. And yep, NPM (or another Node.JS package manager) is still needed for installation. I was working on trying to bundle all of mermaid-cli's dependencies (aka Node.JS, puppeteer) into one massive single-file exe l…
Why is it so difficult to do the layout yourself and generate SVG directly?
You probably shouldn't convert diagrams from HTML to PNGs since you lose all accessibility. SVGs might be better; I'm actually not at sure.
That being said, SVG is likely still a better option than PNG for its scalability alone. At least for this kind of content.
As an aside, I've been pretty impressed at GPT4's ability at generating MermaidJS sequence diagrams for open source projects.
I really, _really_ wish I could generate SVGs of these without JavaScript and a headless browser.
Earlier quoted context omitted.
Currently I generate graph diagrams for papers and blog articles in emacs with graphviz, I wonder how mermaid.js compares in that workflow. The default styles in mermaid look a little nicer than graphviz, which might be enough to motivate me to try it out. When/if I do, I'll probably try with this emacs package: https://github.com/abrochard/mermaid-mode .
Have you tried converting the dot file to svg and manipulating the svg file in the build process to improve its appearance? I'm not sure if it's worth the effort but perhaps it's a viable alternative.
Earlier quoted context omitted.
Why is it so difficult to do the layout yourself and generate SVG directly?
My guess would be that text layout and measuring is something that's very easy to offload to the browser, yet, if you want to do this without, you're pulling in a whole lot of other dependencies (text rendering is quite complex) that you maybe cannot reasonably call from JS.
---
Just to give you an idea of how hard this would be, Mermaid let's people use custom fonts, with fallbacks, so diagrams can look quite different depending on what font people have installed.
The current default font is Tahoma [4], which is owned by Microsoft, so Linux desktops usually render the diagrams slightly differently than on Windows/MacOS desktops.
People can also have different default font size in their browser/OS settings, and that will affect things too.
Finally, you also have things like ClearType [5], where the text is rendered differently depending on the sub-pixel arrangement of your monitor!!
I think we could get a basic version that partially works by implementing only a subset of the layout functions and hard-coding one specific font in, but even that would still be a fair bit of work.
[1]: https://drafts.csswg.org/cssom-view/#dom-element-getbounding...
[2]: https://github.com/jsdom/jsdom
[3]: https://github.com/jsdom/jsdom/issues/1322
I guess it’s effective because it is similar to Markdown and other lightweight stuff: things like bullet items are just written like bullet items, with hyphens (or similar). You write it how you want it to be displayed. Granted for a diagram it’s more complicated since it’s a graph and not a tree, and you write it with declarative arrows rather than as ASCII art, but perhaps that in practice strikes a nice balance be…
It's a meme title, I've seen it a couple of times on HN: https://hn.algolia.com/?q=Unreasonable+Effectiveness
Also see: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...