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

[NJ-Brad]

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.