server side mermaid with jsdom

[tylerlong]

Here is an interesting example for D3 to work together with jsdom:
https://bl.ocks.org/tomgp/c99a699587b5c5465228

PhantomJS is heavyweight. And it is discontinued: http://carstenwindler.de/software-testing/phantomjs-is-discontinued/

Chrome headless sounds promising but it's heavyweight too. It required the installation of Chrome browser.

I think it is best if we could make mermaid work with jsdom. It is lightweight(compared to PhantomJS and Chrome headless). And it works with Node.js out of the box.

[dead-horse]

is there any progress?

I'm trying to do server side rendering of mermaid, but just like you said, puppeteer is too heavyweight. I just tried to use mermaid with JSDOM, but it failed by negative width like width="-37.5".

[tylerlong]

It seems to be impossible. Mostly because jsdom doesn't do text font rendering so we cannot measure the width and height of text nodes. Without these information it is impossible to layout the diagrams properly.

[dead-horse]

I'm not sure if mathjax solved this problem, it use jsdom to render latex to svg in server side. https://github.com/mathjax/MathJax-node

[tylerlong]

@dead-horse maybe mathjax use pre-defined font family, so it could know the width and height of text without rendering?

Update: I think I am correct: https://github.com/mathjax/MathJax-node/blob/89d1e0af912eb2666592195a555f9edaa325f1e5/lib/main.js#L315-L320

But mermaid allow customization font family using CSS, and different font family has different text size.

[agusmba]

Removed my comment on SVG option, since it referenced an also edited comment ;-)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kilgarenone]

Has anyone managed to server-render mermaid without puppeteer ?

[PeterWone]

@dead-horse maybe mathjax use pre-defined font family, so it could know the width and height of text without rendering?

Update: I think I am correct: https://github.com/mathjax/MathJax-node/blob/89d1e0af912eb2666592195a555f9edaa325f1e5/lib/main.js#L315-L320

But mermaid allow customization font family using CSS, and different font family has different text size.

So stop allowing font-family and font-size to be controlled by the user. There's no need for it. Once SVG has been rendered they can scale that if they don't like the font size.