Merrrmaid

Arrr! Pirrrates

Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may not work in this trrranslat'n. Like see'n Merrrmaids, do'n math or chemistrrry, writ'n docs 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

Avast

This only works 'n modern browsers.

Arrr

Due t' limitat'ns wit' Merrrmaid, it be currently not poss'ble t' use Merrrmaid code fences 'n an initially collapsed expand shortcode. This be a know issue an' can’t be fixed by this theme.

Usage

While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Merrrmaid codefences (eg. GitHub) an' so yer markdown becomes more port'ble.

Ye be free t' also call this shortcode from yer own partials.

Avast

T' use codefence rules ye have t' turn off guessSyntax fer th' marrrkup.highlight sett'n (see th' configurat'n section).

```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
  "context" .
  "content" "graph LR;\nIf --> Then\nThen --> Else"
  "align"   "center"
  "zoom"    "true"
)}}

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

Parameter

Name	Default	Notes
align	`center`	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' th' ship or th' planks frontmatter or `false` if not set at all. - `false`: no pan or zoom - `true`: pan an' zoom active
<content>	<empty>	Yer Merrrmaid graph.

Configurat'n

Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files thru a JSON object 'n yer config.toml, override these sett'ns per plank thru yer planks frontmatter or override these sett'n per diagramm thru diagram directives.

Th' JSON object o' yer config.toml / frontmatter be forwarded into Mermaid’s mermaid.initialize() funct'n.

See Merrrmaid documentat'n fer all allowed sett'ns.

Th' theme sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n config.toml, frontmatter or diagram directives.

Avast

T' use codefence rules ye have t' turn off guessSyntax fer th' marrrkup.highlight sett'n.

Global Configurat'n File

[params]
  mermaidInitialize = "{ \"theme\": \"dark\" }"
  mermaidZoom = true

[marrrkup]
  [marrrkup.highlight]
    # if `guessSyntax = true`, there will be no unstyled code even if no language
    # was given BUT Merrrmaid an' Math codefences will not work anymore! So this be a
    # mandatory sett'n fer yer ship if ye want t' use Merrrmaid codefences
    guessSyntax = false

Page’s Frontmatter

+++
mermaidInitialize = "{ \"theme\": \"dark\" }"
mermaidZoom = true
+++

Examples

Flowchart wit' Non-Default Merrrmaid Theme

{{< mermaid >}}
%%{init:{"theme":"forest"}}%%
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]
{{< /mermaid >}}

%%{init:{"theme":"forest"}}%% 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
    Avast right o' John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about ye?
    Bob-->>John: Jolly bloody!
{{< /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!

Class Diagram wit' Codefence Rules

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

{{< 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

{{< mermaid >}}
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"
{{< /mermaid >}}

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
{{< /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

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, aft des2, 5d
        Future task2              :         des4, aft des3, 5d
        section Critical tasks
        Completed task 'n th' critical line :crit, done, 2014-01-06,24h
        Implement parser an' jison          :crit, done, aft 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
{{< /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, aft des2, 5d Future task2 : des4, aft des3, 5d section Critical tasks Completed task 'n th' critical line :crit, done, 2014-01-06,24h Implement parser an' jison :crit, done, aft 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
{{< /mermaid >}}

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

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
{{< /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

Git Graph

{{< mermaid >}}
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
{{< /mermaid >}}

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")
{{< /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")