72 lines
1.3 KiB
Markdown
72 lines
1.3 KiB
Markdown
|
---
|
||
|
|
title: Mermaid
|
||
|
|
---
|
||
|
|
|
||
|
|
[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
```tpl
|
||
|
|
{{</* mermaid class="text-center" */>}}
|
||
|
|
sequenceDiagram
|
||
|
|
Alice->>Bob: Hello Bob, how are you?
|
||
|
|
alt is sick
|
||
|
|
Bob->>Alice: Not so good :(
|
||
|
|
else is well
|
||
|
|
Bob->>Alice: Feeling fresh like a daisy
|
||
|
|
end
|
||
|
|
opt Extra response
|
||
|
|
Bob->>Alice: Thanks for asking
|
||
|
|
end
|
||
|
|
{{</* /mermaid */>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- spellchecker-disable -->
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
{{< mermaid class="text-center" >}}
|
||
|
|
sequenceDiagram
|
||
|
|
Alice->>Bob: Hello Bob, how are you?
|
||
|
|
alt is sick
|
||
|
|
Bob->>Alice: Not so good :(
|
||
|
|
else is well
|
||
|
|
Bob->>Alice: Feeling fresh like a daisy
|
||
|
|
end
|
||
|
|
opt Extra response
|
||
|
|
Bob->>Alice: Thanks for asking
|
||
|
|
end
|
||
|
|
{{< /mermaid >}}
|
||
|
|
|
||
|
|
<!-- spellchecker-enable -->
|
||
|
|
|
||
|
|
As an alternative to shortcodes, code blocks can be used for markdown as well.
|
||
|
|
|
||
|
|
{{< columns >}}
|
||
|
|
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
````tpl
|
||
|
|
```mermaid
|
||
|
|
flowchart LR
|
||
|
|
A[Hard] -->|Text| B(Round)
|
||
|
|
B --> C{Decision}
|
||
|
|
C -->|One| D[Result 1]
|
||
|
|
C -->|Two| E[Result 2]
|
||
|
|
```
|
||
|
|
````
|
||
|
|
|
||
|
|
<--->
|
||
|
|
|
||
|
|
<!-- spellchecker-disable -->
|
||
|
|
<!-- prettier-ignore -->
|
||
|
|
```mermaid
|
||
|
|
flowchart LR
|
||
|
|
A[Hard] -->|Text| B(Round)
|
||
|
|
B --> C{Decision}
|
||
|
|
C -->|One| D[Result 1]
|
||
|
|
C -->|Two| E[Result 2]
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- spellchecker-enable -->
|
||
|
|
|
||
|
|
{{< /columns >}}
|