Mermaid Graph Diagrams

The compilations in this section demonstrate how the Markdown Viewer widget can be used to display Mermaid diagrams.

Example Description
Diagram
Simple graph

Define:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Base64 encode and assign to the content property:

{
    "content": "YGBgbWVybWFpZApncmFwaCBURDsKICAgIEEtLT5COwogICAgQS0tPkM7CiAgICBCLS0+RDsKICAgIEMtLT5EOwpgYGA="
}
Diagram
Another Simple Graph Chart

Define:

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

Base64 encode and assign to the content property:

{
    "content" : "YGBgbWVybWFpZApncmFwaCBURAogICAgQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpCiAgICBCIC0tPiBDe0xldCBtZSB0aGlua30KICAgIEMgLS0+fE9uZXwgRFtMYXB0b3BdCiAgICBDIC0tPnxUd298IEVbaVBob25lXQogICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0KYGBg"
}
Diagram
Simple Sequence Diagram

Define:

```mermaid
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.
```

Base64 encode and assign to the content property:

{
    "content": "YGBgbWVybWFpZApzZXF1ZW5jZURpYWdyYW0KICAgIEFsaWNlLT4+K0pvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91PwogICAgQWxpY2UtPj4rSm9objogSm9obiwgY2FuIHlvdSBoZWFyIG1lPwogICAgSm9obi0tPj4tQWxpY2U6IEhpIEFsaWNlLCBJIGNhbiBoZWFyIHlvdSEKICAgIEpvaG4tLT4+LUFsaWNlOiBJIGZlZWwgZ3JlYXQhCmBgYA=="
}
Diagram
Simple Class Diagram

Define:

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

Base 64 encode and assign to content property:

{
    "content": "YGBgbWVybWFpZApjbGFzc0RpYWdyYW0KICAgIEFuaW1hbCA8fC0tIER1Y2sKICAgIEFuaW1hbCA8fC0tIEZpc2gKICAgIEFuaW1hbCA8fC0tIFplYnJhCiAgICBBbmltYWwgOiAraW50IGFnZQogICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXIKICAgIEFuaW1hbDogK2lzTWFtbWFsKCkKICAgIEFuaW1hbDogK21hdGUoKQogICAgY2xhc3MgRHVja3sKICAgICAgK1N0cmluZyBiZWFrQ29sb3IKICAgICAgK3N3aW0oKQogICAgICArcXVhY2soKQogICAgfQogICAgY2xhc3MgRmlzaHsKICAgICAgLWludCBzaXplSW5GZWV0CiAgICAgIC1jYW5FYXQoKQogICAgfQogICAgY2xhc3MgWmVicmF7CiAgICAgICtib29sIGlzX3dpbGQKICAgICAgK3J1bigpCiAgICB9CmBgYA=="
}
Diagram
Simple State Diagram

Define:

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Base64 encode and assign to content property:

{
  "content": "YGBgbWVybWFpZApzdGF0ZURpYWdyYW0tdjIKICAgIFsqXSAtLT4gU3RpbGwKICAgIFN0aWxsIC0tPiBbKl0KICAgIFN0aWxsIC0tPiBNb3ZpbmcKICAgIE1vdmluZyAtLT4gU3RpbGwKICAgIE1vdmluZyAtLT4gQ3Jhc2gKICAgIENyYXNoIC0tPiBbKl0KYGBg"
}
Diagram
Simple Gantt Chart

Define:

```mermaid
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
```

Base64 encode and assign to the content property:

{
  "content": "YGBgbWVybWFpZApnYW50dAogICAgdGl0bGUgQSBHYW50dCBEaWFncmFtCiAgICBkYXRlRm9ybWF0ICBZWVlZLU1NLURECiAgICBzZWN0aW9uIFNlY3Rpb24KICAgIEEgdGFzayAgICAgICAgICAgOmExLCAyMDE0LTAxLTAxLCAzMGQKICAgIEFub3RoZXIgdGFzayAgICAgOmFmdGVyIGExICAsIDIwZAogICAgc2VjdGlvbiBBbm90aGVyCiAgICBUYXNrIGluIHNlYyAgICAgIDoyMDE0LTAxLTEyICAsIDEyZAogICAgYW5vdGhlciB0YXNrICAgICAgOiAyNGQKYGBg"
}

Diagram
Simple Pie Chart

Define:

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

Base64 encode and assign to content property:

{
  "content": "YGBgbWVybWFpZApwaWUgdGl0bGUgUGV0cyBhZG9wdGVkIGJ5IHZvbHVudGVlcnMKICAgICJEb2dzIiA6IDM4NgogICAgIkNhdHMiIDogODUKICAgICJSYXRzIiA6IDE1CmBgYA=="
}
Diagram
ER Diagram

Define:

```mermaid
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"
```

Base64 encode and assign to content property:

{
  "content": "YGBgbWVybWFpZAplckRpYWdyYW0KICAgIENVU1RPTUVSIH18Li58eyBERUxJVkVSWS1BRERSRVNTIDogaGFzCiAgICBDVVNUT01FUiB8fC0tb3sgT1JERVIgOiBwbGFjZXMKICAgIENVU1RPTUVSIHx8LS1veyBJTlZPSUNFIDogImxpYWJsZSBmb3IiCiAgICBERUxJVkVSWS1BRERSRVNTIHx8LS1veyBPUkRFUiA6IHJlY2VpdmVzCiAgICBJTlZPSUNFIHx8LS18eyBPUkRFUiA6IGNvdmVycwogICAgT1JERVIgfHwtLXx7IE9SREVSLUlURU0gOiBpbmNsdWRlcwogICAgUFJPRFVDVC1DQVRFR09SWSB8fC0tfHsgUFJPRFVDVCA6IGNvbnRhaW5zCiAgICBQUk9EVUNUIHx8LS1veyBPUkRFUi1JVEVNIDogIm9yZGVyZWQgaW4iCmBgYA=="
}