43 lines
952 B
Markdown
43 lines
952 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="..."] >}}
|
||
|
|
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 %}}
|