7 ms·

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

by jessems 3y ago

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.
      - aloisklink 3y ago
        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-getboundingclientrect https://drafts.csswg.org/cssom-view/#dom-element-getbounding... [2]: https://github.com/jsdom/jsdom https://github.com/jsdom/jsdom [3]: https://github.com/jsdom/jsdom/issues/1322 https://github.com/jsdom/jsdom/issues/1322 [4]: https://en.wikipedia.org/wiki/Tahoma_(typeface) https://en.wikipedia.org/wiki/Tahoma_(typeface) [5]: https://en.wikipedia.org/wiki/ClearType https://en.wikipedia.org/wiki/ClearType

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.
    - aloisklink 3y ago
      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-getboundingclientrect https://drafts.csswg.org/cssom-view/#dom-element-getbounding... [2]: https://github.com/jsdom/jsdom https://github.com/jsdom/jsdom [3]: https://github.com/jsdom/jsdom/issues/1322 https://github.com/jsdom/jsdom/issues/1322 [4]: https://en.wikipedia.org/wiki/Tahoma_(typeface) https://en.wikipedia.org/wiki/Tahoma_(typeface) [5]: https://en.wikipedia.org/wiki/ClearType https://en.wikipedia.org/wiki/ClearType