This sample shows how to use the MermaidRender component. This component can come in handy on pages that host HTML content that potentially contain Mermaid diagram definitions.

Assume that you have a Blazor page that renders HTML content with one or more Mermaid diagram definitions. By adding the MermaidRender component to that page, you can easily render the Mermaid diagram definition into a Mermaid diagram.

@page "/diagram-page"

<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>

<MermaidRender Selector="pre.mermaid" />

If your application dynamically generates the content it displays, or if that content dynamically changes, then you might want to have a look at the HtmlRender component as well.