first commit

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 >}}