hugo-geekdoc/exampleSite/content/en/shortcodes/mermaid.md

72 lines
1.3 KiB
Markdown
Raw Normal View History

---
title: Mermaid
---
2020-05-31 16:17:32 +00:00
[Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
2020-01-12 14:33:02 +00:00
## Example
2020-09-10 20:23:24 +00:00
<!-- prettier-ignore -->
2020-01-12 14:33:02 +00:00
```tpl
{{</* mermaid class="text-center" */>}}
2020-01-12 14:33:02 +00:00
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 -->
2020-09-10 20:23:24 +00:00
<!-- prettier-ignore -->
{{< mermaid class="text-center" >}}
2020-01-12 14:33:02 +00:00
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 >}}
2020-09-10 20:23:24 +00:00
<!-- spellchecker-enable -->
2020-01-12 14:33:02 +00:00
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 >}}