From d5fb3894ec83c72cb770d65722e76487626c032f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Br=C3=A4unlich?= <sundowneffect@gmail.com>
Date: Sun, 6 Mar 2022 17:49:23 +0100
Subject: [PATCH 1/2] added mermaid feature

---
 config.toml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/config.toml b/config.toml
index fa73b91b..dc3f1478 100644
--- a/config.toml
+++ b/config.toml
@@ -109,6 +109,10 @@ notoc = true
 # First one is picked as the Twitter card image if not set on page.
 images = ["images/og-image-fission.png"]
 
+[params.mermaid]
+enable = true
+theme = "neutral"
+
 [params.social]
 #github = ''
 #slackurl = ""
@@ -216,4 +220,4 @@ weight = 13
 name = "Discord"
 pre = "<i class='fab fa-discord'></i>"
 url = "https://discord.gg/4wbfNv3"
-weight = 14
\ No newline at end of file
+weight = 14

From 75dd79f90455e9ec564bbeff8e4f353bea685c0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Br=C3=A4unlich?= <sundowneffect@gmail.com>
Date: Sun, 6 Mar 2022 18:22:58 +0100
Subject: [PATCH 2/2] added mermaid to formatting tips

---
 .../docs/Contributing/FormattingTips/index.md | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/content/docs/Contributing/FormattingTips/index.md b/content/docs/Contributing/FormattingTips/index.md
index 4f4e525e..bf6f6a18 100644
--- a/content/docs/Contributing/FormattingTips/index.md
+++ b/content/docs/Contributing/FormattingTips/index.md
@@ -38,6 +38,66 @@ Results in:
   end;
 ```
 
+## Diagrams with Mermaid
+
+When providing a documentation, diagrams come in handy. [Mermaid](https://mermaid-js.github.io/mermaid/#/) lets you create diagrams and visualizations using text and code.
+
+For example the following markdown section:
+
+````
+```mermaid
+classDiagram
+  Animal <|-- Duck
+  Animal <|-- Fish
+  Animal <|-- Zebra
+  Animal : +int age
+  Animal : +String gender
+  Animal: +isMammal()
+  Animal: +mate()
+  class Duck{
+    +String beakColor
+    +swim()
+    +quack()
+  }
+  class Fish{
+    -int sizeInFeet
+    -canEat()
+  }
+  class Zebra{
+    +bool is_wild
+    +run()
+  }
+```
+````
+
+Results in:
+
+```mermaid
+classDiagram
+  Animal <|-- Duck
+  Animal <|-- Fish
+  Animal <|-- Zebra
+  Animal : +int age
+  Animal : +String gender
+  Animal: +isMammal()
+  Animal: +mate()
+  class Duck{
+    +String beakColor
+    +swim()
+    +quack()
+  }
+  class Fish{
+    -int sizeInFeet
+    -canEat()
+  }
+  class Zebra{
+    +bool is_wild
+    +run()
+  }
+```
+
+Can't wait to get started? Use the Mermaid [Live Editor](https://mermaid.live/edit).
+
 ## Hugo Shortcodes
 Since we're using "Hugo", we can use it's shortcode.  Here is a reference: [https://gohugo.io/content-management/shortcodes/](https://gohugo.io/content-management/shortcodes/)