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