Blazorade Mermaid
Blazorade Mermaid is a Blazor component library that lets you add Mermaid diagrams to any Blazor application without writing a single line of JavaScript. It handles all JavaScript interop for you, so you can focus on your diagrams.
What is Mermaid?
Mermaid is a JavaScript-based diagramming and charting tool that renders diagrams in web applications from simple text-based definitions inspired by Markdown. It supports a wide range of diagram types, including flowcharts, sequence diagrams, pie charts, XY charts, mindmaps, and more.
Because Mermaid is driven by JavaScript, using it in Blazor applications requires JavaScript interop. Blazorade Mermaid wraps all of that complexity behind familiar Blazor components, so you never have to think about it.
Getting Started
Getting up and running with Blazorade Mermaid takes three steps.
- Add the Blazorade.Mermaid NuGet package to your Blazor project.
- Add the following
usingdirective to your_Imports.razorfile.
@using Blazorade.Mermaid.Components
- Add the
<MermaidDiagram>component anywhere you want to render a diagram.
You do not need to add any JavaScript <script> tags to your page layout. Blazorade Mermaid takes care of loading the Mermaid library automatically.
Components
Blazorade Mermaid provides three components, each suited to a different rendering scenario.
MermaidDiagram
The MermaidDiagram component is the primary way to render a Mermaid diagram in your Blazor application. Set the Definition parameter to a Mermaid diagram definition string, and the diagram renders automatically. When the value of Definition changes, the diagram updates in place.
<MermaidDiagram Definition="@this.diagramDef" />
@code {
string diagramDef = @"
flowchart LR
A --> B
B --> C
C --> A
";
}
The diagram will re-render whenever diagramDef changes, making it easy to build interactive pages that switch between diagrams dynamically.
Switching diagrams at runtime
The example below shows two buttons that swap between a flowchart and a sequence diagram rendered in a single <MermaidDiagram /> component.
<button @onclick="() => this.definition = def1">Flowchart</button>
| <button @onclick="() => this.definition = def2">Sequence Diagram</button>
| <button @onclick="() => this.definition = def3">XY Chart</button>
<MermaidDiagram Definition="@this.definition" />
@code {
string definition = string.Empty;
const string def1 = @"
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
";
const string def2 = @"
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
";
const string def3 = @"
xychart-beta
title ""Sales Revenue""
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis ""Revenue (in $)"" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
";
}
MermaidRender
The MermaidRender component is useful when your page already contains static HTML with Mermaid diagram definitions embedded in it, typically inside <pre class="mermaid"> elements. Instead of restructuring your markup, you just drop in <MermaidRender> with a CSS selector, and it processes the matching elements.
@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 Pets adopted by volunteers
"Dogs": 386
"Cats": 85
"Rats": 15
</pre>
<MermaidRender Selector="pre.mermaid" />
HtmlRender
The HtmlRender component is designed for applications that display dynamically generated HTML content — for example, content loaded from a database or CMS — that may contain embedded Mermaid diagram definitions. Pass the HTML string to HtmlContent and a CSS selector to Selector, and the component renders both the HTML and any diagrams it finds within it.
<HtmlRender Selector=".mermaid" HtmlContent="@this.htmlContent" SecurityLevel="SecurityLevel.Loose" />
@code {
string? htmlContent = null;
private void LoadContent()
{
this.htmlContent = @"
<h2>Generated content</h2>
<p>This content was loaded dynamically and contains a Mermaid diagram.</p>
<pre class=""mermaid"">
pie title Pets adopted by volunteers
""Dogs"" : 386
""Cats"" : 85
""Rats"" : 15
</pre>";
}
}
HtmlRender is available from Blazorade.Mermaid v1.3.0.