Can not Render MermaidJS on Result panel

kunio

I'm use FluentMermaid Library to generate mermaid syntax but can not render on result panel

http://share.linqpad.net/6d6x9h.linq

var chart = FlowChart.Create(Orientation.TopToBottom);
var cat = chart.TextNode("Cat", Shape.Circle);
var dog = chart.TextNode("Dog", Shape.Trapezoid);
chart.Link(cat, dog, Link.Open, "hates");
string mermaidSyntax = chart.Render();
Util.HtmlHead.AddScriptFromUri("https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js");
new renderMermaid(mermaidSyntax).Dump("Render Mermaid");

class renderMermaid : Control
{
public renderMermaid(string vstr) : base("div")
{
HtmlElement.InnerHtml = vstr;
CssClass = "mermaid";
}
protected override void OnRendering(EventArgs e)
{
base.OnRendering(e);
}
}

When Export as HTML file output is render

michaelkc

I tried the same today, and the situation today is the same. Some kind of issue prevents MermaidJS from initializing correctly.
A workaround is to manually initialize it on a timer, e.g. add a call to

Util.RawHtml(
@"  <script type=""text/javascript"">
    mermaid.initialize({ startOnLoad: false});

    setTimeout(function() {
        mermaid.init(undefined,document.querySelectorAll('.mermaid'));
    }, 10);
 </script>").Dump();

to the end of the script above. That caused the diagram to render correctly, with a slight delay.

Modified Linqpad:
http://share.linqpad.net/wgdqmt.linq

kunio

Thank you so much for resolving my problem. Everything works now.