3 ms·

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

by rcarmo 3y ago

pbnjay 3y ago
The mmdc tool does this!
- rcarmo 3y ago
  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.
jrmiii 3y ago
Have you looked at d2lang - it supports SVG output: https://d2lang.com/tour/exports/ 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 https://text-to-diagram.com/?example=sequence&b=mermaid
- sp33der89 3y ago
  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
gpderetta 3y ago
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.
hiyer 3y ago
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 http://blockdiag.com/en/seqdiag/index.html
jessems 3y ago
As another commenter mentions, the mmdc tool takes care of this. I should have mentioned that in the blog post.
- rcarmo 3y ago
  Does it do it without needing to have npm and puppeteer installed at all?
  - aloisklink 3y ago
    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 https://github.com/mermaid-js/mermaid/issues/3650 [2]: https://github.com/mermaid-js/mermaid-cli/issues/467#issuecomment-1646720045 https://github.com/mermaid-js/mermaid-cli/issues/467#issueco...
    - andrewshadura 3y ago
      Why is it so difficult to do the layout yourself and generate SVG directly?
      - ygra 3y ago
        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.
victorbjorklund 3y ago
D2 lang (https://d2lang.com https://d2lang.com) can do that. My guide: https://victorbjorklund.com/build-diagrams-as-code-with-d2-d2lang https://victorbjorklund.com/build-diagrams-as-code-with-d2-d...
- rgrieselhuber 3y ago
  Curious if anyone has experience with large diagrams (100K+ elements) using D2 or something similar?
  - kstrauser 3y ago
    I've had a lot of luck with Graphviz and ridiculous numbers of nodes. Have you tried that?
    - rgrieselhuber 3y ago
      A little bit, I'm just not a fan of the way it looks.
      - kstrauser 3y ago
        That's a perfectly fair issue. Mermaid and friends are soooo much prettier.
hoosieree 3y ago
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 https://github.com/abrochard/mermaid-mode.
- nequo 3y ago
  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.
  - hoosieree 3y ago
    Hah, I haven't tried that, but I bet it's possible to do it all within org-mode...
ree-san 3y ago
I have used https://github.com/mermaid-js/mermaid-cli https://github.com/mermaid-js/mermaid-cli

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

by rcarmo 3y ago

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

pbnjay 3y ago

The mmdc tool does this!

rcarmo 3y ago
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.

jrmiii 3y ago

Have you looked at d2lang - it supports SVG output: https://d2lang.com/tour/exports/ 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 https://text-to-diagram.com/?example=sequence&b=mermaid

sp33der89 3y ago
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

gpderetta 3y ago

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.

hiyer 3y ago

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 http://blockdiag.com/en/seqdiag/index.html

jessems 3y ago

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

rcarmo 3y ago
Does it do it without needing to have npm and puppeteer installed at all?
- aloisklink 3y ago
  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 https://github.com/mermaid-js/mermaid/issues/3650 [2]: https://github.com/mermaid-js/mermaid-cli/issues/467#issuecomment-1646720045 https://github.com/mermaid-js/mermaid-cli/issues/467#issueco...
  - andrewshadura 3y ago
    Why is it so difficult to do the layout yourself and generate SVG directly?
    - ygra 3y ago
      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.

victorbjorklund 3y ago

D2 lang (https://d2lang.com https://d2lang.com) can do that. My guide: https://victorbjorklund.com/build-diagrams-as-code-with-d2-d2lang https://victorbjorklund.com/build-diagrams-as-code-with-d2-d...

rgrieselhuber 3y ago
Curious if anyone has experience with large diagrams (100K+ elements) using D2 or something similar?
- kstrauser 3y ago
  I've had a lot of luck with Graphviz and ridiculous numbers of nodes. Have you tried that?
  - rgrieselhuber 3y ago
    A little bit, I'm just not a fan of the way it looks.
    - kstrauser 3y ago
      That's a perfectly fair issue. Mermaid and friends are soooo much prettier.

hoosieree 3y ago

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 https://github.com/abrochard/mermaid-mode.

nequo 3y ago
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.
- hoosieree 3y ago
  Hah, I haven't tried that, but I bet it's possible to do it all within org-mode...

ree-san 3y ago

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