Mermaid

Consulta Mermaid per ampliar informació. Com per exemple, la configuració en detall.

Diagrama de fluxe

flowchart LR
    Start -->|more| Stop

Gràfic circular (Pie chart)

pie showData
    title Key elements in Product X
    "Calcium" : 30
    "Potassium" : 50
    "Magnesium" : 10
    "Iron" :  10

Diagrama de seqüència (Sequence diagram)

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Diagrama de classes (Class diagram)

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
  +String beakColor
    +swim()
    +quack()
}
class Fish{
  -int sizeInFeet
    -canEat()
}
class Zebra{
  +bool is_wild
    +run()
}

Gantt

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d