1 files changed, 46 insertions, 0 deletions
diff --git a/content/docs/shortcodes/mermaid.md b/content/docs/shortcodes/mermaid.md
new file mode 100644
index 0000000..09eecea
--- /dev/null
+++ b/content/docs/shortcodes/mermaid.md
@@ -0,0 +1,46 @@
+# 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
+
+
+<div class="book-columns flex flex-wrap">
+  <div class="flex-even markdown-inner">
+
+```tpl
+{{</* mermaid class="optional" >}}
+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 */>}}
+```
+
+  </div>
+  <div class="flex-even markdown-inner">
+
+{{< mermaid class="optional" >}}
+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 >}}
+
+  </div>
+</div>
+\ No newline at end of file