# Merrrmaid :: Cap'n Hugo Relearrrn Theme
Documentation for Hugo Relearn Theme
Author: Sören Weber

# Merrrmaid

Arrr! Pirrrates

Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry 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")