[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; """;
效果图
结语
组件支持导出Base64数据(ExportBase64MermaidAsync
),后续会实现双绑事件
更多Mermaid语法,参考:https://mermaid.nodejs.cn/intro/
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器