Source
The component uses
example
1
2
3
4
5
6
<Mermaid
chart="
graph TB
a-->b
"
/>Alternative via markdown syntax
```mermaid
graph TB
a-->b
```
example with wrapped=true
1
2
3
4
5
6
7
<Mermaid
chart="
graph TB
a-->b
"
wrapped
/>Flowchart
1
2
3
4
5
6
7
8
9
10
<Mermaid
chart="
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
"
/>Journey
1
2
3
4
5
6
7
8
9
10
11
12
13
<Mermaid
chart="
journey
title My working day
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: 3: Me
"
/>Complex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<Mermaid
chart="
graph TD
Bat(fa:fa-car-battery Batteries) -->|150a 50mm| ShutOff
Bat -->|150a 50mm| Shunt
ShutOff[Shut Off] -->|150a 50mm| BusPos[Bus Bar +]
Shunt -->|150a 50mm| BusNeg[Bus Bar -]
BusPos -->|40a| Fuse[Fuse Box]
BusPos -->|?a| Old{Old Wiring}
BusNeg -->|40a| Fuse
Fuse -->|10a| USB(USB-C)
Fuse -->|10a| USB
Fuse -->|1.5a| Switch -->|1.5a| Wifi
Wifi -->|1.5a| Fuse
Fuse -->|10a| Cig1[Cigarette Lighter]
Fuse -->|10a| Cig1
Fuse -->|10a| Cig2[Cigarette Lighter Near Bed]
Fuse -->|10a| Cig2
BusNeg -->|?a| Old
Solar --> SolarCont[Solar Controller]
Solar --> SolarCont
SolarCont --> BusNeg
SolarCont --> BusPos
linkStyle 0,1,2,4,5,8,9 stroke-width:2px,fill:none,stroke:red;
linkStyle 3,6,7 stroke-width:2px,fill:none,stroke:black;
linkStyle 10 stroke-width:2px,fill:none,stroke:red;
linkStyle 11 stroke-width:2px,fill:none,stroke:green;
linkStyle 12 stroke-width:2px,fill:none,stroke:red;
linkStyle 13 stroke-width:2px,fill:none,stroke:green;
linkStyle 14 stroke-width:2px,fill:none,stroke:red;
linkStyle 15 stroke-width:2px,fill:none,stroke:green;
linkStyle 16 stroke-width:2px,fill:none,stroke:green;
linkStyle 17 stroke-width:2px,fill:none,stroke:red;
linkStyle 18 stroke-width:2px,fill:none,stroke:green;
linkStyle 19 stroke-width:2px,fill:none,stroke:green;
"
/>