Sample Projects

Sample Projects

MermaidSharp includes two sample applications demonstrating real-world usage of the library.

MermaidSharp.MVCWeb

An ASP.NET Core MVC web application (.NET 9) demonstrating how to integrate MermaidSharp in a server-side web application.

Location: src/MermaidSharp.MVCWeb

Running the MVC Sample

cd src/MermaidSharp.MVCWeb
dotnet run

---

MermaidSharp.BlazorApp

A Blazor WebAssembly application (.NET 9) demonstrating how to use MermaidSharp in a client-side Blazor app and render diagrams with mermaid.js.

Location: src/MermaidSharp.BlazorApp

Running the Blazor Sample

cd src/MermaidSharp.BlazorApp
dotnet run

Blazor WebAssembly Integration Pattern

The sample app renders Mermaid content using the Blazorade.Mermaid component package.

@using Blazorade.Mermaid.Components

<MermaidDiagram Definition="@graph" />

@code {
    private string graph = string.Empty;

    protected override Task OnInitializedAsync()
    {
        var flowchart = new FlowchartDiagram();
        flowchart.Nodes.Add(new FlowNode("a", "Start"));
        flowchart.Nodes.Add(new FlowNode("b", "End"));
        flowchart.Links.Add(new FlowLink("a", "b"));

        graph = flowchart.CalculateDiagram();
        return Task.CompletedTask;
    }
}

Include the mermaid.js CDN script in your wwwroot/index.html:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: false });
    window.mermaid = mermaid;
</script>