Mermaid Diagramming and charting
Mermaid Diagramming and charting
Exploring Mermaid visualisation and math!
Mermaid
In the Basic Options in the markdown file within the _posts folder.
1
mermaid: true - # Enables Mermaid diagrams for creating flowcharts, like
1
2
3
4
```mermaid
graph TD;
A-->B;
B-->C;```
gives:
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!
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
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
More examples under:
This post is licensed under CC BY 4.0 by the author.