add function rendering mermaid syntax to html string without replacing html objects

I think a lot of people could possibly benefit from mermaidAPI.render() function having more flexibility when it comes to rendering options. Last two days I had to hack mermaidAPI.render() to get just rendered string (to use it with Vue.js). Here what I discovered:

• The first time it renders correctly, each next time it raises error:

mermaidAPI.render(NaN, string, function(graph){console.log(graph)})

• Raises error every time:

mermaidAPI.render(null, string, function(graph){console.log(graph)})

• Sometimes raises error, sometimes not (not sure how it works):

mermaidAPI.render(undefined, string, function(graph){console.log(graph)})

• Renders for the first call, after it raises error, that it cant find “#string” (without #string in html):

mermaidAPI.render("string", string, function(graph){console.log(graph)})

• Raises error only if first letter of generated string is digit:

var hack = Math.random().toString(36).substring(7)
mermaidAPI.render(hack, string, function(graph){console.log(graph)})

• We use this solution, and it’s working well so far:

var hack = Math.random().toString(36).substring(7).replace(/\d/, "a")
mermaidAPI.render(hack, string, function(graph){console.log(graph)})

Our problem: we need onclick refreshing string witch communicates well with vue.js (we pass output in callback function to vue data object. There is no mermaidAPI function for that so we had to hack render function, but it occurs it acts very unpredictable depending on what JS object is passed to the first variable.

The best possible solution would be function witch just renders the graph, without trying to replace div with given id every time called.

[tylerlong]

mermaid was not designed as a node library. So it is closely coupled to browser and DOM. The ultimate solution would be like this:

const svgString = mermaid.renderString('Your graph code here...')

And it should also work in a pure node env without browser(and will work for browser too with webpack, browerify…etc.)

Recently I’ve been thinking about it.

[strangedev]

Why is this closed? This would be a very handy function to have, as it is very complicated at the moment to get mermaid to work correctly in React.