Skip to content

Commit 70eb2c3

Browse files
XUEWUQIUSHUANGArgoZhang
XUEWUQIUSHUANG
and
ArgoZhang
authored
doc(Mermaid): Add doc for Mermaid component (#4711)
* doc: 增加示例文件 * chore: 增加依赖包 * doc(Mermaid): Add doc for Mermaid component * doc: 更新测试用例 * refactor: 更新排版 --------- Co-authored-by: Argo-AsicoTech <[email protected]>
1 parent b2a6183 commit 70eb2c3

File tree

9 files changed

+271
-0
lines changed

9 files changed

+271
-0
lines changed

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
<PackageReference Include="BootstrapBlazor.MaterialDesign" Version="9.0.0" />
5050
<PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.0.0" />
5151
<PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.0.1-beta01" />
52+
<PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.1-beta01" />
5253
<PackageReference Include="BootstrapBlazor.Middleware" Version="9.0.0" />
5354
<PackageReference Include="BootstrapBlazor.MindMap" Version="9.0.0" />
5455
<PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.0" />

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@
120120
<ComponentCard Text="@Localizer["WebSpeechText"]" Image="WebSpeech.jpg" Url="web-speech"></ComponentCard>
121121
<ComponentCard Text="@Localizer["ImageCropperText"]" Image="ImageCropper.jpg" Url="image-cropper"></ComponentCard>
122122
<ComponentCard Text="@Localizer["BarcodeGeneratorText"]" Image="BarcodeGenerator.jpg" Url="barcode-generator"></ComponentCard>
123+
<ComponentCard Text="@Localizer["MermaidText"]" Image="Mermaid.png" Url="mermaid"></ComponentCard>
123124
</ComponentCategory>
124125

125126
<ComponentCategory Text="@Localizer["Text6"]">

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@page "/mermaid"
2+
@inject IStringLocalizer<Mermaids> Localizer
3+
4+
<h3>@Localizer["MermaidTitle"]</h3>
5+
6+
<h4>@Localizer["MermaidDescription"]</h4>
7+
8+
<PackageTips Name="BootstrapBlazor.Mermaid" />
9+
10+
<DemoBlock Title="@Localizer["MermaidNormalTitle"]"
11+
Introduction="@Localizer["MermaidNormalIntro"]"
12+
Name="GroupNormal">
13+
<div class="row form-inline g-2">
14+
<div class="col-12"><Select @bind-Value="Options" ShowLabel="true" DisplayText="@Localizer["MermaidType"]"></Select></div>
15+
</div>
16+
@foreach (var diagram in Diagrams)
17+
{
18+
<Mermaid Type="diagram.Key" Direction="MermaidDirection.TB" DiagramString="@diagram.Value"
19+
style="@(Options == diagram.Key ? "display:flex; justify-content:center;" : "display:none;")"
20+
Title="@($"Title {diagram.Key}")" />
21+
}
22+
</DemoBlock>
23+
24+
<DemoBlock Title="@Localizer["MermaidStyleTitle"]" Introduction="@Localizer["MermaidStyleIntro"]" Name="GroupStyle">
25+
<Mermaid DiagramString="@CustomStyleString"></Mermaid>
26+
</DemoBlock>
27+
28+
<AttributeTable Items="GetAttributes()" />
29+
30+
<MethodTable Items="GetMethods()"></MethodTable>

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

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
using System.ComponentModel;
7+
8+
namespace BootstrapBlazor.Server.Components.Samples;
9+
10+
/// <summary>
11+
/// MermaidViews
12+
/// </summary>
13+
public partial class Mermaids
14+
{
15+
private MermaidType Options { get; set; } = new();
16+
17+
private string CustomStyleString { get; } = """
18+
flowchart LR
19+
A[start] -->
20+
B{Whether the conditions are met?}
21+
B -- yes --> C[Perform tasks 1]
22+
B -- no --> D[Perform tasks 2]
23+
C --> E{Condition checks}
24+
D --> E
25+
E -- The conditions are established --> F[Sub-processes]
26+
F --> G[Complete the subprocess]
27+
E -- The condition failed --> H[Error handling]
28+
H --> I[Keep a log]
29+
G --> J[end]
30+
I --> J
31+
32+
style A fill:#ffe0b3,stroke:#ff9900,stroke-width:2px;
33+
style B fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
34+
style C fill:#e6ffcc,stroke:#009933,stroke-width:2px;
35+
style D fill:#cce6ff,stroke:#0033cc,stroke-width:2px;
36+
style E fill:#ffccff,stroke:#9900cc,stroke-width:2px;
37+
style F fill:#ccccff,stroke:#3300cc,stroke-width:2px;
38+
style G fill:#b3ffff,stroke:#00cccc,stroke-width:2px;
39+
style H fill:#ffd9b3,stroke:#ff6600,stroke-width:2px;
40+
style I fill:#d9d9d9,stroke:#808080,stroke-width:2px;
41+
style J fill:#ccffcc,stroke:#009900,stroke-width:2px;
42+
43+
linkStyle 0 stroke:#00cc00,stroke-width:2px;
44+
linkStyle 1 fill:#006600,stroke:#009933,stroke-width:2px,font-size:12px;
45+
linkStyle 2 fill:#990000,stroke:#ff3300,stroke-width:2px,font-size:12px;
46+
linkStyle 3 stroke:#ff33cc,stroke-width:2px;
47+
linkStyle 4 stroke:#cc33ff,stroke-width:2px;
48+
linkStyle 5 stroke:#33ccff,stroke-width:2px;
49+
linkStyle 6 stroke:#ff6600,stroke-width:2px,stroke-dasharray: 10,10;
50+
linkStyle 7 stroke:#999999,stroke-width:2px;
51+
linkStyle 8 stroke:#009900,stroke-width:2px;
52+
linkStyle 9 stroke:#ff6600,stroke-width:2px;
53+
""";
54+
55+
private Dictionary<MermaidType, string> Diagrams { get; } = new Dictionary<MermaidType, string>
56+
{
57+
{ MermaidType.None,
58+
"""
59+
flowchart LR
60+
61+
A[Hard] -->|Text| B(Round)
62+
B --> C{Decision}
63+
C -->|One| D[Result 1]
64+
C -->|Two| E[Result 2]
65+
"""
66+
},
67+
{ MermaidType.Flowchart,
68+
"""
69+
A[Start] --> B{Is it working?}
70+
B -- Yes --> C[Keep going]
71+
B -- No --> D[Fix it]
72+
D --> B
73+
"""
74+
},
75+
{ MermaidType.SequenceDiagram,
76+
"""
77+
participant Alice
78+
participant Bob
79+
Alice->>John: Hello John, how are you?
80+
loop HealthCheck
81+
John->>John: Fight against hypochondria
82+
end
83+
Note right of John: Rational thoughts <br/>prevail!
84+
John-->>Alice: Great!
85+
John->>Bob: How about you?
86+
Bob-->>John: Jolly good!
87+
"""
88+
},
89+
{ MermaidType.ClassDiagram,
90+
"""
91+
Class01 <|-- AveryLongClass : Cool
92+
Class03 *-- Class04
93+
Class05 o-- Class06
94+
Class07 .. Class08
95+
Class09 --> C2 : Where am i?
96+
Class09 --* C3
97+
Class09 --|> Class07
98+
Class07 : equals()
99+
Class07 : Object[] elementData
100+
Class01 : size()
101+
Class01 : int chimp
102+
Class01 : int gorilla
103+
Class08 <--> C2: Cool label
104+
"""
105+
},
106+
{ MermaidType.StateDiagram,
107+
"""
108+
[*] --> Still
109+
Still --> [*]
110+
111+
Still --> Moving
112+
Moving --> Still
113+
Moving --> Crash
114+
Crash --> [*]
115+
"""
116+
},
117+
{ MermaidType.ErDiagram,
118+
"""
119+
CUSTOMER ||--o{ ORDER : places
120+
ORDER ||--|{ LINE-ITEM : contains
121+
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
122+
"""
123+
},
124+
{ MermaidType.Journey,
125+
"""
126+
section Go to work
127+
Make tea: 5: Me
128+
Go upstairs: 3: Me
129+
Do work: 1: Me, Cat
130+
section Go home
131+
Go downstairs: 5: Me
132+
Sit down: 5: Me
133+
"""
134+
},
135+
{ MermaidType.Gantt,
136+
"""
137+
dateFormat YYYY-MM-DD
138+
excludes weekdays 2014-01-10
139+
140+
section A section
141+
Completed task :done, des1, 2014-01-06,2014-01-08
142+
Active task :active, des2, 2014-01-09, 3d
143+
Future task : des3, after des2, 5d
144+
Future task2 : des4, after des3, 5d
145+
"""
146+
},
147+
{ MermaidType.Pie,
148+
"""
149+
"Dogs" : 386
150+
"Cats" : 85
151+
"Rats" : 15
152+
"""
153+
}
154+
};
155+
156+
/// <summary>
157+
/// GetAttributes
158+
/// </summary>
159+
/// <returns></returns>
160+
private AttributeItem[] GetAttributes() =>
161+
[
162+
new()
163+
{
164+
Name = "DiagramString",
165+
Description = Localizer["DiagramString"],
166+
Type = "string",
167+
ValueList = " — ",
168+
DefaultValue = " — "
169+
},
170+
171+
new()
172+
{
173+
Name = "Title",
174+
Description = Localizer["Title"],
175+
Type = "string",
176+
ValueList = " — ",
177+
DefaultValue = " — "
178+
},
179+
new()
180+
{
181+
Name = "Direction",
182+
Description = Localizer["Direction"],
183+
Type = "MermaidDirection",
184+
ValueList = "TB / BT / LR / RL",
185+
DefaultValue = "TB"
186+
},
187+
new()
188+
{
189+
Name = "Type",
190+
Description = Localizer["Type"],
191+
Type = "MermaidType",
192+
ValueList = "None / Flowchart / SequenceDiagram / ClassDiagram / StateDiagram / ErDiagram / Journey / Gantt / Pie",
193+
DefaultValue = "None"
194+
}
195+
];
196+
197+
/// <summary>
198+
/// Methods
199+
/// </summary>
200+
/// <returns></returns>
201+
private MethodItem[] GetMethods() =>
202+
[
203+
new()
204+
{
205+
Name = "ExportBase64MermaidAsync",
206+
Description = Localizer["ExportBase64Mermaid"],
207+
Parameters = " — ",
208+
ReturnValue = "string"
209+
}
210+
];
211+
}

‎src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -657,6 +657,11 @@ void AddData(DemoMenuItem item)
657657
Url = "mind-map"
658658
},
659659
new()
660+
{
661+
Text = Localizer["Mermaid"],
662+
Url = "mermaid"
663+
},
664+
new()
660665
{
661666
Text = Localizer["PdfReader"],
662667
Url = "pdf-reader"

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1696,6 +1696,7 @@
16961696
"FileViewerText": "FileViewer",
16971697
"WebSerialText": "SerialService",
16981698
"MindMapText": "MindMap",
1699+
"MermaidText": "Mermaid",
16991700
"WebSpeechText": "WebSpeech",
17001701
"ImageCropperText": "ImageCropper",
17011702
"BarcodeGeneratorText": "BarcodeGenerator"
@@ -4768,6 +4769,7 @@
47684769
"QueryBuilder": "QueryBuilder",
47694770
"SerialService": "ISerialService",
47704771
"MindMap": "Mind Map",
4772+
"Mermaid": "Mermaid",
47714773
"Marquee": "Marquee",
47724774
"Stack": "Stack",
47734775
"Segmented": "Segmented",
@@ -6359,6 +6361,15 @@
63596361
"Layout": "Layout",
63606362
"Theme": "Theme"
63616363
},
6364+
"BootstrapBlazor.Server.Components.Samples.Mermaids": {
6365+
"MermaidTitle": "Mermaid",
6366+
"MermaidDescription": "This component renders Markdown-inspired text definitions to dynamically create and modify diagrams.",
6367+
"MermaidNormalTitle": "Basic usage",
6368+
"NormalIntro": "Mermaid basic style",
6369+
"MermaidStyleTitle": "Custom styles",
6370+
"MermaidStyleIntro": "",
6371+
"MermaidType": "Type"
6372+
},
63626373
"BootstrapBlazor.Server.Components.Samples.Speeches.WebSpeeches": {
63636374
"WebSpeechTitle": "Web Speech Api",
63646375
"WebSpeechSubTitle": "Provide speech recognition/synthesis services using browser interface functions",

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1696,6 +1696,7 @@
16961696
"FileViewerText": "文件预览器 FileViewer",
16971697
"WebSerialText": "串口服务 ISerialService",
16981698
"MindMapText": "思维导图 Mind Map",
1699+
"MermaidText": "图表工具 Mermaid",
16991700
"WebSpeechText": "语音识别/合成 WebSpeech",
17001701
"ImageCropperText": "图像裁剪 ImageCropper",
17011702
"BarcodeGeneratorText": "条码生成器 BarcodeGenerator"
@@ -4768,6 +4769,7 @@
47684769
"QueryBuilder": "条件生成器 QueryBuilder",
47694770
"WebSerial": "串口服务 ISerialService",
47704771
"MindMap": "思维导图 MindMap",
4772+
"Mermaid": "图表工具 Mermaid",
47714773
"Marquee": "文字滚动 Marquee",
47724774
"Stack": "堆叠布局 Stack",
47734775
"Segmented": "分段控制器 Segmented",
@@ -6359,6 +6361,15 @@
63596361
"Layout": "布局",
63606362
"Theme": "主题"
63616363
},
6364+
"BootstrapBlazor.Server.Components.Samples.Mermaids": {
6365+
"MermaidTitle": "Mermaid 构图工具",
6366+
"MermaidDescription": "本组件可渲染 Markdown 启发的文本定义以动态创建和修改图表。",
6367+
"MermaidNormalTitle": "基本用法",
6368+
"MermaidNormalIntro": "Mermaid 基本样式",
6369+
"MermaidStyleTitle": "增加自定义样式",
6370+
"MermaidStyleIntro": "",
6371+
"MermaidType": "图表类型"
6372+
},
63626373
"BootstrapBlazor.Server.Components.Samples.Speeches.WebSpeeches": {
63636374
"WebSpeechTitle": "Web Speech Api 网页原生语音处理 API",
63646375
"WebSpeechSubTitle": "使用浏览器接口功能提供语音识别/合成服务",

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
"menu": "Menus",
112112
"message": "Messages",
113113
"mind-map": "MindMaps",
114+
"mermaid": "Mermaids",
114115
"modal": "Modals",
115116
"mouse-follower": "MouseFollowers",
116117
"multi-select": "MultiSelects",

‎src/BootstrapBlazor.Server/wwwroot/images/Mermaid.png‎

49.3 KB
Loading

0 commit comments

Comments
 (0)