42 lines
972 B
Markdown
42 lines
972 B
Markdown
|
# Mermaid Chart
|
||
|
|
|
||
|
|
[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text.
|
||
|
|
|
||
|
|
{{< hint info >}}
|
||
|
|
**Override Mermaid Initialization Config**
|
||
|
|
|
||
|
|
To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid,
|
||
|
|
create a `mermaid.json` file in your `assets` folder!
|
||
|
|
{{< /hint >}}
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
{{< columns >}}
|
||
|
|
```tpl
|
||
|
|
{{</*/* mermaid [class="text-center"]*/*/>}}
|
||
|
|
stateDiagram-v2
|
||
|
|
State1: The state with a note
|
||
|
|
note right of State1
|
||
|
|
Important information! You can write
|
||
|
|
notes.
|
||
|
|
end note
|
||
|
|
State1 --> State2
|
||
|
|
note left of State2 : This is the note to the left.
|
||
|
|
{{</*/* /mermaid */*/>}}
|
||
|
|
```
|
||
|
|
|
||
|
|
<--->
|
||
|
|
|
||
|
|
{{< mermaid >}}
|
||
|
|
stateDiagram-v2
|
||
|
|
State1: The state with a note
|
||
|
|
note right of State1
|
||
|
|
Important information! You can write
|
||
|
|
notes.
|
||
|
|
end note
|
||
|
|
State1 --> State2
|
||
|
|
note left of State2 : This is the note to the left.
|
||
|
|
{{< /mermaid >}}
|
||
|
|
|
||
|
|
{{< /columns >}}
|