From 6a1932611cb183f913c4b827cffa2b0b11dbdc4f Mon Sep 17 00:00:00 2001
From: Alex Shpak <alex-shpak@users.noreply.github.com>
Date: Mon, 3 May 2021 23:14:20 +0200
Subject: [PATCH] Update MermaidJS example

---
 .../content/docs/shortcodes/mermaid.md        | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/exampleSite/content/docs/shortcodes/mermaid.md b/exampleSite/content/docs/shortcodes/mermaid.md
index c37e6b2..8c43419 100644
--- a/exampleSite/content/docs/shortcodes/mermaid.md
+++ b/exampleSite/content/docs/shortcodes/mermaid.md
@@ -1,6 +1,6 @@
 # Mermaid Chart
 
-[Mermaid](https://mermaidjs.github.io/) is library for generating svg charts and diagrams from text.
+[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text.
 
 {{< hint info >}}
 **Override Mermaid Initialization Config**
@@ -14,33 +14,28 @@ create a `mermaid.json` file in your `assets` folder!
 {{< columns >}}
 ```tpl
 {{</* mermaid [class="text-center"]*/>}}
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
+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 >}}
-sequenceDiagram
-    Alice->>Bob: Hello Bob, how are you?
-    alt is sick
-        Bob->>Alice: Not so good :(
-    else is well
-        Bob->>Alice: Feeling fresh like a daisy
-    end
-    opt Extra response
-        Bob->>Alice: Thanks for asking
-    end
+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 >}}
-