From 3870a9ed08c2089cb7a69a2c7db9779fddcd41ec Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Wed, 14 Jan 2026 17:03:17 +0000
Subject: [PATCH] feat: Add support for Mermaid diagrams in Markdown renderer
 and update navigation structure

---
 Common/Server/Types/Markdown.ts | 3 +++
 Docs/Utils/Nav.ts               | 8 ++++----
 Docs/Views/Partials/Head.ejs    | 4 ++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/Common/Server/Types/Markdown.ts b/Common/Server/Types/Markdown.ts
index 6861c45961..197b843bab 100644
--- a/Common/Server/Types/Markdown.ts
+++ b/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>`;
     };
 
diff --git a/Docs/Utils/Nav.ts b/Docs/Utils/Nav.ts
index 1d4253ee36..6044ae13e7 100644
--- a/Docs/Utils/Nav.ts
+++ b/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",
+    },
   ],
 });
 
diff --git a/Docs/Views/Partials/Head.ejs b/Docs/Views/Partials/Head.ejs
index 045631b1f2..6fe5973585 100644
--- a/Docs/Views/Partials/Head.ejs
+++ b/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 -->