Mermaid

Diagram types

Name Example
Graph
graph LR;
Sequence diagram
sequenceDiagram participant node1 participant node2 node1 ->> node2: process
Gantt diagram
gantt dateFormat YYYY-MM-DD title GANTT diagram section Section1 Completed task :done, des1, 2022-01-01,2022-01-30 Active task :active, des2, 2022-01-28, 3w Future task : des3, 2022-02-14, 15w Future task : after des2, 7w
Class diagram
classDiagram Animal --> Mammal Animal --> Insect Animal --> Fish Animal --> Amphibian Animal: eat() Animal: sleep() Animal: -int Legs Animal: +int Teeth

Graphs

flowchart LR; subgraph ol [One Line] A & B & C --> D & E end subgraph ll [Line By Line] a --> d a --> e b --> d b --> e c --> d c --> e end ll <--> ol
flowchart LR; subgraph ol [Reduced Lines] A & B & C --> F & G F --> H G --> I H & I --> D & E end subgraph ll [Line By Line] a --> f a --> g b --> f b --> g c --> f c --> g f --> h g --> i h --> d h --> e i --> d i --> e end ll <--> ol