Merrrmaid
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\" }"
+++