Skip to content

Commit 846e4fb

Browse files
XUEWUQIUSHUANGXUEWUQIUSHUANG
committed
doc(Mermaid): Add doc for Mermaid component
1 parent 35782e5 commit 846e4fb

File tree

8 files changed

+252
-5
lines changed

8 files changed

+252
-5
lines changed

‎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: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,68 @@
11
@page "/mermaid"
2-
@inject IStringLocalizer<Mermaid> Localizer
2+
@inject IStringLocalizer<Mermaids> Localizer
33

44
<h3>@Localizer["MermaidTitle"]</h3>
55

66
<h4>@Localizer["MermaidDescription"]</h4>
77

8+
<PackageTips Name="BootstrapBlazor.Mermaid" />
9+
810
<DemoBlock Title="@Localizer["MermaidNormalTitle"]"
9-
Introduction="@Localizer["MermaidNormalIntro"]"
10-
Name="Normal">
11-
<Mermaid Type="MermaidType.Flowchart" Direction="MermaidDirection.BT" DiagramString="@Content"></Mermaid>
11+
Introduction="@Localizer["NormalIntro"]"
12+
Name="GroupNormal">
13+
@foreach (var diagram in data)
14+
{
15+
<Mermaid Type="diagram.Key" Direction="MermaidDirection.TB" DiagramString="@diagram.Value"
16+
style="@(_options == diagram.Key ? "display:flex; justify-content:center;" : "display:none;")"
17+
Title="@($"Title {diagram.Key}")" />
18+
}
19+
<div class="col-12 col-sm-3 mt-3">
20+
<Select @bind-Value="_options" ShowLabel="true" />
21+
</div>
1222
</DemoBlock>
23+
24+
<DemoBlock Title="@Localizer["MermaidStyleTitle"]"
25+
Introduction="@Localizer["StyleTitle"]"
26+
Name="GroupStyle">
27+
<Mermaid DiagramString="
28+
flowchart LR
29+
A[start] -->
30+
B{Whether the conditions are met?}
31+
B -- yes --> C[Perform tasks 1]
32+
B -- no --> D[Perform tasks 2]
33+
C --> E{Condition checks}
34+
D --> E
35+
E -- The conditions are established --> F[Sub-processes]
36+
F --> G[Complete the subprocess]
37+
E -- The condition failed --> H[Error handling]
38+
H --> I[Keep a log]
39+
G --> J[end]
40+
I --> J
41+
42+
style A fill:#ffe0b3,stroke:#ff9900,stroke-width:2px;
43+
style B fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
44+
style C fill:#e6ffcc,stroke:#009933,stroke-width:2px;
45+
style D fill:#cce6ff,stroke:#0033cc,stroke-width:2px;
46+
style E fill:#ffccff,stroke:#9900cc,stroke-width:2px;
47+
style F fill:#ccccff,stroke:#3300cc,stroke-width:2px;
48+
style G fill:#b3ffff,stroke:#00cccc,stroke-width:2px;
49+
style H fill:#ffd9b3,stroke:#ff6600,stroke-width:2px;
50+
style I fill:#d9d9d9,stroke:#808080,stroke-width:2px;
51+
style J fill:#ccffcc,stroke:#009900,stroke-width:2px;
52+
53+
linkStyle 0 stroke:#00cc00,stroke-width:2px;
54+
linkStyle 1 fill:#006600,stroke:#009933,stroke-width:2px,font-size:12px;
55+
linkStyle 2 fill:#990000,stroke:#ff3300,stroke-width:2px,font-size:12px;
56+
linkStyle 3 stroke:#ff33cc,stroke-width:2px;
57+
linkStyle 4 stroke:#cc33ff,stroke-width:2px;
58+
linkStyle 5 stroke:#33ccff,stroke-width:2px;
59+
linkStyle 6 stroke:#ff6600,stroke-width:2px,stroke-dasharray: 10,10;
60+
linkStyle 7 stroke:#999999,stroke-width:2px;
61+
linkStyle 8 stroke:#009900,stroke-width:2px;
62+
linkStyle 9 stroke:#ff6600,stroke-width:2px;
63+
"/>
64+
</DemoBlock>
65+
66+
<AttributeTable Items="GetAttributes()" />
67+
68+
<MethodTable Items="GetMethods()"></MethodTable>

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

Lines changed: 165 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,173 @@
33
// See the LICENSE file in the project root for more information.
44
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
55

6+
using System.ComponentModel;
7+
68
namespace BootstrapBlazor.Server.Components.Samples;
79

10+
/// <summary>
11+
/// MermaidViews
12+
/// </summary>
813
public partial class Mermaids
914
{
10-
private string Content => "A-->B;\nA-->C;\nB-->D;\nC-->D;";
15+
[DisplayName("类型选择")]
16+
private MermaidType _options { set; get; } = new();
17+
private Dictionary<MermaidType, string> data { get; set; } = new Dictionary<MermaidType, string>
18+
{
19+
{ MermaidType.None,
20+
"""
21+
flowchart LR
22+
23+
A[Hard] -->|Text| B(Round)
24+
B --> C{Decision}
25+
C -->|One| D[Result 1]
26+
C -->|Two| E[Result 2]
27+
"""
28+
},
29+
{ MermaidType.Flowchart,
30+
"""
31+
A[Start] --> B{Is it working?}
32+
B -- Yes --> C[Keep going]
33+
B -- No --> D[Fix it]
34+
D --> B
35+
"""
36+
},
37+
{ MermaidType.SequenceDiagram,
38+
"""
39+
participant Alice
40+
participant Bob
41+
Alice->>John: Hello John, how are you?
42+
loop HealthCheck
43+
John->>John: Fight against hypochondria
44+
end
45+
Note right of John: Rational thoughts <br/>prevail!
46+
John-->>Alice: Great!
47+
John->>Bob: How about you?
48+
Bob-->>John: Jolly good!
49+
"""
50+
},
51+
{ MermaidType.ClassDiagram,
52+
"""
53+
Class01 <|-- AveryLongClass : Cool
54+
Class03 *-- Class04
55+
Class05 o-- Class06
56+
Class07 .. Class08
57+
Class09 --> C2 : Where am i?
58+
Class09 --* C3
59+
Class09 --|> Class07
60+
Class07 : equals()
61+
Class07 : Object[] elementData
62+
Class01 : size()
63+
Class01 : int chimp
64+
Class01 : int gorilla
65+
Class08 <--> C2: Cool label
66+
"""
67+
},
68+
{ MermaidType.StateDiagram,
69+
"""
70+
[*] --> Still
71+
Still --> [*]
72+
73+
Still --> Moving
74+
Moving --> Still
75+
Moving --> Crash
76+
Crash --> [*]
77+
"""
78+
},
79+
{ MermaidType.ErDiagram,
80+
"""
81+
CUSTOMER ||--o{ ORDER : places
82+
ORDER ||--|{ LINE-ITEM : contains
83+
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
84+
"""
85+
},
86+
{ MermaidType.Journey,
87+
"""
88+
section Go to work
89+
Make tea: 5: Me
90+
Go upstairs: 3: Me
91+
Do work: 1: Me, Cat
92+
section Go home
93+
Go downstairs: 5: Me
94+
Sit down: 5: Me
95+
"""
96+
},
97+
{ MermaidType.Gantt,
98+
"""
99+
dateFormat YYYY-MM-DD
100+
excludes weekdays 2014-01-10
101+
102+
section A section
103+
Completed task :done, des1, 2014-01-06,2014-01-08
104+
Active task :active, des2, 2014-01-09, 3d
105+
Future task : des3, after des2, 5d
106+
Future task2 : des4, after des3, 5d
107+
"""
108+
},
109+
{ MermaidType.Pie,
110+
"""
111+
"Dogs" : 386
112+
"Cats" : 85
113+
"Rats" : 15
114+
"""
115+
}
116+
};
117+
118+
/// <summary>
119+
/// GetAttributes
120+
/// </summary>
121+
/// <returns></returns>
122+
private AttributeItem[] GetAttributes() =>
123+
[
124+
new()
125+
{
126+
Name = "DiagramString",
127+
Description = Localizer["DiagramString"],
128+
Type = "string",
129+
ValueList = " — ",
130+
DefaultValue = " — "
131+
},
132+
133+
new()
134+
{
135+
Name = "Title",
136+
Description = Localizer["Title"],
137+
Type = "string",
138+
ValueList = " — ",
139+
DefaultValue = " — "
140+
},
141+
new()
142+
{
143+
Name = "Direction",
144+
Description = Localizer["Direction"],
145+
Type = "MermaidDirection",
146+
ValueList = "TB / BT / LR / RL",
147+
DefaultValue = "TB"
148+
},
149+
new()
150+
{
151+
Name = "Type",
152+
Description = Localizer["Type"],
153+
Type = "MermaidType",
154+
ValueList = "None / Flowchart / SequenceDiagram / ClassDiagram / StateDiagram / ErDiagram / Journey / Gantt / Pie",
155+
DefaultValue = "None"
156+
}
157+
];
158+
159+
/// <summary>
160+
/// Methods
161+
/// </summary>
162+
/// <returns></returns>
163+
private MethodItem[] GetMethods() =>
164+
[
165+
new()
166+
{
167+
Name = "ExportBase64MermaidAsync",
168+
Description = Localizer["ExportBase64Mermaid"],
169+
Parameters = " — ",
170+
ReturnValue = "string"
171+
},
172+
173+
];
174+
11175
}

‎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: 10 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,14 @@
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": "Add custom styles",
6370+
"StyleTitle": ""
6371+
},
63626372
"BootstrapBlazor.Server.Components.Samples.Speeches.WebSpeeches": {
63636373
"WebSpeechTitle": "Web Speech Api",
63646374
"WebSpeechSubTitle": "Provide speech recognition/synthesis services using browser interface functions",

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

Lines changed: 10 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,14 @@
63596361
"Layout": "布局",
63606362
"Theme": "主题"
63616363
},
6364+
"BootstrapBlazor.Server.Components.Samples.Mermaids": {
6365+
"MermaidTitle": "Mermaid 构图工具",
6366+
"MermaidDescription": "本组件可渲染 Markdown 启发的文本定义以动态创建和修改图表。",
6367+
"MermaidNormalTitle": "基本用法",
6368+
"NormalIntro": "Mermaid基本样式",
6369+
"MermaidStyleTitle": "增加自定义样式",
6370+
"StyleTitle": ""
6371+
},
63626372
"BootstrapBlazor.Server.Components.Samples.Speeches.WebSpeeches": {
63636373
"WebSpeechTitle": "Web Speech Api 网页原生语音处理 API",
63646374
"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)