Sample2

Sample: Using the MermaidRender Component

This sample shows how to use the MermaidRender component. This component can come in handy if you publish content in your Blazor application that is for instance sourced in a database where the Mermaid definitions are mixed together with other HTML content.

Assume that you have a Blazor page that renders HTML content from a database. For simplicity, the sample below does not cover any database access, but stores the content directly in a local variable.

@this.HtmlContent

<MermaidRender Selector="pre.mermaid" />

@code {

private string Markup = @"
<h1>A Mermaid Diagram</h1>
<p>Below is a Mermaid diagram rendered by the <code>MermaidRender</code> component.</p>

<pre class="mermaid">
pie title Petz adopted by volunteers
""Dogs"": 386
""Cats"": 85
""Rats"": 15

</pre>
";

private MarkupString? HtmlContent { get; set; }

protected override void OnParametersSet()
{
    this.HtmlContent = new MarkupString(this.Markup)
}
}