Hacker News Reader

Comment by rcarmo | Hacker News Reader

I really, _really_ wish I could generate SVGs of these without JavaScript and a headless browser.

Have you looked at d2lang - it supports SVG output: https://d2lang.com/tour/exports/

The syntax is a bit different though, so it depends on where your source is coming from, see here: https://text-to-diagram.com/?example=sequence&b=mermaid

I really like d2 a lot more than its alternatives.

However the big problem here being that d2 is still quite new and isn't as well supported as Mermaid JS

D2 lang (https://d2lang.com) can do that.

My guide: https://victorbjorklund.com/build-diagrams-as-code-with-d2-d...

Curious if anyone has experience with large diagrams (100K+ elements) using D2 or something similar?

I've had a lot of luck with Graphviz and ridiculous numbers of nodes. Have you tried that?

A little bit, I'm just not a fan of the way it looks.

That's a perfectly fair issue. Mermaid and friends are soooo much prettier.

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.

Hah, I haven't tried that, but I bet it's possible to do it all within org-mode...

Check out seqdiag, part of blockdiag [1]. It's python-based and uses graphviz (AFAIK) to generate sequence diagrams in SVG. I've used it several times and found it very good.

1. http://blockdiag.com/en/seqdiag/index.html

Having to use npm did put me off initially (as I had never used it, or JS, before), but it was quite painless, and now I have pretty sequence diagrams inline my org-mode docs. Its is about a billion time better than using the confluence builtin WYSIWYG graph builder.

As another commenter mentions, the mmdc tool takes care of this. I should have mentioned that in the blog post.

Does it do it without needing to have npm and puppeteer installed at all?

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 last weekend, but it's seems we're blocked by missing features in other packages [2].

If anyone has any ideas on how to implement these things easily, feel free to help-out :) I'm also not a big fan of puppeteer, so I'd love to see a way to go without it.

[1]: https://github.com/mermaid-js/mermaid/issues/3650

[2]: https://github.com/mermaid-js/mermaid-cli/issues/467#issueco...

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.

That's pretty much it. All modern browsers come with CSS layout functions [1], even Internet Explorer did! Pretty much every other Web API can be implemented in Node.JS using something like JSDom [2], but the CSS layout engine is the main missing feature. And the creator of JSDom estimated it would take 3-6 months of full-time work from a talented engineer to implement something like this [3], so this might take a while.

---

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

[4]: https://en.wikipedia.org/wiki/Tahoma_(typeface)

[5]: https://en.wikipedia.org/wiki/ClearType

I have used https://github.com/mermaid-js/mermaid-cli

The mmdc tool does this!

I'm looking at its GitHub repo and it lists puppeteer as a dependency. There's even a puppeteer-config.json in there, so I assume it still requires having Node and running a headless browser in the background.

Reply on news.ycombinator.com