truecommerce/mermaidjs.blazor

A simple MermaidDiagram component for Blazor.

MermaidJS.Blazor

A simple MermaidDiagram component for Blazor.

For more information on MermaidJS including the diagram definition syntax, JavaScript API, or other supported features, please visit: https://mermaid-js.github.io/.

Getting Started

1. Install the MermaidJS.Blazor NuGet package.

> dotnet add package MermaidJS.Blazor

2. Add builder.Services.AddMermaidJS() to your Program.cs.

using Microsoft.Extensions.DependencyInjection;

// ... //

builder.Services.AddMermaidJS();

NOTE: You do not need to include mermaid.js or mermaid.min.js in your index.html. MermaidJS.Blazor will load the library on demand at runtime.

3. Use the MermaidDiagram component in your app.

@using MermaidJS.Blazor

<!-- ... -->

<MermaidDiagram Definition="@diagramDefinition" OnClick="OnClickNode" />

@code
{
    string diagramDefinition = "graph TB\nA-->B";

    void OnClickNode(string nodeId)
    {
        // TODO: do something with nodeId
    }
}

Handling Node Clicks

To raise node click events back to your blazor component, set your click callback to onClickMermaidNode:

graph TB
A--B
click A onClickMermaidNode

mermaidjs.blazor's Issues

Please delete

Hello,

Is there a way that we can get this to work for serverside version?

Including service at startup.cs should be the way to go.

Override Diagram Max Text Size

Size issues on large diagrams

I created a quick and dirty fix for setting the height to 100% (instead of the calculated height).
The issue was that large diagrams got a large height set to a specific number that made the rendering of the element to be pushed down a lot.

Did it on server side, but it could easily be moved to javascript if needed.

I reused my earlier hack :) with the SVG hook and simply applied a regex to replace the calculated height with 100%.

The questions are:

• Do you know of a better way to do this?
• If not, should it be imported somehow into the component or handled in a different way?

And since I suck at naming things, the attribute name is quite large. :)

<MermaidDiagram Definition="@diagramDefinition" 
                          SvgTransform="SvgTransform" 
                          OnClick="Click"
                          ForceHeightTo100Percent="true"/>

And the naive, hacky implementation.

[JSInvokable]
public async Task<string> OnSvgCreated(string svg)
{
    if (ForceHeightTo100Percent)
    {
        var regex = new Regex("<svg[^>]*?height=([\"\'])?((?:.(?!\\1|>))*.?)\\1?");
        var match = regex.Match(svg);
        var g = match.Groups[2];
        svg = svg.Substring(0, g.Index) + "100%" + svg.Substring(g.Index + g.Length);
    }

    if (SvgTransform != null)
    {
       
        
        svg = SvgTransform(svg);
    }

    return svg;
}

SVG transform

I played around with adding a SVG transform attribute thingy

<MermaidDiagram Definition="@diagramDefinition" OnClick="OnClickNode" SvgTransform="SvgTransform" />

so that one can intercept the SVG and make modifications to it. Fairly simple.

private string SvgTransform(string svg)
{
    return svg.Replace(">A<", "><font color='red'>A</font><");
}

And in the interop file

  window.mermaid.mermaidAPI.render(`${componentId}-svg`, definition, async (svg, bind) => { // Made this async
                svg = await componentRef.invokeMethodAsync("OnSvgCreated", svg); // Added this
                

And the component

[JSInvokable]
public async Task<string> OnSvgCreated(string svg)
{
    if (SvgTransform != null)
    {
        svg = SvgTransform(svg);
    }

    return svg;
}

Are you interested in stuff like this? If you are I can clean it up and make a PR for it.
I also created a demo for Blazor Server.

I use Mermaid in a React project that I would like to port to Blazor for fun and I need to do some modifications on the SVG.

Can you upgrade the version when you have time?

Static assets missing in repo?

Hi!

I'm a Blazor newbie so forgive me if I'm missing something obvious.
I forked the repo and checked out the demo. I had to copy the /lib/ folder from the nuget package to get it to work in order to get a hold of the mermaid.min.js file.

Doing so made it work, but I got two diagrams rendered.

Am I missing something here?

Clickable nodes

Hi!

Another question regarding making nodes clickable. I hade to tweak MermaidDiagramInterop.js to adjust the security level to make the click callback to work.

Is there another way that I'm missing? :)

function initializeGlobals() {
    window.mermaidDiagramBlazorOptions.securityLevel = "loose"; // <-- Had to add this
    console.log("initializeGlobals", window.mermaidDiagramBlazorOptions);
    function loadMermaid() {
        return new Promise((resolve) => { ...

Possible compatibility issue (.Net 6, Mermaid.JS 9.2.2, MermaidJS.Blazor, Visual Studio 2022)

I'm not sure where the issue is and I can certainly understand if this gets closed.

I was trying to leverage the newly added C4 diagrams in Mermaid.JS. This is still experimental, but works on mermaid.live and when I create an HTML page hosting the diagram.
I downloaded the source code for MermaidJS.Blazor, switched to .Net 6 from .Net 5 as the target and updated the mermaid library version in libman.json "library": "[email protected]",
then I refreshed the client-side code for mermaid and built the project
I switched my Blazor project to use the local copy of the component, instead of the NuGet package
When I tested my modified library for most Mermaid diagrams, everything worked great. When I tested using one of the new C4 diagrams, I get an error "Bind is not a function"

I also get a second copy of the image that gets added to the bottom of the page.

I reproduced the issue in a simple WASM PWA project, using the default Index.razor page from the demo that is included in the source code.

I see lots of places where this could be having an issue. Mermaid.JS having an issue that isn't visible in other environments. MermaidJS.Blazor not being quite compatible with the latest Mermaid.JS. Version differences between .Net 5 and .Net 6 that are causing the issue. User error on my part when building.