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 --> [*]

Jackdaws love my big sphinx of quartz. Fat hag dwarves quickly zap jinx mob. Sex prof gives back no quiz with mild joy. Both fickle dwarves jinx my pig quiz. Just poets wax boldly as kings and queens march over fuzz.

Vexed nymphs go for quick waltz job. How quickly daft jumping zebras vex. Jackie will budget for the most expensive zoology equipment. Jack fox bids ivy-strewn phlegm quiz. Sympathizing would fix Quaker objectives. “Who am taking the ebonics quiz?”, the prof jovially axed. Sex-charged fop blew my junk TV quiz.

The quick brown fox jumped over the lazy dogs. Five hexing wizard bots jump quickly. Quirky spud boys can jam after zapping five worthy Polysixes. Bored? Craving a pub quiz fix? Why, just come to the Royal Oak! Grumpy wizards make toxic brew for the evil queen and jack. Jacky can now give six big tips from the old quiz.

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