[BootstrapBlazor] Blazor 使用 Mermaid 渲染详细图表

BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库,无缝整合了 Bootstrap 框架与 Blazor 技术。它提供了一整套强大的工具,使开发者能够轻松创建响应式和交互式的 Web 应用程序。

项目地址
Gitee:https://gitee.com/LongbowEnterprise/BootstrapBlazor
GitHub:https://github.com/dotnetcore/BootstrapBlazor
Nuget:https://www.nuget.org/packages/BootstrapBlazor

Blazor 使用 Mermaid 渲染详细图表

安装项目模板

dotnet new install Bootstrap.Blazor.Templates::*

新建项目,使用任意渲染模式模板,如果要在已有项目中使用Mermaid组件,则需要添加BootstrapBlazor包引用

安装可选包

Mermaid组件不包括在核心组件库BootstrapBlazor.Components中,需要使用Nuget安装BootstrapBlazor.Mermaid

dotnet add package BootstrapBlazor.Mermaid

编写UI代码

<Mermaid DiagramString="@CustomStyleString"></Mermaid>
private string CustomStyleString { get; } = """
flowchart LR
A[start] -->
B{Whether the conditions are met?}
B -- yes --> C[Perform tasks 1]
B -- no --> D[Perform tasks 2]
C --> E{Condition checks}
D --> E
E -- The conditions are established --> F[Sub-processes]
F --> G[Complete the subprocess]
E -- The condition failed --> H[Error handling]
H --> I[Keep a log]
G --> J[end]
I --> J
style A fill:#ffe0b3,stroke:#ff9900,stroke-width:2px;
style B fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
style C fill:#e6ffcc,stroke:#009933,stroke-width:2px;
style D fill:#cce6ff,stroke:#0033cc,stroke-width:2px;
style E fill:#ffccff,stroke:#9900cc,stroke-width:2px;
style F fill:#ccccff,stroke:#3300cc,stroke-width:2px;
style G fill:#b3ffff,stroke:#00cccc,stroke-width:2px;
style H fill:#ffd9b3,stroke:#ff6600,stroke-width:2px;
style I fill:#d9d9d9,stroke:#808080,stroke-width:2px;
style J fill:#ccffcc,stroke:#009900,stroke-width:2px;
linkStyle 0 stroke:#00cc00,stroke-width:2px;
linkStyle 1 fill:#006600,stroke:#009933,stroke-width:2px,font-size:12px;
linkStyle 2 fill:#990000,stroke:#ff3300,stroke-width:2px,font-size:12px;
linkStyle 3 stroke:#ff33cc,stroke-width:2px;
linkStyle 4 stroke:#cc33ff,stroke-width:2px;
linkStyle 5 stroke:#33ccff,stroke-width:2px;
linkStyle 6 stroke:#ff6600,stroke-width:2px,stroke-dasharray: 10,10;
linkStyle 7 stroke:#999999,stroke-width:2px;
linkStyle 8 stroke:#009900,stroke-width:2px;
linkStyle 9 stroke:#ff6600,stroke-width:2px;
""";

效果图

yes

no

The conditions are established

The condition failed

start

Whether the conditions are met?

Perform tasks 1

Perform tasks 2

Condition checks

Sub-processes

Complete the subprocess

Error handling

Keep a log

end


JohnBobAliceJohnBobAliceloop[HealthCheck]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!Title SequenceDiagram

结语

组件支持导出Base64数据(ExportBase64MermaidAsync),后续会实现双绑事件
更多Mermaid语法,参考:https://mermaid.nodejs.cn/intro/

posted @   MadLongTom  阅读(61)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示