docs: enable mermaid diagram rendering on front page

Author: LSantha

mkdocs.yml

@@ -53,7 +53,11 @@ markdown_extensions:
       anchor_linenums: true
   - pymdownx.inlinehilite
   - pymdownx.snippets
-  - pymdownx.superfences
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
   - pymdownx.tabbed:
       alternate_style: true
   - pymdownx.tasklist:
@@ -67,3 +71,7 @@ plugins:
       enable_creation_date: true
   - minify:
       minify_html: true
+
+extra_javascript:
+  - https://unpkg.com/mermaid@11.4.1/dist/mermaid.min.js
+  - assets/javascripts/mermaid-init.js

website/assets/javascripts/mermaid-init.js

@@ -0,0 +1,4 @@
+document$.subscribe(function () {
+    mermaid.initialize({ startOnLoad: false, theme: "default" });
+    mermaid.run({ querySelector: ".mermaid" });
+});