用Blazor应用在.NET 5.0中呈现美人鱼图
我在这里遵循了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>但是，这不会呈现美人鱼关系图。我做错了什么？
回答 3
Stack Overflow用户
发布于 2020-11-27 22:53:35
现在只需按一下按钮就可以解决这个问题：
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");
}
}<head>，将其添加到index.html部分：
<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://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
Stack Overflow用户
发布于 2021-08-08 10:51:08
对于服务器端，我也有一些渲染问题。(还在调查原因，所以我可以解决这个问题)
服务器端的现状：
在页面中添加html的这一部分，并参考美人鱼的js文件。
<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
});Clienside
我找到了这个客户端nuget解决方案，效果很好
Stack Overflow用户
发布于 2021-08-24 11:47:30
美人鱼(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");
}
}https://stackoverflow.com/questions/65044209
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号