Mermaid

Mermaid is a popular Javascript library creating SVG diagrams from text and code descriptions.

The Mermaid site offers Tutorials and good documentation.

Syntax

‍```mermaid
%%{init: { 
    "theme": "forest",
    "fontFamily": "ibm plex sans" 
}}%%
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
‍```

The diagram descriptions are formatted as code blocks with the language identifier mermaid. The example shows the code for the state diagram below.

Mermaid diagrams can change their color theme and also some attributes can be configured in a JSON preamble enclosed by %%.

Not all themes or configurable attributes are available with every type of diagram for now. We have to test our diagrams before we publish them. One good way is the official Mermaid live editor.

Layout

The following diagrams are only a few examples to give an impression of the layout. More diagram types exist and their number is growing.

State diagram

%%{init:
  { 
    "theme": "forest",
    "fontFamily": "ibm plex sans" 
  }
}%%
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Quick wafting zephyrs vex bold Jim. Quilt frenzy jackdaw gave them best pox. How quickly daft jumping zebras vex. Public junk dwarves hug my quartz fox. My faxed joke won a pager in the cable TV quiz show.

Crazy Frederick bought many very exquisite opal jewels. Five jumping wizards hex bolty quick. Woven silk pyjamas exchanged for blue quartz. Sixty zips were quickly picked from the woven jute bag. Jackdaws love my big sphinx of quartz. Vexed nymphs go for quick waltz job. Five hexing wizard bots jump quickly.

My faxed joke won a pager in the cable TV quiz show. Waltz job vexed quick frog nymphs. The quick brown fox jumps over the lazy dog. The jay, pig, fox, zebra and my wolves quack! Joaquin Phoenix was gazed by MTV for luck. Jack, love my big wad of sphinx quartz!

Flow chart

%%{init:
  { 
    "theme": "base",
    "fontFamily": "ibm plex sans" 
  }
}%%
flowchart LR
    A(Start) -->|Show edges| B[Hard Edge]
    B -->|Link text| C(Round edge)
    C -->|Show decision| D{Decision}
    D -->|One| E[Result one]
    D -->|Two| F[Result two]

Entity relation

%%{init:
  { 
    "theme": "base",
    "fontFamily": "ibm plex sans" 
  }
}%%
erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

See Also