Merrrmaid

Arrr! Pirrrates

Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like seeing Merrrmaids and stuff.

Th' mermaid shortcode generates diagrams an' flowcharts from text 'n a similar manner as Marrrkdown us'n th' Merrrmaid library.

graph LR;
  If --> Then
  Then --> Else

Usage

```mermaid {align="center" zoom="true"}
graph LR;
  If --> Then
  Then --> Else
```

{{< mermaid align="center" zoom="true" >}}
graph LR;
  If --> Then
  Then --> Else
{{< /mermaid >}}

{{ partial "shortcodes/mermaid.html" (dict
  "page"    .
  "content" "graph LR;\n  If --> Then\n  Then --> Else"
  "align"   "center"
  "zoom"    "true"
)}}

Codefence rules be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n portable Marrrkdown.

Parameter

Name	Default	Notes
align	`center`	Th' vertical alignment. Allowed values be `left`, `center` or `right`.
zoom	see notes	Whether th' graph be pan- an' zoom'ble. If not set th' value be determined by th' `mermaidZoom` sett'n o' yer configurat'ns opt'ns or th' planks front matter or `false` if not set at all. - `false`: no pan or zoom - `true`: pan an' zoom active
<content>	<empty>	Yer Merrrmaid graph.

Sett'ns

Configur'n Pan an' Zoom

Opt'n Front Matter Th' generated graphs can be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.

By default this be disabled. Set mermaidZoom=true t' en'ble it.

Individual sett'ns o' a graphs zoom parameter have precedence over th' page’s front matter an' configurat'n opt'ns 'n that order.

[params]
  mermaidZoom = true

params:
  mermaidZoom: true

{
   "params": {
      "mermaidZoom": true
   }
}

Provid'n Initializat'n Opt'ns fer th' Merrrmaid Library

Opt'n Front Matter Th' Merrrmaid library be configured wit' default sett'ns fer initializat'n.

Ye can overwrite th' sett'ns by provid'n a JSON object 'n mermaidInitialize. See Mermaid’s documentat'n fer all allowed sett'ns.

Avast

Us'n th' theme sett'n 'n th' initializat'n opt'ns be unsupported. T' set th' theme globally edit th' --MERMAID-theme vari'ble o' yer color variant.

Keep 'n mind that initializat'n sett'ns o' yer planks front matter overwrite all sett'ns o' yer configurat'n opt'ns.

In addit'n, ye can merge sett'ns fer each individual graph through diagram directives on top o' th' sett'ns o' yer page’s front matter or configurat'n opt'ns.

[params]
  mermaidInitialize = '{ "securityLevel": "loose" }'

params:
  mermaidInitialize: '{ "securityLevel": "loose" }'

{
   "params": {
      "mermaidInitialize": "{ \"securityLevel\": \"loose\" }"
   }
}

Load'n an External Version o' th' Merrrmaid Library

Opt'n Front Matter Th' theme uses th' shipped Merrrmaid library by default.

In case ye want do use a different version o' th' Merrrmaid library but don’t want t' override th' shipped version, ye can set customMermaidURL t' th' URL o' th' external Merrrmaid library.

[params]
  customMermaidURL = 'https://unpkg.com/mermaid/dist/mermaid.min.js'

params:
  customMermaidURL: https://unpkg.com/mermaid/dist/mermaid.min.js

{
   "params": {
      "customMermaidURL": "https://unpkg.com/mermaid/dist/mermaid.min.js"
   }
}

Force Load'n o' th' Merrrmaid Library

Opt'n Front Matter Th' Merrrmaid library will be boarded if th' plank contains an mermaid shortcode or codefence.

Ye can force load'n th' Merrrmaid library if no shortcode or codefence was used by sett'n mermaid.force=true. If a shortcode or codefence was found, this opt'n has no effect. This comes handy 'n case ye be us'n script'n t' render a graph.

[params]
  [params.mermaid]
    force = true

params:
  mermaid:
    force: true

{
   "params": {
      "mermaid": {
         "force": true
      }
   }
}

Sett'n a Specific Merrrmaid Theme

While ye can configure th' Merrrmaid theme t' render yer graph by us'n one o' th' initializat'n opt'ns, th' recommended way be t' set th' default value us'n th' --MERMAID-theme vari'ble 'n yer color variant stylesheet. This allows yer graphs t' look pretty when th' user switches th' color variant.

Examples

Flowchart wit' YAML-Title

```mermaid
---
title: Example Diagram
---
graph LR;
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{<strong>Decision</strong>}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]
```

---
title: Example Diagram
---
graph LR;
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{<strong>Decision</strong>}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]

Sequence Diagram wit' Configurat'n Directive

```mermaid
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram
  Alice->>John: Hello John, how be ye?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about ye?
  Bob-->>John: Jolly bloody!
```

%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram
  Alice->>John: Hello John, how be ye?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about ye?
  Bob-->>John: Jolly bloody!

Class Diagram

```mermaid
classDiagram
  Animal <|-- Duck
  Animal <|-- Fish
  Animal <|-- Zebra
  Animal : +int age
  Animal : +Str'n gender
  Animal: +isMammal()
  Animal: +mate()
  class Duck{
    +Str'n beakColor
    +swim()
    +quack()
  }
  class Fish{
    -int sizeInFeet
    -canEat()
  }
  class Zebra{
    +bool is_wild
    +run()
  }
```

classDiagram
  Animal <|-- Duck
  Animal <|-- Fish
  Animal <|-- Zebra
  Animal : +int age
  Animal : +Str'n gender
  Animal: +isMammal()
  Animal: +mate()
  class Duck{
    +Str'n beakColor
    +swim()
    +quack()
  }
  class Fish{
    -int sizeInFeet
    -canEat()
  }
  class Zebra{
    +bool is_wild
    +run()
  }

State Diagram Aligned t' th' Right Us'n Shortcode Rules

{{< mermaid align="right" >}}
stateDiagram-v2
  open: Open Door
  closed: Closed Door
  locked: Locked Door
  open   --> closed: Close
  closed --> locked: Lock
  locked --> closed: Unlock
  closed --> open: Open
{{< /mermaid >}}

stateDiagram-v2
  open: Open Door
  closed: Closed Door
  locked: Locked Door
  open   --> closed: Close
  closed --> locked: Lock
  locked --> closed: Unlock
  closed --> open: Open

Entity Relationship Model wit' Non-Default Merrrmaid Theme

```mermaid
%%{init:{"theme":"forest"}}%%
erDiagram
  CUSTOMER }|..|{ DELIVERY-ADDRESS : has
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER ||--o{ INVOICE : "li'ble for"
  DELIVERY-ADDRESS ||--o{ ORDER : receives
  INVOICE ||--|{ ORDER : covers
  ORDER ||--|{ ORDER-ITEM : includes
  PRODUCT-CATEGORY ||--|{ PRODUCT : contains
  PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```

%%{init:{"theme":"forest"}}%%
erDiagram
  CUSTOMER }|..|{ DELIVERY-ADDRESS : has
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER ||--o{ INVOICE : "li'ble for"
  DELIVERY-ADDRESS ||--o{ ORDER : receives
  INVOICE ||--|{ ORDER : covers
  ORDER ||--|{ ORDER-ITEM : includes
  PRODUCT-CATEGORY ||--|{ PRODUCT : contains
  PRODUCT ||--o{ ORDER-ITEM : "ordered in"

User Journey

```mermaid
journey
  title My work'n day
  section Go t' work
    Make tea: 5: Me
    Go upstairs: 3: Me
    Do work: 1: Me, Cat
  section Go home
    Go downstairs: 5: Me
    Sit down: 3: Me
```

journey
  title My work'n day
  section Go t' work
    Make tea: 5: Me
    Go upstairs: 3: Me
    Do work: 1: Me, Cat
  section Go home
    Go downstairs: 5: Me
    Sit down: 3: Me

GANTT Chart

```mermaid
gantt
  dateFormat  YYYY-MM-DD
  title Add'n GANTT diagram functionality t' Merrrmaid
  section A section
  Completed task            :done,    des1, 2014-01-06,2014-01-08
  Active task               :active,  des2, 2014-01-09, 3d
  Future task               :         des3, after des2, 5d
  Future task2              :         des4, after des3, 5d
  section Critical tasks
  Completed task 'n th' critical line :crit, done, 2014-01-06,24h
  Implement parser an' jison          :crit, done, after des1, 2d
  Create tests fer parser             :crit, active, 3d
  Future task 'n critical line        :crit, 5d
  Create tests fer renderer           :2d
  Add t' Merrrmaid                      :1d
```

gantt
  dateFormat  YYYY-MM-DD
  title Add'n GANTT diagram functionality t' Merrrmaid
  section A section
  Completed task            :done,    des1, 2014-01-06,2014-01-08
  Active task               :active,  des2, 2014-01-09, 3d
  Future task               :         des3, after des2, 5d
  Future task2              :         des4, after des3, 5d
  section Critical tasks
  Completed task 'n th' critical line :crit, done, 2014-01-06,24h
  Implement parser an' jison          :crit, done, after des1, 2d
  Create tests fer parser             :crit, active, 3d
  Future task 'n critical line        :crit, 5d
  Create tests fer renderer           :2d
  Add t' Merrrmaid                      :1d

Pie Chart without Zoom

```mermaid {zoom="false"}
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
```

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

Quadrant Chart

```mermaid
quadrantChart
  title Reach an' engagement o' campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  quadrant-2 Need t' promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.3, 0.6]
  Campaign B: [0.45, 0.23]
  Campaign C: [0.57, 0.69]
  Campaign D: [0.78, 0.34]
  Campaign E: [0.40, 0.34]
  Campaign F: [0.35, 0.78]
```

quadrantChart
  title Reach an' engagement o' campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  quadrant-2 Need t' promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.3, 0.6]
  Campaign B: [0.45, 0.23]
  Campaign C: [0.57, 0.69]
  Campaign D: [0.78, 0.34]
  Campaign E: [0.40, 0.34]
  Campaign F: [0.35, 0.78]

Requirement Diagram

```mermaid
requirementDiagram

  requirement test_req {
    id: 1
    text: th' test text.
    risk: high
    verifymethod: test
  }

  element test_entity {
    type: simulat'n
  }

  test_entity - satisfies -> test_req
```

requirementDiagram

  requirement test_req {
    id: 1
    text: th' test text.
    risk: high
    verifymethod: test
  }

  element test_entity {
    type: simulat'n
  }

  test_entity - satisfies -> test_req

Git Graph

```mermaid
gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit
```

gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit

C4 Diagrams

```mermaid
C4Context
  title System Context diagram fer Internet Bank'n System
  Enterprise_Boundary(b0, "BankBoundary0") {
    Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
    Person(customerB, "Bank'n Customer B")
    Person_Ext(customerC, "Bank'n Customer C", "desc")
    Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")

    System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")

    Enterprise_Boundary(b1, "BankBoundary") {
      SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")

      System_Boundary(b2, "BankBoundary2") {
        System(SystemA, "Bank'n System A")
        System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
      }

      System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
      SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")

      Boundary(b3, "BankBoundary3", "boundary") {
        SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
        SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
      }
    }
  }

  BiRel(customerA, SystemAA, "Uses")
  BiRel(SystemAA, SystemE, "Uses")
  Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
  Rel(SystemC, customerA, "Sends e-mails to")

  UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
  UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
  UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
  UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
  UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

  UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```

C4Context
  title System Context diagram fer Internet Bank'n System
  Enterprise_Boundary(b0, "BankBoundary0") {
    Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
    Person(customerB, "Bank'n Customer B")
    Person_Ext(customerC, "Bank'n Customer C", "desc")
    Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")

    System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")

    Enterprise_Boundary(b1, "BankBoundary") {
      SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")

      System_Boundary(b2, "BankBoundary2") {
        System(SystemA, "Bank'n System A")
        System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
      }

      System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
      SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")

      Boundary(b3, "BankBoundary3", "boundary") {
        SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
        SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
      }
    }
  }

  BiRel(customerA, SystemAA, "Uses")
  BiRel(SystemAA, SystemE, "Uses")
  Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
  Rel(SystemC, customerA, "Sends e-mails to")

  UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
  UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
  UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
  UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
  UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

  UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Mindmaps

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisat'n
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creat'n
        Uses
            Creative techniques
            Strategic plann'n
            Argument mapp'n
    Tools
      Pen an' paper
      Merrrmaid
```

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisat'n
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creat'n
        Uses
            Creative techniques
            Strategic plann'n
            Argument mapp'n
    Tools
      Pen an' paper
      Merrrmaid

Timeline

```mermaid
timeline
  title History o' Social Media Platform
  2002 : LinkedIn
  2004 : Facebook
       : Google
  2005 : Youtube
  2006 : Twitter
```

timeline
  title History o' Social Media Platform
  2002 : LinkedIn
  2004 : Facebook
       : Google
  2005 : Youtube
  2006 : Twitter

ZenUML

ZenUML be currently not avail'ble wit' th' Merrrmaid version shipped wit' th' theme due t' further required dependencies. Use sequence diagrams instead.

Sankey

```mermaid
sankey-beta
  %% source,target,value
  Electricity grid,Over generat'n / exports,104.453
  Electricity grid,Heat'n an' cool'n - homes,113.726
  Electricity grid,H2 conversion,27.14
```

sankey-beta
  %% source,target,value
  Electricity grid,Over generat'n / exports,104.453
  Electricity grid,Heat'n an' cool'n - homes,113.726
  Electricity grid,H2 conversion,27.14

XYChart

```mermaid
xychart-beta
  title "Sales Revenue"
  x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
  y-axis "Revenue (in $)" 4000 --> 11000
  bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
  line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

xychart-beta
  title "Sales Revenue"
  x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
  y-axis "Revenue (in $)" 4000 --> 11000
  bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
  line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Block Diagram

```mermaid
block-beta
  columns 1
    db(("DB"))
    blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
    block:ID
      A
      B["A wide one 'n th' middle"]
      C
    end
    space
    D
    ID --> D
    C --> D
    style B fill:#969,stroke:#333,stroke-width:4px
```

block-beta
  columns 1
    db(("DB"))
    blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
    block:ID
      A
      B["A wide one 'n th' middle"]
      C
    end
    space
    D
    ID --> D
    C --> D
    style B fill:#969,stroke:#333,stroke-width:4px

Packet

```mermaid
---
title: "TCP Packet"
---
packet-beta
  0-15: "Source Port"
  16-31: "Destinat'n Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106: "URG"
  107: "ACK"
  108: "PSH"
  109: "RST"
  110: "SYN"
  111: "FIN"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"
  160-191: "(Opt'ns an' Padding)"
  192-255: "Data (vari'ble length)"
```

---
title: "TCP Packet"
---
packet-beta
  0-15: "Source Port"
  16-31: "Destinat'n Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106: "URG"
  107: "ACK"
  108: "PSH"
  109: "RST"
  110: "SYN"
  111: "FIN"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"
  160-191: "(Opt'ns an' Padding)"
  192-255: "Data (vari'ble length)"

Kanban

```mermaid
---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about th' new diagram]
  [In progress]
    id6[Create renderer so that it works 'n all cases. We also add som extra text here fer test'n purposes. An' some more just fer th' extra flare.]
  id9[Ready fer deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready fer test]
    id4[Create pars'n tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title o' diagram be more than 100 chars when user duplicates diagram wit' 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flicker'n 'n Firefox]
```

---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create Blog about th' new diagram]
  [In progress]
    id6[Create renderer so that it works 'n all cases. We also add som extra text here fer test'n purposes. An' some more just fer th' extra flare.]
  id9[Ready fer deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready fer test]
    id4[Create pars'n tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title o' diagram be more than 100 chars when user duplicates diagram wit' 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flicker'n 'n Firefox]

Architecture

```mermaid
architecture-beta
  group api(cloud)[API]

  service db(database)[Database] 'n api
  service disk1(disk)[Storage] 'n api
  service disk2(disk)[Storage] 'n api
  service server(server)[Server] 'n api

  db:L -- R:server
  disk1:T -- B:server
  disk2:T -- B:db
```

architecture-beta
  group api(cloud)[API]

  service db(database)[Database] 'n api
  service disk1(disk)[Storage] 'n api
  service disk2(disk)[Storage] 'n api
  service server(server)[Server] 'n api

  db:L -- R:server
  disk1:T -- B:server
  disk2:T -- B:db