Support API in nodejs

[jiangtj]

Describe the solution you'd like

I see that mermaid provides API to operate on the browser side, but why similar API isn't provided in nodejs?

For example:

const mermaid = require('mermaid');
var renderer = new marked.Renderer();
renderer.code = function (code, language) {
    if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
        return '<div class="mermaid">'+mermaid.render(code)+'</div>';
    }
    else{
        return '<pre><code>'+code+'</code></pre>';
    }
};

Many MD renderers will provide code blocks. We only need to render them into the SVG. Compared with introducting JS in the browser, this solution can improve the efficiency of page loading (after all, it has been processed in node )

[klemmchr]

Mermaid relies on the browser to generate diagrams so you won’t be able to use it without browser.

[vcarl]

I pretty briefly dug into this because I was alarmed to find that gatsby-remark-mermaid was rendering them using puppeteer, and I was surprised to find such a heavy reliance on DOM APIs to construct the final SVGs. This seems like it would essentially boil down into a full rewrite, at least of the rendering logic, because of how thoroughly mermaid assumes it's in a browser environment.

[nkuehn]

I haven't tried it, but JsDOM ( https://github.com/jsdom/jsdom ) provides a fairly complete DOM API implementation for node.js without having to use the full browser stack including the renderer and CSS implementation (like puppeteer).

So in its simplest form you could try to pass a JsDOM <div> element to mermaid API as that last parameter that allows to inject an own element to be used for the rendering.

Edits: Issue #559 covers the discussion but was auto-closed by the bot due to inactivity. summary: JsDom does not work because the layout algorithm relies on letting the browser engine calculate the size of the elements. Since any custom CSS is supported and the layout is SVG, i.e. absolute pixels it looks the mermaid architecture is actually constrained to browser engines .

[mithray]

Edits: Issue #559 covers the discussion but was auto-closed by the bot due to inactivity. summary: JsDom does not work because the layout algorithm relies on letting the browser engine calculate the size of the elements. Since any custom CSS is supported and the layout is SVG, i.e. absolute pixels it looks the mermaid architecture is actually constrained to browser engines .

Such a shame. I can't use this for server side rendering. I've tried the CLI that uses puppeteer and it seems hacky at best. Huge resource requirement and it freezes my machine. I'll have to stick with chartjs.

[jgreywolf]

Closing as wont fix