Merrrmaid
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 shorrrtcode generates diagrams an' flowcharts from text, 'n a similar manner as Marrrkdown us'n th' Merrrmaid library.
This only works 'n modern browsers.
Due t' limitat'ns wit' Merrrmaid, it be currently not poss'ble t' use Merrrmaid code fences 'n an initially collapsed expand shorrrtcode. 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 shorrrtcode from yer own partials.
T' use codefence rules ye have t' turn off guessSyntax fer th' marrrkup.highlight sett'n (see th' configurat'n section).
```mermaid { align="center" }
graph LR;
If --> Then
Then --> Else
```
{{< mermaid align="center" >}}
graph LR;
If --> Then
Then --> Else
{{< /mermaid >}}
{{ partial "shortcodes/mermaid.html" (dict
"context" .
"content" "graph LR;\nIf --> Then\nThen --> Else"
"align" "center"
)}}
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. |
| <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.
T' use codefence rules ye have t' turn off guessSyntax fer th' marrrkup.highlight sett'n.
Global Configurat'n File
[params]
mermaidInitialize = "{ \"theme\": \"dark\" }"
[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\" }"
+++
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 >}}
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()
}
```
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 >}}
Sequence Diagram
{{< mermaid >}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how be ye?
loop Healthcheck
John->John: Fight against hypochondria
end
Avast right o' John: Rational thoughts <br>prevail...
John-->Alice: Great!
John->Bob: How about ye?
Bob-->John: Jolly bloody!
{{< /mermaid >}}
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 >}}
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 >}}
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 >}}
Git Graph
{{< mermaid >}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /mermaid >}}
Pie Chart
{{< mermaid >}}
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
Mindmap
This diagram type seems t' be broken 'n th' way this theme uses Merrrmaid. This will probably be fixed 'n th' future by th' Merrrmaid team.
{{< mermaid >}}
mindmap
root((mindmap))
Origins
Long history
::ay'con(fa fa-book)
Popularisat'n
British popular psychology author Tony Buzan
Research
On effectivness<br/>an' features
On Automatic creat'n
Uses
Creative techniques
Strategic plann'n
Argument mapp'n
Tools
Pen an' paper
Merrrmaid
{{< /mermaid >}}