Mermaid

 

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[&quot;`This **is**  _Markdown_`&quot;]
        newLines[&quot;`Line1
        Line 2
        Line 3`&quot;]
        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;
  "
 />