Arrows endings are missing

[sarankup]

Hi,

Based on my page, users will keep modifying some of the value and I build the graph text in a variable (wscriptstr) and then pass it to render it as graph. Here is my code. All works well except the arrow ending. Please advise how to fix.

function renderchart(){
removechart();
var callback=function(code,bindEvents){
$("#id1").html(code);
bindEvents();
};
mermaidAPI.render('id1',wscriptstr,callback);
console.log('Chart rendered...');
}

function removechart(){
$('#id1').remove();
$('#idroot').html('

');
}

[sarankup]

Hi,

I could solve this. It looks the mermaidAPI.render requires a new document element every time. If we pass the element which was already processed caused this issue. Here is the way, I could solve this issue.

`
function guid(){return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();}
function s4(){return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);}

function renderchart(){
$('#'+oldgraphid).remove();
oldgraphid='id'+guid();
$('#idroot').html('<div id="'+oldgraphid+'"></div>');
mermaidAPI.render(oldgraphid,wscriptstr,function(code,bindEvents){
$("#"+oldgraphid).html(code);
bindEvents();
});
console.log('Chart rendered...');
}
`