doc(Mermaid): Add doc for Mermaid component

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -49,6 +49,7 @@
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.0.1-beta01" />
+    <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.1-beta01" />
     <PackageReference Include="BootstrapBlazor.Middleware" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.0" />

src/BootstrapBlazor.Server/Components/Pages/Coms.razor

@@ -120,6 +120,7 @@
             <ComponentCard Text="@Localizer["WebSpeechText"]" Image="WebSpeech.jpg" Url="web-speech"></ComponentCard>
             <ComponentCard Text="@Localizer["ImageCropperText"]" Image="ImageCropper.jpg" Url="image-cropper"></ComponentCard>
             <ComponentCard Text="@Localizer["BarcodeGeneratorText"]" Image="BarcodeGenerator.jpg" Url="barcode-generator"></ComponentCard>
+            <ComponentCard Text="@Localizer["MermaidText"]" Image="Mermaid.png" Url="mermaid"></ComponentCard>
         </ComponentCategory>
 
         <ComponentCategory Text="@Localizer["Text6"]">

src/BootstrapBlazor.Server/Components/Samples/Mermaids.razor

@@ -0,0 +1,30 @@
+@page "/mermaid"
+@inject IStringLocalizer<Mermaids> Localizer
+
+<h3>@Localizer["MermaidTitle"]</h3>
+
+<h4>@Localizer["MermaidDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.Mermaid" />
+
+<DemoBlock Title="@Localizer["MermaidNormalTitle"]"
+           Introduction="@Localizer["MermaidNormalIntro"]"
+		   Name="GroupNormal">
+    <div class="row form-inline g-2">
+        <div class="col-12"><Select @bind-Value="Options" ShowLabel="true" DisplayText="@Localizer["MermaidType"]"></Select></div>
+    </div>
+    @foreach (var diagram in Diagrams)
+	{
+		<Mermaid Type="diagram.Key" Direction="MermaidDirection.TB" DiagramString="@diagram.Value"
+				 style="@(Options == diagram.Key ? "display:flex; justify-content:center;" : "display:none;")"
+				 Title="@($"Title {diagram.Key}")" />
+	}
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["MermaidStyleTitle"]" Introduction="@Localizer["MermaidStyleIntro"]" Name="GroupStyle">
+	<Mermaid DiagramString="@CustomStyleString"></Mermaid>
+</DemoBlock>
+
+<AttributeTable Items="GetAttributes()" />
+
+<MethodTable Items="GetMethods()"></MethodTable>

src/BootstrapBlazor.Server/Components/Samples/Mermaids.razor.cs

@@ -0,0 +1,211 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// MermaidViews
+/// </summary>
+public partial class Mermaids
+{
+    private MermaidType Options { get; set; } = new();
+
+    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;
+     """;
+
+    private Dictionary<MermaidType, string> Diagrams { get; } = new Dictionary<MermaidType, string>
+    {
+        { MermaidType.None,
+            """
+            flowchart LR
+
+            A[Hard] -->|Text| B(Round)
+            B --> C{Decision}
+            C -->|One| D[Result 1]
+            C -->|Two| E[Result 2]
+            """
+        },
+        { MermaidType.Flowchart,
+            """
+            A[Start] --> B{Is it working?}
+            B -- Yes --> C[Keep going]
+            B -- No --> D[Fix it]
+            D --> B
+            """
+        },
+        { MermaidType.SequenceDiagram,
+            """
+            participant Alice
+            participant Bob
+            Alice->>John: Hello John, how are you?
+            loop HealthCheck
+            John->>John: Fight against hypochondria
+            end
+            Note right of John: Rational thoughts <br/>prevail!
+            John-->>Alice: Great!
+            John->>Bob: How about you?
+            Bob-->>John: Jolly good!
+            """
+        },
+        { MermaidType.ClassDiagram,
+            """
+            Class01 <|-- AveryLongClass : Cool
+            Class03 *-- Class04
+            Class05 o-- Class06
+            Class07 .. Class08
+            Class09 --> C2 : Where am i?
+            Class09 --* C3
+            Class09 --|> Class07
+            Class07 : equals()
+            Class07 : Object[] elementData
+            Class01 : size()
+            Class01 : int chimp
+            Class01 : int gorilla
+            Class08 <--> C2: Cool label
+            """
+        },
+        { MermaidType.StateDiagram,
+            """
+            [*] --> Still
+            Still --> [*]
+
+            Still --> Moving
+            Moving --> Still
+            Moving --> Crash
+            Crash --> [*]
+            """
+        },
+        { MermaidType.ErDiagram,
+            """
+            CUSTOMER ||--o{ ORDER : places
+            ORDER ||--|{ LINE-ITEM : contains
+            CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+            """
+        },
+        { MermaidType.Journey,
+            """
+            section Go to work
+            Make tea: 5: Me
+            Go upstairs: 3: Me
+            Do work: 1: Me, Cat
+            section Go home
+            Go downstairs: 5: Me
+            Sit down: 5: Me
+            """
+        },
+        { MermaidType.Gantt,
+            """
+            dateFormat  YYYY-MM-DD
+            excludes weekdays 2014-01-10
+
+            section A section
+            Completed task            :done,    des1, 2014-01-06,2014-01-08
+            Active task               :active,  des2, 2014-01-09, 3d
+            Future task               :         des3, after des2, 5d
+            Future task2               :         des4, after des3, 5d
+            """
+        },
+        { MermaidType.Pie,
+            """
+            "Dogs" : 386
+            "Cats" : 85
+            "Rats" : 15
+            """
+        }
+    };
+
+    /// <summary>
+    /// GetAttributes
+    /// </summary>
+    /// <returns></returns>
+    private AttributeItem[] GetAttributes() =>
+    [
+        new()
+        {
+            Name = "DiagramString",
+            Description = Localizer["DiagramString"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+
+        new()
+        {
+            Name = "Title",
+            Description = Localizer["Title"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "Direction",
+            Description = Localizer["Direction"],
+            Type = "MermaidDirection",
+            ValueList = "TB / BT / LR / RL",
+            DefaultValue = "TB"
+        },
+        new()
+        {
+            Name = "Type",
+            Description = Localizer["Type"],
+            Type = "MermaidType",
+            ValueList = "None / Flowchart / SequenceDiagram / ClassDiagram / StateDiagram / ErDiagram / Journey / Gantt / Pie",
+            DefaultValue = "None"
+        }
+    ];
+
+    /// <summary>
+    /// Methods
+    /// </summary>
+    /// <returns></returns>
+    private MethodItem[] GetMethods() =>
+    [
+        new()
+        {
+            Name = "ExportBase64MermaidAsync",
+            Description = Localizer["ExportBase64Mermaid"],
+            Parameters = " — ",
+            ReturnValue = "string"
+        }
+    ];
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -657,6 +657,11 @@ void AddData(DemoMenuItem item)
                     Url = "mind-map"
                 },
                 new()
+                {
+                    Text = Localizer["Mermaid"],
+                    Url = "mermaid"
+                },
+                new()
                 {
                     Text = Localizer["PdfReader"],
                     Url = "pdf-reader"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -1696,6 +1696,7 @@
     "FileViewerText": "FileViewer",
     "WebSerialText": "SerialService",
     "MindMapText": "MindMap",
+    "MermaidText": "Mermaid",
     "WebSpeechText": "WebSpeech",
     "ImageCropperText": "ImageCropper",
     "BarcodeGeneratorText": "BarcodeGenerator"
@@ -4768,6 +4769,7 @@
     "QueryBuilder": "QueryBuilder",
     "SerialService": "ISerialService",
     "MindMap": "Mind Map",
+    "Mermaid": "Mermaid",
     "Marquee": "Marquee",
     "Stack": "Stack",
     "Segmented": "Segmented",
@@ -6359,6 +6361,15 @@
     "Layout": "Layout",
     "Theme": "Theme"
   },
+  "BootstrapBlazor.Server.Components.Samples.Mermaids": {
+    "MermaidTitle": "Mermaid",
+    "MermaidDescription": "This component renders Markdown-inspired text definitions to dynamically create and modify diagrams.",
+    "MermaidNormalTitle": "Basic usage",
+    "NormalIntro": "Mermaid basic style",
+    "MermaidStyleTitle": "Custom styles",
+    "MermaidStyleIntro": "",
+    "MermaidType": "Type"
+  },
   "BootstrapBlazor.Server.Components.Samples.Speeches.WebSpeeches": {
     "WebSpeechTitle": "Web Speech Api",
     "WebSpeechSubTitle": "Provide speech recognition/synthesis services using browser interface functions",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1696,6 +1696,7 @@
     "FileViewerText": "文件预览器 FileViewer",
     "WebSerialText": "串口服务 ISerialService",
     "MindMapText": "思维导图 Mind Map",
+    "MermaidText": "图表工具 Mermaid",
     "WebSpeechText": "语音识别/合成 WebSpeech",
     "ImageCropperText": "图像裁剪 ImageCropper",
     "BarcodeGeneratorText": "条码生成器 BarcodeGenerator"
@@ -4768,6 +4769,7 @@
     "QueryBuilder": "条件生成器 QueryBuilder",
     "WebSerial": "串口服务 ISerialService",
     "MindMap": "思维导图 MindMap",
+    "Mermaid": "图表工具 Mermaid",
     "Marquee": "文字滚动 Marquee",
     "Stack": "堆叠布局 Stack",
     "Segmented": "分段控制器 Segmented",
@@ -6359,6 +6361,15 @@
     "Layout": "布局",
     "Theme": "主题"
   },
+  "BootstrapBlazor.Server.Components.Samples.Mermaids": {
+    "MermaidTitle": "Mermaid 构图工具",
+    "MermaidDescription": "本组件可渲染 Markdown 启发的文本定义以动态创建和修改图表。",
+    "MermaidNormalTitle": "基本用法",
+    "MermaidNormalIntro": "Mermaid 基本样式",
+    "MermaidStyleTitle": "增加自定义样式",
+    "MermaidStyleIntro": "",
+    "MermaidType": "图表类型"
+  },
   "BootstrapBlazor.Server.Components.Samples.Speeches.WebSpeeches": {
     "WebSpeechTitle": "Web Speech Api 网页原生语音处理 API",
     "WebSpeechSubTitle": "使用浏览器接口功能提供语音识别/合成服务",

src/BootstrapBlazor.Server/docs.json

@@ -111,6 +111,7 @@
     "menu": "Menus",
     "message": "Messages",
     "mind-map": "MindMaps",
+    "mermaid": "Mermaids",
     "modal": "Modals",
     "mouse-follower": "MouseFollowers",
     "multi-select": "MultiSelects",