feat: Add support for Mermaid diagrams in Markdown renderer and update navigation structure

Common/Server/Types/Markdown.ts

@@ -137,6 +137,9 @@ export default class Markdown {
     };
 
     renderer.code = function (code, language) {
+      if (language === "mermaid") {
+        return `<div class="mermaid">${code}</div>`;
+      }
       return `<pre><code class="language-${language}">${code}</code></pre>`;
     };
 

Docs/Utils/Nav.ts

@@ -225,10 +225,6 @@ const DocsNav: NavGroup[] = [
 DocsNav.push({
   title: "Self Hosted",
   links: [
-    {
-      title: "Architecture",
-      url: "/docs/self-hosted/architecture",
-    },
     {
       title: "Slack Integration",
       url: "/docs/self-hosted/slack-integration",
@@ -245,6 +241,10 @@ DocsNav.push({
       title: "SendGrid Inbound Email",
       url: "/docs/self-hosted/sendgrid-inbound-email",
     },
+    {
+      title: "Architecture",
+      url: "/docs/self-hosted/architecture",
+    },
   ],
 });
 

Docs/Views/Partials/Head.ejs

@@ -26,6 +26,10 @@
 </script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" crossorigin>
 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" onload="hljs.highlightAll();"></script>
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true, theme: 'default' });
+</script>
 
 <% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %> 
     <!-- Google Tag Manager -->