CanDoItAll.Components.Mermaid 0.1.18

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package CanDoItAll.Components.Mermaid --version 0.1.18
                    


                    

                
NuGet\Install-Package CanDoItAll.Components.Mermaid -Version 0.1.18
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="CanDoItAll.Components.Mermaid" Version="0.1.18" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="CanDoItAll.Components.Mermaid" Version="0.1.18" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="CanDoItAll.Components.Mermaid" />
                    


                            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 CanDoItAll.Components.Mermaid --version 0.1.18
                    


                    

                
#r "nuget: CanDoItAll.Components.Mermaid, 0.1.18"
#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 CanDoItAll.Components.Mermaid@0.1.18
#: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=CanDoItAll.Components.Mermaid&version=0.1.18
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=CanDoItAll.Components.Mermaid&version=0.1.18
                    


                            Install as a Cake Tool

CanDoItAll.Components.Mermaid

Purpose

Mermaid renders authored flowcharts, sequence diagrams, and architecture maps inside a Blazor application. It wraps Mermaid with source normalization, the shared BaseLib zoom/pan frame, typed render errors, render results, node-click events, and the static assets a host needs.

Quick start

Register the renderer, include its assets once in the document head, then provide Mermaid source to MermaidDiagram. MermaidHeadAssets includes both the Mermaid styles and the shared BaseLib frame styles:

// Program.cs
builder.Services.AddCanDoItAllMermaid();

@using CanDoItAll.Components.Mermaid

@* App.razor <head> *@
<MermaidHeadAssets />

<MermaidDiagram Title="Approval flow"
                Source="""
                    flowchart LR
                        Draft --> Review --> Approved
                    """
                NodeClicked="HandleNodeClicked" />

Use the Rendered and Error callbacks when a page needs to react to diagram lifecycle or explain syntax problems. The Sandbox /groups/mermaid route provides a live reference.

Project Type

  • SDK: Microsoft.NET.Sdk.Razor
  • Target framework(s): net10.0
  • Validation command:
dotnet build src/CanDoItAll.Components.Mermaid/CanDoItAll.Components.Mermaid.csproj

References

Project references:

  • ../CanDoItAll.Components.BaseLib/CanDoItAll.Components.BaseLib.csproj

Framework references:

  • None

Direct package references:

  • Microsoft.AspNetCore.Components.Web (10.0.10)

Architecture Notes

Use this component for product-rendered Mermaid diagrams. MermaidDiagram keeps its established header controls and delegates viewport interaction to BaseLib's ZoomPanFrame; changing Mermaid source or options resets that shared frame through a value-equality reset key. Keep syntax guidance and authoring assistance outside the renderer; this library stays focused on rendering, options, normalization, and typed UI events.

Security defaults

MermaidDiagramOptions defaults to Mermaid's strict security level and disables HTML labels. Only opt into SecurityLevel = "loose" or HtmlLabels = true for diagram source that your application fully trusts; those options allow Mermaid to emit richer HTML and interactive content into the rendered SVG surface.

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.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on CanDoItAll.Components.Mermaid:

Package Downloads
CanDoItAll.Ledger.Components

Reusable Blazor components and workspaces for ledger accounts, transactions, business objects, analytics, and node operations.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.1.18 23 7/31/2026
0.1.17 43 7/30/2026
0.1.15 112 7/24/2026