1

我已按照此处的指南进行Deploying Mermaid操作：

https://mermaid-js.github.io/mermaid/#/?id=deploying-mermaid

在 codepen 上使用它可以直接工作：

https://codepen.io/Ogglas/pen/MWjWNxR

mermaid.initialize({
  startOnLoad:true
});

<div class="mermaid">
    graph LR
        A[Client] --- B[Load Balancer]
        B-->C[Server01]
        B-->D(Server02)
</div>

为了在 Blazor 中启用它，我编辑了 BlazorApp.Client -> wwwroot -> index.html 并在下面添加了以下内容<script src="_framework/blazor.webassembly.js"></script>。

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Index.razor然后我使用以下值进行编辑：

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="mermaid">
    graph LR
        A[Client] --- B[Load Balancer]
        B-->C[Server01]
        B-->D(Server02)
</div>

但是，这不会呈现美人鱼图。我究竟做错了什么？

4

3 回答 3

1

现在通过单击按钮解决它：

索引剃刀：

@page "/"
@inject IJSRuntime JSRuntime

<h1>Hello, world!</h1>

Welcome to your new app.

<div>
    <button @onclick="TriggerClick">
        Trigger Mermaid diagram render
    </button>
</div>

<div>
    Graph:
    <div id="output"></div>
</div>

<SurveyPrompt Title="How is Blazor working for you?" />

@code {

    public async Task TriggerClick()
    {
        await JSRuntime.InvokeVoidAsync("renderMermaidDiagram");
    }
}

index.html，将其添加到该<head>部分：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
    window.renderMermaidDiagram = () => {
        var output = document.getElementById("output");
        var input = "graph LR \n" +
            "A[Client] --- B[Load Balancer] \n" +
            "B-->C[Server01] \n" +
            "B-->D(Server02) \n";
        mermaid.mermaidAPI.render('theGraph', input, function (svgCode) {
            output.innerHTML = svgCode;
        });
    }
</script>

看起来像这样：

在此处输入图像描述

请注意，美人鱼的一些教程使用过时的版本，并且不适用于最新版本。

资料来源：

https://mermaid-js.github.io/mermaid/#/Tutorials?id=mermaid-with-html

https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

于 2020-11-27T22:53:35.250 回答
1

对于服务器端，我也有一些渲染问题。（仍在调查为什么我可以解决这个问题）

服务器端的现状：

参考美人鱼的js文件，在你的页面中添加这部分html。

<div class="mermaid">
   graph LR
   A[Client] --- B[Load Balancer]
   B-->C[Server01]
   B-->D(Server02)
</div>

这在预渲染部分呈现正常，但在应用程序引导时的第二部分再次是纯文本。

您可以通过在页面的“@code”部分添加它来测试它

protected override async Task OnInitializedAsync()
{
   string t = "Set breakpoint on this line, this will be hit 2 times";
}

奇怪的是，如果您添加或不添加“初始化美人鱼的部分”，我会得到相同的行为结果。

mermaid.initialize({
        startOnLoad: true
    });

客户端

我发现这个客户端 nuget 解决方案运行顺畅

→ https://github.com/TrueCommerce/MermaidJS.Blazor

于 2021-08-08T10:51:08.077 回答
0

Mermaid（8.11.5 用于测试）+ Blazor 服务器端解决方案（尚未在客户端测试）：

我将 JS 互操作放在它自己的对象和文件中，例如blazor-helper.js：

var JsFunctions = window.JsFunctions || {};
JsFunctions = {
    MermaidInitialize: function() {
        mermaid.initialize({
            startOnLoad: true,
            securityLevel: "loose",
            // Other options.
          });
    },

    MermaidRender: function() {
        mermaid.init();
    }
};

显然，一个人可以在没有抽象的情况下逃脱mermaid.init()，但我认为它提供了清晰性。

然后在您的 blazor 代码中（启用可空值的 c#9 语法）：

    [Inject]
    protected IJSRuntime? JsRuntime { get; set; } = null;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(this.JsRuntime is not null)
        {
            if(firstRender)
            {
                await this.JsRuntime.InvokeVoidAsync("JsFunctions.MermaidInitialize");
            }

            await this.JsRuntime.InvokeVoidAsync("JsFunctions.MermaidRender");
        }
    }
于 2021-08-24T11:47:30.807 回答