Home

Blazorade Mermaid

The Blazorade Mermaid library allows you to easily add Mermaid diagrams to your Blazor application without having to manage JavaScript module importing or when to call various functions exposed in the Mermaid JS library.

Blazorade Mermaid currently supports Mermaid v10, by importing this Mermaid script.

Hope you find this wiki helpful when adding Blazorade Mermaid to your application. Remember also to read this article on my blog for more information about this library.

• https://mikaberglund.com/blazor-apps-with-mermaid-diagrams-using-blazorade-mermaid/

Getting Started

Blazorade Mermaid is very simple to use in your application. Simply follow the steps below, and you're good to go.

1. Add a reference to Blazorade Mermaid to your Blazor application or library.
2. Add the following using statement to your _Imports.razor file.
   • @using Blazorade.Mermaid.Components
3. Add the <MermaidDiagram> component to the page you want to show a diagram on, and set the Definition parameter to the definition for the diagram you want to show.

Further Reading

• Samples section - Contains sample code on how to use Blazorade Mermaid in your application
• Blog article - An article on by blog about Blazorade Mermaid.