Mostlylucid.Naiad.Blazor 0.0.1-alpha

This is a prerelease version of Mostlylucid.Naiad.Blazor.

dotnet add package Mostlylucid.Naiad.Blazor --version 0.0.1-alpha

NuGet\Install-Package Mostlylucid.Naiad.Blazor -Version 0.0.1-alpha

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="Mostlylucid.Naiad.Blazor" Version="0.0.1-alpha" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="Mostlylucid.Naiad.Blazor" Version="0.0.1-alpha" />
                    

                            Directory.Packages.props

<PackageReference Include="Mostlylucid.Naiad.Blazor" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add Mostlylucid.Naiad.Blazor --version 0.0.1-alpha

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Mostlylucid.Naiad.Blazor, 0.0.1-alpha"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package Mostlylucid.Naiad.Blazor@0.0.1-alpha

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=Mostlylucid.Naiad.Blazor&version=0.0.1-alpha&prerelease
                    

                            Install as a Cake Addin

#tool nuget:?package=Mostlylucid.Naiad.Blazor&version=0.0.1-alpha&prerelease
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Naiad.Blazor

Blazor wrapper for the <naiad-diagram> web component.

Install

dotnet add package Naiad.Blazor

Register

In Program.cs:

using Naiad.Blazor;

builder.Services.AddNaiadBlazor(options =>
{
    // Default is Mermaid profile.
    // options.ScriptUrl = NaiadBlazorProfiles.Mermaid;
    options.ScriptUrl = NaiadBlazorProfiles.Complete;
});

Use

In _Imports.razor:

@using Naiad.Blazor

In a page/component:

<NaiadDiagram Mermaid="@diagram"
              Theme="auto"
              FitWidth="true"
              ShowMenu="true"
              OptionsJson='{"skinPack":"material3"}'
              style="min-height: 280px;" />

@code {
    private const string diagram = """
    flowchart LR
      A[Blazor] --> B[Naiad]
      B --> C[SVG]
    """;
}

Script Sources

Built-in profile constants:

NaiadBlazorProfiles.Mermaid
NaiadBlazorProfiles.Complete

You can also set a self-hosted script URL:

builder.Services.AddNaiadBlazor(o =>
    o.ScriptUrl = "/js/naiad-web-component.js");

In-Repo Sample

See:

Naiad/src/Naiad.Blazor.Sample

Product	Compatible and additional computed target framework versions.
.NET	net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
0.0.1-alpha	91	2/25/2026

v0.1.1 - Initial public preview
- 30+ Mermaid diagram types (flowchart, sequence, class, ER, state, geo, etc.)
- Blazor web component wrapper
- ImageSharp and SkiaSharp rendering surfaces
- Showcase and Cats skin packs
- WebAssembly support via npm packages