Merrrmaid

Arrr

Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings and stuff.

Merrrmaid be a library help'n ye t' generate diagram an' flowcharts from text, 'n a similar manner as Marrrkdown.

Usage

Just insert yer Merrrmaid code 'n th' mermaid shorrrtcode like this:

{{< mermaid [ align=("left"|"right"|"center"|"justify") ] >}}
classDiagram
    Person *-- Dog
{{< /mermaid >}}

Ye can set an optional align attribute which defaults t' "center".

If ye don’t need alignment ye can use th' alternative rules us'n code fences if ye have turned off guessSyntax fer th' marrrkup.highlight sett'n (see below):

```mermaid
classDiagram
    Person *-- Dog
```

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.

Examples

Flowchart

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

Show marrrkup

{{< mermaid align="left" >}}
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 >}}

Sequence

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how be ye? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->Alice: Great! John->Bob: How about ye? Bob-->John: Jolly bloody!

Show marrrkup

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how be ye?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about ye?
    Bob-->John: Jolly bloody!
{{< /mermaid >}}

GANTT

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

Show marrrkup

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

Class

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Whar' am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Show marrrkup

{{< mermaid >}}
classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Whar' am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
{{< /mermaid >}}

State

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

Show marrrkup

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

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 or override these sett'ns sidewise thru yer planks frontmatter.

This JSON object be forwarded into Mermaid’s mermaid.initialize() funct'n.

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

Also, if ye want t' use mermaid codefences, ye have t' turn off guessSyntax fer th' marrrkup.highlight sett'n.

Example

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

[markup]
  [markup.highlight]
    guessSyntax = false     # if set t' true, avoid unstyled code if no language was given but mermaid code fences will not work anymore

or planks frontmatter

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