Update graph

[LeonardoRamos]

Hi, I have a question, I have a graph in my page that is loaded as soon the page is fully loaded. I have some menus that allow the user to add nodes and remove nodes, manipulating the graph definition that is inside a textarea, but I'm having difficulties trying to "redraw" the graph. I tried calling "init" again, I tried calling the API, but I have no success in both options. So my question is, how can I re-render the graph?

[LeonardoRamos]

Actually, it works in Firefox, it's not re-rendering the graph only in chrome (I'm using chrome 48) and I tested mermaid versions 5.7, 5.6 and 4.0, none of them worked, only a very old version worked fine (The one used in the editor folder).

[knsv]

Are you using the API for this rendering? It sounds like you should use the render function for this.

Se example in the docs:
http://knsv.github.io/mermaid/#api-usage

I hope that helps.

[radmilabord]

Render function works only ones. Did anyone found solution for this? I'm facing same problem.

[knsv]

Looking at this one.

[radmilabord]

I solved it by removing div with graph, adding it back, setting text, calling init method.
Same approach is done in "try it" demo.
However if rerender function could work, it would be great.

[knsv]

OK. Will continue with it anyway then.

[roidayan]

i know its old but wanted to say i do not delete the entire div but remove the attribute "data-processed". after that calling init on it again seems to work.

[radmilabord]

Thanks! That sounds like a less intrusive approach.

[dianaeneida]

roidayan, ¿could you expose the complete solution here?, please

[roidayan]

my html is:

<div id="mermaid"></div>

and in js I do this on init and each time my data in node.data.graph changes:

$('#mermaid').html(node.data.graph).removeAttr('data-processed');
mermaid.init(undefined, $("#mermaid"));

[tylerlong]

@roidayan 's solution works and I use it too.

[hikari-He]

my html is:

<div id="mermaid"></div>

and in js I do this on init and each time my data in node.data.graph changes:

$('#mermaid').html(node.data.graph).removeAttr('data-processed');
mermaid.init(undefined, $("#mermaid"));

You solved my problem.
In addition, this method can work in mermaid 9.1.0, but not work in mermaid 9.4.3.

[eduo]

my html is:

<div id="mermaid"></div>

and in js I do this on init and each time my data in node.data.graph changes:

$('#mermaid').html(node.data.graph).removeAttr('data-processed');
mermaid.init(undefined, $("#mermaid"));

You solved my problem. In addition, this method can work in mermaid 9.1.0, but not work in mermaid 9.4.3.

Did you find a solution? It also doesn't seem to work in mermaid 10, to which I'm trying to migrate. I can't find if it's not explicitly covered in 10.

[hikari-He]

@eduo I didn't find solution, my solution is use mermaid 9.1.0. My front-end skills are limited so I don't quite understand the reasons that why mermaid 9.1.0 can work but other version can't.