[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;
     """;

效果图

#bb_64469555-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#bb_64469555-svg .error-icon{fill:#552222;}#bb_64469555-svg .error-text{fill:#552222;stroke:#552222;}#bb_64469555-svg .edge-thickness-normal{stroke-width:1px;}#bb_64469555-svg .edge-thickness-thick{stroke-width:3.5px;}#bb_64469555-svg .edge-pattern-solid{stroke-dasharray:0;}#bb_64469555-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#bb_64469555-svg .edge-pattern-dashed{stroke-dasharray:3;}#bb_64469555-svg .edge-pattern-dotted{stroke-dasharray:2;}#bb_64469555-svg .marker{fill:#333333;stroke:#333333;}#bb_64469555-svg .marker.cross{stroke:#333333;}#bb_64469555-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#bb_64469555-svg p{margin:0;}#bb_64469555-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#bb_64469555-svg .cluster-label text{fill:#333;}#bb_64469555-svg .cluster-label span{color:#333;}#bb_64469555-svg .cluster-label span p{background-color:transparent;}#bb_64469555-svg .label text,#bb_64469555-svg span{fill:#333;color:#333;}#bb_64469555-svg .node rect,#bb_64469555-svg .node circle,#bb_64469555-svg .node ellipse,#bb_64469555-svg .node polygon,#bb_64469555-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#bb_64469555-svg .rough-node .label text,#bb_64469555-svg .node .label text,#bb_64469555-svg .image-shape .label,#bb_64469555-svg .icon-shape .label{text-anchor:middle;}#bb_64469555-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#bb_64469555-svg .rough-node .label,#bb_64469555-svg .node .label,#bb_64469555-svg .image-shape .label,#bb_64469555-svg .icon-shape .label{text-align:center;}#bb_64469555-svg .node.clickable{cursor:pointer;}#bb_64469555-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#bb_64469555-svg .arrowheadPath{fill:#333333;}#bb_64469555-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#bb_64469555-svg .flowchart-link{stroke:#333333;fill:none;}#bb_64469555-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#bb_64469555-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#bb_64469555-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#bb_64469555-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#bb_64469555-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#bb_64469555-svg .cluster text{fill:#333;}#bb_64469555-svg .cluster span{color:#333;}#bb_64469555-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#bb_64469555-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#bb_64469555-svg rect.text{fill:none;stroke-width:0;}#bb_64469555-svg .icon-shape,#bb_64469555-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#bb_64469555-svg .icon-shape p,#bb_64469555-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#bb_64469555-svg .icon-shape rect,#bb_64469555-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#bb_64469555-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

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

JohnBobAliceJohnBobAlice#bb_50804827-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#bb_50804827-svg .error-icon{fill:#552222;}#bb_50804827-svg .error-text{fill:#552222;stroke:#552222;}#bb_50804827-svg .edge-thickness-normal{stroke-width:1px;}#bb_50804827-svg .edge-thickness-thick{stroke-width:3.5px;}#bb_50804827-svg .edge-pattern-solid{stroke-dasharray:0;}#bb_50804827-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#bb_50804827-svg .edge-pattern-dashed{stroke-dasharray:3;}#bb_50804827-svg .edge-pattern-dotted{stroke-dasharray:2;}#bb_50804827-svg .marker{fill:#333333;stroke:#333333;}#bb_50804827-svg .marker.cross{stroke:#333333;}#bb_50804827-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#bb_50804827-svg p{margin:0;}#bb_50804827-svg .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#bb_50804827-svg text.actor>tspan{fill:black;stroke:none;}#bb_50804827-svg .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#bb_50804827-svg .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#bb_50804827-svg .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#bb_50804827-svg #arrowhead path{fill:#333;stroke:#333;}#bb_50804827-svg .sequenceNumber{fill:white;}#bb_50804827-svg #sequencenumber{fill:#333;}#bb_50804827-svg #crosshead path{fill:#333;stroke:#333;}#bb_50804827-svg .messageText{fill:#333;stroke:none;}#bb_50804827-svg .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#bb_50804827-svg .labelText,#bb_50804827-svg .labelText>tspan{fill:black;stroke:none;}#bb_50804827-svg .loopText,#bb_50804827-svg .loopText>tspan{fill:black;stroke:none;}#bb_50804827-svg .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#bb_50804827-svg .note{stroke:#aaaa33;fill:#fff5ad;}#bb_50804827-svg .noteText,#bb_50804827-svg .noteText>tspan{fill:black;stroke:none;}#bb_50804827-svg .activation0{fill:#f4f4f4;stroke:#666;}#bb_50804827-svg .activation1{fill:#f4f4f4;stroke:#666;}#bb_50804827-svg .activation2{fill:#f4f4f4;stroke:#666;}#bb_50804827-svg .actorPopupMenu{position:absolute;}#bb_50804827-svg .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#bb_50804827-svg .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#bb_50804827-svg .actor-man circle,#bb_50804827-svg line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#bb_50804827-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}loop[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/