Frank.Blazor.Mermaid 0.2.4-preview

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
This is a prerelease version of Frank.Blazor.Mermaid. 
dotnet add package Frank.Blazor.Mermaid --version 0.2.4-preview                

                    
                

            
NuGet\Install-Package Frank.Blazor.Mermaid -Version 0.2.4-preview
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="Frank.Blazor.Mermaid" Version="0.2.4-preview" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Frank.Blazor.Mermaid --version 0.2.4-preview                

                    
                

            
#r "nuget: Frank.Blazor.Mermaid, 0.2.4-preview"
#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. 
// Install Frank.Blazor.Mermaid as a Cake Addin
#addin nuget:?package=Frank.Blazor.Mermaid&version=0.2.4-preview&prerelease

// Install Frank.Blazor.Mermaid as a Cake Tool
#tool nuget:?package=Frank.Blazor.Mermaid&version=0.2.4-preview&prerelease

Frank.Blazor.Mermaid

This is a Blazor component that renders Mermaid diagrams. It is wrapper around the Blazorade.Mermaid library, which is a Blazor wrapper around the MermaidJS library.

This just exists because I wanted to use Mermaid diagrams in my Blazor projects, and I wanted to make the mermaid diagrams in between tags, and not in a separate property and then bind that property to the component.

Installation

You can install the package via NuGet.

dotnet add package Frank.Blazor.Mermaid

Usage

Add the following using statement to your _Imports.razor:

@using Frank.Blazor.Mermaid

Add the following tag to your component:

<Mermaid>
    @_diagram
</Mermaid

@code {
    private string _diagram = "graph TD\nA[Christmas] -->|Get money| B(Go shopping)\nB --> C{Let me think}\nC -->|One| D[Laptop]\nC -->|Two| E[iPhone]\nC -->|Three| F[fa:fa-car Car]\n";
}

or if you want write the diagram directly in the tag:

<Mermaid>
    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
</Mermaid

License

This project is licensed under the MIT License - see the LICENSE file for details.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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.2.4-preview 110 4/28/2024
0.2.0 130 4/27/2024