Home

Can not Render MermaidJS on Result panel

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

Comments

  • 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

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

Sign In or Register to comment.