fix: update VSCode settings for color theme and enhance documentation with Mermaid.js support

Author: benpaddlejones

.vscode/settings.json

@@ -27,7 +27,7 @@
     "/root/.vscode-remote/extensions/benpaddlejones.pico-bridge-2.0.2/emulator/mock/micropython"
   ],
   "micropico.syncFolder": "project",
-  "workbench.colorTheme": "Default Dark+",
+  "workbench.colorTheme": "Dark+",
   "workbench.iconTheme": "icons",
   "github.copilot.enable": {
     "python": false,

app/docs.html

@@ -378,6 +378,11 @@
     <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
     <!-- DOMPurify for sanitization -->
     <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
+    <!-- Mermaid.js for diagrams -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+    <script>
+      mermaid.initialize({ startOnLoad: false, theme: "dark" });
+    </script>
 
     <script>
       // GitHub raw content base URL
@@ -487,14 +492,26 @@
           // Sanitize HTML
           html = DOMPurify.sanitize(html, {
             ADD_TAGS: ["img"],
-            ADD_ATTR: ["src", "alt", "title"],
+            ADD_ATTR: ["src", "alt", "title", "class"],
           });
 
           // Display content
           content.innerHTML = html;
           content.style.display = "block";
           spinner.style.display = "none";
 
+          // Render Mermaid diagrams
+          content
+            .querySelectorAll("code.language-mermaid")
+            .forEach((codeEl) => {
+              const pre = codeEl.parentElement;
+              const div = document.createElement("div");
+              div.className = "mermaid";
+              div.textContent = codeEl.textContent;
+              pre.replaceWith(div);
+            });
+          await mermaid.run({ nodes: content.querySelectorAll(".mermaid") });
+
           // Update page title
           const docTitle = docName.replace(/_/g, " ");
           document.title = `${docTitle} - AIDriver`;