Add Mermaid Markdown chart view

BlazorApp/BlazorApp.csproj

@@ -6,6 +6,7 @@
       <PackageReference Include="AntDesign" Version="0.19.7"/>
       <PackageReference Include="AntDesign.Charts" Version="0.5.5"/>
       <PackageReference Include="AntDesign.ProLayout" Version="0.19.7"/>
+      <PackageReference Include="Blazorade.Mermaid" Version="1.3.0"/>
       <PackageReference Include="BlazorMonaco" Version="3.2.0" />
       <PackageReference Include="CliWrap" Version="3.6.6" />
       <PackageReference Include="FluentScheduler" Version="5.5.1" />
@@ -26,7 +27,4 @@
         <ProjectReference Include="..\Entity\Entity.csproj" />
         <ProjectReference Include="..\Extension\Extension.csproj" />
     </ItemGroup>
-    <ItemGroup>
-        <Folder Include="wwwroot\js\"/>
-    </ItemGroup>
 </Project>

BlazorApp/Pages/Mermaid.razor

@@ -0,0 +1,14 @@
+@page "/Mermaid"
+<MermaidDiagram Definition=@diagramDef></MermaidDiagram>
+
+@code {
+    string diagramDef = def1;
+
+    const string def1 = @"
+flowchart LR
+A --> B
+B --> C
+C --> A
+";
+
+}

BlazorApp/Program.cs

@@ -124,8 +124,11 @@
 
 builder.Services.AddWorkflow();
 
-
 var app = builder.Build();
+
+
+app.UseMiddleware<ModifyResponseMiddleware>();
+
 // Configure the HTTP request pipeline.
 if (!app.Environment.IsDevelopment())
 {

BlazorApp/Service/MermaidLoader.cs

@@ -0,0 +1,77 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Http;
+
+namespace BlazorApp.Service;
+
+/// <summary>
+/// 将Mermaid.js的cdn互联网版本的JS文件修改为适用于Blazor的版本，并将其注入到HTML页面中。
+/// 以此提高在局域网中使用Mermaid.js的体验。
+/// </summary>
+/// <param name="next"></param>
+public class ModifyResponseMiddleware(RequestDelegate next)
+{
+    public async Task InvokeAsync(HttpContext context)
+    {
+        if (context.Request.Path.StartsWithSegments("/_content/Blazorade.Mermaid/js/blazoradeMermaid.js"))
+        {
+            var content = @"import mermaid from ""/js/lib/mermaid/mermaid.esm.min.mjs"";
+
+export function run(id, definition, configuration) {
+    console.debug(""run (id, definition, configuration)"", id, definition, configuration);
+    var elem = document.getElementById(id);
+    elem.removeAttribute(""data-processed"");
+
+    elem.innerHTML = definition;
+    renderOnly(""#"" + id, configuration);
+}
+
+var renderCount = 0;
+export async function renderOnly(selector, configuration) {
+    console.debug(""renderOnly(selector, configuration)"", selector, configuration);
+
+    if (renderCount == 0) {
+        renderCount = 1;
+        prerenderDiagram();
+    }
+
+    if (configuration) {
+        mermaid.initialize(configuration);
+    }
+
+    await mermaid.run({ querySelector: selector });
+    renderCount++;
+}
+
+/**
+ * This function is called if no diagrams have been rendered previously. It is used to render a very simple
+ * flow chart diagram with no themes. Once the diagram has been rendered, it is removed from the DOM.
+ * This is to work around a problem that occurs on initial rendering of diagrams that include inline 
+ * themes. That problem does not occur after the initial diagram has been rendered.
+ */
+function prerenderDiagram() {
+    var body = document.getElementsByTagName(""body"");
+    if (body.length > 0) {
+        var diagElement = document.createElement(""pre"");
+        var dt = new Date();
+        var id = ""blzrd-"" + dt.getFullYear() + dt.getMonth() + dt.getDate() + dt.getHours() + dt.getMinutes() + dt.getSeconds() + dt.getMilliseconds();
+        diagElement.setAttribute(""id"", id);
+        body.item(0).appendChild(diagElement);
+
+        run(id, ""flowchart TB\n    a-->b"");
+
+        body.item(0).removeChild(diagElement);
+    }
+}
+";
+
+            context.Response.ContentType = "text/javascript";
+            context.Response.StatusCode = 200;
+
+            await context.Response.WriteAsync(content);
+        }
+        else
+        {
+            await next(context);
+        }
+    }
+}

BlazorApp/_Imports.razor

@@ -20,3 +20,4 @@
 @using Blazor.Diagrams.Core.Geometry;
 @using Blazor.Diagrams.Components.Renderers;
 @using Blazor.Diagrams.Components.Widgets;
+@using Blazorade.Mermaid.Components

BlazorApp/wwwroot/js/lib/mermaid/array-2ff2c7a6.js

@@ -0,0 +1,7 @@
+function t(r) {
+    return typeof r == "object" && "length" in r ? r : Array.from(r);
+}
+
+export {
+    t as a
+};

BlazorApp/wwwroot/js/lib/mermaid/channel-ebbc4130.js

@@ -0,0 +1,6 @@
+import {aI as o, aJ as r} from "./mermaid-9f2aa176.js";
+
+const s = (a, n) => o.lang.round(r.parse(a)[n]), e = s;
+export {
+    e as c
+};

BlazorApp/wwwroot/js/lib/mermaid/clone-afc2f047.js

@@ -0,0 +1,11 @@
+import {c as r} from "./graph-0ee63739.js";
+
+var e = 4;
+
+function a(o) {
+    return r(o, e);
+}
+
+export {
+    a as c
+};