diff options
Diffstat (limited to 'exampleSite/content.en/docs/shortcodes/mermaid.md')
-rw-r--r-- | exampleSite/content.en/docs/shortcodes/mermaid.md | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/exampleSite/content.en/docs/shortcodes/mermaid.md b/exampleSite/content.en/docs/shortcodes/mermaid.md new file mode 100644 index 0000000..a9ed4d4 --- /dev/null +++ b/exampleSite/content.en/docs/shortcodes/mermaid.md @@ -0,0 +1,41 @@ +# 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 >}} |