Server Side Support

[Yash-Singh1]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Support for server-side rendering of Mermaid.js such as Node.js

Describe the solution you'd like A clear and concise description of what you want to happen.

This has been discussed in #559 and #1183. I looked into the source code and noticed that a browser environment is required to precompute widths/heights. Just saw this project, maybe we can use Vercel's Satori. It internally uses Facebook's Yoga, a cross-compatible flexbox implementation.

[aloisklink]

This would also greatly help the mermaid-cli project! It currently uses puppeteer to create a browser instance to render Mermaid diagrams, but that's a very very heavy program (and has caused mermaid-cli to be removed from homebrew: https://github.com/mermaid-js/mermaid-cli/issues/288#issuecomment-1270824782)

Alternative Solutions

svgdom might help as well, as it adds a bunch of SVG DOM features to Node.JS.

Issues

We'd most likely have to change the default font to an open-source font too, since the default fonts are owned by Microsoft:

https://github.com/mermaid-js/mermaid/blob/c99fd2baa9eaf156ea3218d691289f3d95ba9341/packages/mermaid/src/defaultConfig.ts#L50

I'd recommend https://fonts.google.com/specimen/Atkinson+Hyperlegible as a good default, since it's designed for people with low vision, and it's available under the Open Font License. The license is very permissive, we just need to:

At a minimum you must include the copyright statement, the license notice and the license text. A mention of this information in your About box or Changelog, with a link to where the font package is from, is good practice [...]

From https://scripts.sil.org/cms/scripts/page.php?item_id=OFL-FAQ_web#2a57c6bb (Question 1.20)

[sidharthv96]

This could also enable the generation of diagram previews when linking to live editor.

[knsv]

Lots of possibilities with this one.

[slorber]

We just finished the integration of Mermaid in Docusauurs (https://github.com/facebook/docusaurus/pull/7490)

We would also really like to have SSR support:

• mermaid increases the bundle size, but doc sites should rather remain light
• rendering the SVG only on the client produces layout shifts
• progressive enhancement: if js loads slowly (or not at all), the doc page does not display any diagrams

Important thing to consider: it would be great if the SVG output did use CSS variables so that we can do theming and support dark/light mode:

• if colors are hardcoded into the SVG it means we would have to build one svg per theme server-side.
• if colors are CSS vars we can just use different CSS variables based on a html[data-theme='dark'] CSS selector

[aloisklink]

We just finished the integration of Mermaid in Docusauurs (https://github.com/facebook/docusaurus/pull/7490)

Exciting stuff! I'm looking forwards to the next Docusaurus release then! :rocket:

I do have a server-side rendering (SSR) plugin for remark called remark-mermaid-dataurl that works for docusaurus, but the way it works is by using puppeteer to render the SVGs, so it's very slow and heavy (puppeteer downloads a copy of the chromium browser on the server and it's a 450+ MiB download!)

Important thing to consider: it would be great if the SVG output did use CSS variables so that we can do theming and support dark/light mode:

It might be easier to hard-code them for a few reasons:

• Mermaid currently uses CSS variables, which causes issues with non-browser SVG software, e.g. inkscape, see https://github.com/mermaid-js/mermaid/issues/2102 Ideally we'd want to get rid of CSS variables, if we can.
• Depending on the host's Content Security Policy (CSP), modifying the CSS of SVGs gets a bit difficult. I'm not an expert on CSP though, so maybe there's a way to work around this!
• Mermaid already has a dark mode API: https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md#theme-variables-reference-table

Docusaurus would always be able to override the Mermaid default CSS with their own custom CSS using the themeCSS option.

Although, adding server-side rendering support to Mermaid will probably take a while, so maybe some of these considerations will change over time.

[ggrossetie]

Would you be open to integrate a mechanism to convert text to SVG paths (such as https://maker.js.org/ or https://github.com/vercel/satori)?

It would solve font cut-off issues when a diagram is generated server-side because the font is very likely not going to be rendered identically on the client side.

[DanInProgress]

This is something I've been interested in for a while, I currently use mermaid with gatsby for my blog. (including maintaining a fork of a plugin to prerender diagrams with puppeteer. I may start experimenting with this over the holiday break--puppeteer is easily the most fragile part of my static site build.

I saw others successfully leverage jsdom to render d3 charts, so I think I'll probably start there

@aloisklink do you know of any obvious stumbling blocks for that approach? edit: just saw your comment on #3491 (link) , so yeah, may have some problems...

@Mogztter that's an interesting idea, did you have any thoughts on how to address the SEO and accessibility concerns of such an approach? Charts tend to be much more vital to understanding the content of a page than other types of figures, and removing all text might cause problems with this.

[ggrossetie]

that's an interesting idea, did you have any thoughts on how to address the SEO and accessibility concerns of such an approach? Charts tend to be much more vital to understanding the content of a page than other types of figures, and removing all text might cause problems with this.

I think we should use the title element with an aria-labelledby: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

The