API crashes on 2nd render() call

[jansennetive]

Hey everyone,

I successfully set up my site to read input from a textarea and make it rerender with MermaidAPI.
The first time I change the input in the textarea, the graph changes as expected.

But the second time I change the textarea I get the following error:

:WARN: TypeError: Cannot read property 'v' of undefined
at Object.edgeToId (mermaidAPI.js:10650)
at SVGGElement. (mermaidAPI.js:9661)
at bind (mermaidAPI.js:851)
at Array.d3_selectionPrototype.data (mermaidAPI.js:903)
at createEdgeLabels (mermaidAPI.js:9661)
at fn (mermaidAPI.js:10401)
at Object.exports.draw (mermaidAPI.js:50877)
at render (mermaidAPI.js:58254)
at Object.exports.render (mermaidAPI.js:58345)
at HTMLTextAreaElement. ((index):40)

The code I used is as follows:

$('#cfgTextarea').change(function(emt) {
	var graphStr = emt.target.value;
	var correct = mermaidAPI.parse(graphStr);
	if (correct) {
		var graph = mermaidAPI.render(graphStr);
		$('#mermaidContainer').html(graph);
	} else {
		$('#errorMsg').html('<br/>Wrong.');
	}
});

I am baffled by this weird error and I can't find out what really caused it. Any ideas?

[StingyJack]

I get the same thing but there doesnt appear to be a renderError (like there is for parseError) to override to inspect further.

Its AspNetCore 1.1 mvc project if that is anything in common.

<div class="row">
    <div class="col-lg-3">
        <textarea id="mermaidDataEntryField" class="mermaidDataEntryField" rows="10" cols="80">
            graph TD
                A-->B("<b>nice</b> <i>display</i> value")
                B-->C["got it?"]
        </textarea>
    </div>
    <div class="mermaidChartContainer col-lg-7">
        <div class="row">
            <text>Svg Preview</text>
        </div>
        <div class="row">
            <div id="mermaidPreview" class="mermaid">

            </div>
        </div>
        <div class="row">
            <div id="errParse"></div>
        </div>
    </div>
</div>
<div class="row">
    <div id="controls" class="row">
        <input type="button" value="Force Preview" class="btn btn-primary" onclick="return attemptGraphRendering();" />
    </div>
</div>
<script>
    var mermaidInitted = false;
    function attemptGraphRendering() {

        if (mermaidInitted === false)
        {
            mermaid.init({ startOnLoad: false });
            mermaid.parseError = function(err,hash){
                $('#errParse').value(err);
            };
            mermaidInitted = true;
        }
        var ele = $('#mermaidDataEntryField');
        var graphText = ele.val();
        var parseable = mermaidAPI.parse(graphText);
        if (parseable) {
            var graph = mermaid.mermaidAPI.render(graphText);
            $('#mermaidPreview').html(graph);

        }
        else{
            $('#errParse').value("Couldn't parse");
        }
    }
</script>

[ghost]

render can take 3 parameters. I faced the same problem and corrected it like that (I used Jquery but feel free to do it with JS) :

var callback = function(html) {
    $('#yourMermaidContainer').html(html);
};
mermaid.mermaidAPI.render('SEE_BELOW', 'Your mermaid string', callback);

the value SEE_BELOW has to be changed at every call. You won't have the error anymore.

[StingyJack]

Fantastic, @trichetriche thanks!

var needsUniqueId = "render" + (Math.floor(Math.random() * 10000)).toString(); //should be 10K attempts before repeat user finger stops working before then hopefully
mermaid.mermaidAPI.render(needsUniqueId, graphText, mermaidApiRenderCallback);

function mermaidApiRenderCallback(graph) {
  $('#mermaidPreview').html(graph);
}

[jansennetive]

Well, this does "fix" the bug, so thank you. Still I think it's absurd that some random id is required in order to generate an svg graph. I wish the API could just give me the svg code based on the markdown text I provide and append it my to div.

[ghost]

I do agree with you @jansennetive, but I think it might come from a feature that we haven't used yet.

[StingyJack]

@jansennetive consider reopening the issue

[D51947403]

This solution helps me :

var needsUniqueId = "render" + (Math.floor(Math.random() * 10000)).toString(); //should be 10K attempts before repeat user finger stops working before then hopefully
mermaid.mermaidAPI.render(needsUniqueId, graphText, mermaidApiRenderCallback);

function mermaidApiRenderCallback(graph) {
$('#mermaidPreview').html(graph);
}

[omerose]

This still happens today with the latest version of Mermaid.

Although it doesn't crash, unless I provide a unique ID, every ~3 or so renders will give me an empty SVG (Even though all the other inputs are the same)

[nothingismagick]

In Vue I am doing the following:

goMermaid (pattern) {
      // null it so that we don't accidentally append
      this.graph = null
      // otherwise mermaid gets lost
      this.$nextTick(() => {
        this.graph = mermaidAPI.render('mermaid', pattern)
      })
    }

[knsv]

The reason why the id is required is that the DOM is used for rendering the svg even though that isn't visible. The id is used to reference the element.

We could have a check in the render function, if there are two arguments, generate a uniq id. If there are three arguments assume the first one is a provided unique id.

When implementing this, make sure the api docs are updated. They are generated from the comments in the mermaidAPI.js file. See the comments above the render function.

This could be a good first issue.

[IOrlandoni]

@chris579 Hey, Chris. I believe you looked into this issue. We received a PR for it. Could you check it out? Do you think it solves the issue? Are you currently working on it and would prefer merging what you have instead of the PR?

[klemmchr]

I wasn't able to have a deep look into it but surely will look into that PR.