Визуализация диаграммы русалки с помощью приложения Blazor WebAssembly в .NET 5.0

Я следил за руководством для Deploying Mermaid здесь:

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

Использование его в коде работает напрямую:

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>

Однако это не отображает диаграмму русалки. Что я делаю неправильно?


c# blazor blazor-webassembly markup mermaid
person Ogglas    schedule 27.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решил это нажатием кнопки на данный момент:

Index.razor:

@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

person Ogglas    schedule 27.11.2020