MermaidJS.Blazor
MermaidJS.Blazor copied to clipboard
A simple MermaidDiagram component for Blazor.
MermaidJS.Blazor
A simple MermaidDiagram component for Blazor.
For more information on MermaidJS including the diagram definition syntax, JavaScript API, or other supported features, please visit: https://mermaid-js.github.io/.
Getting Started
1. Install the MermaidJS.Blazor
NuGet package.
> dotnet add package MermaidJS.Blazor
2. Add builder.Services.AddMermaidJS()
to your Program.cs
.
using Microsoft.Extensions.DependencyInjection;
// ... //
builder.Services.AddMermaidJS();
NOTE: You do not need to include mermaid.js or mermaid.min.js in your index.html. MermaidJS.Blazor will load the library on demand at runtime.
3. Use the MermaidDiagram
component in your app.
@using MermaidJS.Blazor
<!-- ... -->
<MermaidDiagram Definition="@diagramDefinition" OnClick="OnClickNode" />
@code
{
string diagramDefinition = "graph TB\nA-->B";
void OnClickNode(string nodeId)
{
// TODO: do something with nodeId
}
}
Handling Node Clicks
To raise node click events back to your blazor component, set your click callback to onClickMermaidNode
:
graph TB
A--B
click A onClickMermaidNode