0005-has-mermaid.md

2. Use mermaid for diagrams

Date: 2023-09-02

Status

Accepted

Context

We need to be able to diagram things.

Decision

We will use Mermaid.

journey
    title Using Mermaid in adr-viewer
    section Writing ADR
      Learn ADR: 5: Me
      Write ADR: 3: Me
      Render ADR: 6: Me

Loading

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]

Loading

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Loading

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()
    }

Loading

Consequences

We need to add a Mermaid script in the head tag of the template, potentially only when there is a Mermaid block in a Markdown document.

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

Loading