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 >}}
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 >}}
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 >}}
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 >}}
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 >}}
Pie Chart
{{< mermaid >}}
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
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 >}}
Git Graph
{{< mermaid >}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /mermaid >}}
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 >}}
Mindmap
As o' Merrrmaid version 9.2.2 this diagram type be not included 'n th' official distribut'n an' will not be use'ble 'n this theme.
{{< 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 >}}