[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/