Mermaid - Markdown-inspired diagrams/visualizations

This document is a reproduction of the file used to present Mermaid to the software team as a part of a lightning talk on 12/12/2022.

What is it?

- A JS-based diagramming tool that you can use with a Markdown-like syntax

- To play around with any of the below code snippets, try pasting them into the Mermaid Live Editor or a GitHub/GitLab text box (and clicking preview)

Why is it useful?

- Allows you to easily create dynamic diagrams and charts using an intuitive syntax very quickly

- Integrates directly with GitHub and GitLab by specifying `mermaid` as the language in a code block

The flowchart

flowchart TD
    id1(Start) --> id2(Stop)

- All possible flowchart orientations:

- TB - top to bottom

- TD - top-down / same as top to bottom

- BT - bottom to top

- RL - right to left

- LR - left to right

Different node shapes

Rectangle

flowchart LR
    id1[This is the text in the box]

Rounded edges

flowchart LR
    id1(This is the text in the box)

Oval

flowchart LR
    id1([This is the text in the box])

Subroutine

flowchart LR
    id1[[This is the text in the box]]

Database

flowchart LR
    id1[(This is the text in the box)]

Hexagon

flowchart LR
    id1{{This is the text in the box}}

Circle

flowchart LR
    id1((This is the text in the box))

Links between nodes

One-way arrow head

flowchart TD
    A(Node number one) --> B(Node number two)

Two-way arrow head

flowchart TD
    A(Node number one) <--> B(Node number two)

An open link

flowchart TD
    A(Node number one) --- B(Node number two)

Link with text

flowchart TD
    A(Node number one) -- Text goes here --> B(Node number two)

Chaining multiple links

flowchart TD
    A & B --> C & D

is equivalent to

 flowchart TD
    A --> C
    A --> D
    B --> C
    B --> D

Styling

- Additional styling is supported

flowchart LR
    id1(Start) --> id2(Stop)

    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

More chart types

- Sequence diagram

- Class diagram

- State diagram

- Entity relationship diagram

- Pie chart (see below)

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

A full example

flowchart LR
    A(Raw GIS data 1)-->B{{GeoSync 1}};
    B-->C[(GeoServer 1)];
    C-->D(Pyrecast Web App);

    E(Raw GIS data 2)-->F{{GeoSync 2}};
    F-->G[(GeoServer 2)];
    G-->D;

    H(Raw GIS data 3)-->I{{GeoSync 3}};
    I-->J[(GeoServer 3)];
    J-->D;

    K[(PostgreSQL DB)]<-->D;