What makes mermaid.js cannot work on server-side, while other visualization libs can?

[ooker777]

On #465 there are 2 alternative options for Mermaid:

• Serea plugin: https://github.com/idris-maps/serea
• OI Lume Viz plugin: https://open-innovations.github.io/oi-lume-viz/

Why can they work while Mermaid can't? In general, I don't understand why:

• Mermaid should be run server-side here,
• A browser lib cannot be run server-side
• Two visualization libs just for this generator? Why can't one be enough?
• Do they have the same syntax with Mermaid?

Any insight?

[oscarotero]

Mermaid is a browser-side library and use some APIs not available in server side, like DOM, CSS, etc.
Other options are designed for server-side and don't use these APIs.

[ooker777]

so the other options generate SVG files on the final HTML files? Why can't Lume just leave Mermaid code in there and let it handle on the browser? Apparently Docusaurus can do that

[oscarotero]

yes, you can use mermaid to generate the images on the browser. The problem is it's slower, because the browser need to download the javascript, parse the mermaid code and generate the final image. The issue #465 was focused on provide a server-side solution that Lume could use on build.

[alaminkouser]

Many people also do not want to ship javascript to client this could be for many reason.

Some like to keep js free website.
Some may want the website to load faster.
Some may want the website to be mobile friendly. (You can do this by shipping mermaid js + css also).

[binhtran432k]

Hey, I don’t mean to go off topic, but Pintora is another alternative to Mermaid too.