Shiny .NET v4 is here with BLE Windows Support, Improved GPS, & More! Check It Out

Mermaid Diagrams | Blazor Usage

The Blazor <MermaidDiagramView> component renders Mermaid flowchart syntax, mirroring the MAUI control.

Setup

Install the NuGet package:

dotnet add package Shiny.Blazor.Controls.MermaidDiagrams

Add the @using directive — typically in _Imports.razor:

@using Shiny.Blazor.Controls.MermaidDiagrams

Basic Usage

<MermaidDiagramView DiagramText="@diagram"
                    AllowPanning="true"
                    AllowZooming="true" />

@code {
    string diagram = """
        graph TD
            A[Start] --> B{Decision}
            B -->|Yes| C[Action]
            B -->|No| D[End]
            C --> D
        """;
}

Theming

<MermaidDiagramView DiagramText="@diagram"
                    Theme="@theme" />

@code {
    string diagram = "graph LR\n    A --> B --> C";
    DiagramTheme theme = new DarkTheme();
}

Built-in themes: DefaultTheme, DarkTheme, ForestTheme, NeutralTheme.

Live Editor

<div style="display: flex; gap: 16px;">
    <textarea @bind="diagram" @bind:event="oninput"
              style="flex: 1; height: 300px; font-family: monospace;" />
    <div style="flex: 1;">
        <MermaidDiagramView DiagramText="@diagram"
                            ParseError="@parseError"
                            ParseErrorChanged="e => parseError = e" />
        @if (!string.IsNullOrEmpty(parseError))
        {
            <p style="color: red;">@parseError</p>
        }
    </div>
</div>

@code {
    string diagram = "graph TD\n    A --> B";
    string? parseError;
}