Fix Mermaid rendering

Author: tcpipuk

Diff for: .github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    reviewers:
+      - "tcpipuk"

Diff for: .github/workflows/deploy-mdbook.yml

@@ -115,9 +115,9 @@ jobs:
           curl -sSfL -o theme/catppuccin-admonish.css \
             https://github.com/catppuccin/mdBook/releases/latest/download/catppuccin-admonish.css
 
-          # Download default theme's index.hbs for customization
+          # Download default theme's index.hbs for customisation
           curl -sSfL -o theme/index.hbs \
-            https://raw.githubusercontent.com/rust-lang/mdBook/master/src/theme/index.hbs
+            https://raw.githubusercontent.com/rust-lang/mdBook/refs/heads/master/src/front-end/templates/index.hbs
 
           # Update index.hbs theme options
           sed -i 's/Light/Latte/; s/Rust/Frappé/; s/Coal/Macchiato/; s/Navy/Mocha/; /Ayu/d' theme/index.hbs
@@ -149,6 +149,11 @@ jobs:
             -o src/assets/whichlang.js \
             https://raw.githubusercontent.com/phoenixr-codes/mdbook-whichlang/master/dist/whichlang.js
 
+          # Mermaid JS
+          curl -sSf \
+            -o src/assets/mermaid.min.js \
+            https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js
+
       - name: Build the mdBook Site
         run: mdbook build
 

Diff for: book.toml

@@ -12,7 +12,7 @@ create-missing = true
 
 [output.html]
 default-theme = "latte"
-preferred-dark-theme = "mocha"
+preferred-dark-theme = "macchiato"
 # URL to send visitors who click edit
 edit-url-template = "https://github.com/tcpipuk/tcpipuk.github.io/edit/main/{path}"
 # Remove numbers before each item in the sidebar
@@ -30,11 +30,19 @@ additional-css = [
 	"./theme/catppuccin.css",
 	"./theme/catppuccin-admonish.css",
 ]
-additional-js = ["src/assets/table-of-contents.js", "src/assets/whichlang.js"]
+additional-js = [
+	"src/assets/table-of-contents.js",
+	"src/assets/whichlang.js",
+	"src/assets/mermaid.min.js",
+	"src/assets/mermaid-init.js",
+]
 
 [preprocessor.footnote]
 
 [preprocessor.graphviz]
 after = ["links"]
 command = "mdbook-graphviz"
 output-to-file = false
+
+[preprocessor.mermaid]
+command = "mdbook-mermaid"

Diff for: src/assets/mermaid-init.js

@@ -0,0 +1,4 @@
+mermaid.initialize({
+  securityLevel: "loose",
+  theme: "dark",
+});

Diff for: src/synapse/deployment/README.md

@@ -34,16 +34,16 @@ Here's a diagram of how requests should flow once we're done:
 
 ```mermaid
 graph TD;
-    A[Client\nRequests] --> B[Client Sync &\nStream Writers];
-    A --> C[Main\nProcess];
+    A[Client<br>Requests] --> B[Client Sync &<br>Stream Writers];
+    A --> C[Main<br>Process];
     C --> B;
-    C --> E[Background &\nEvent Writer];
-    A --> D[Room\nWorkers];
-    F[Federation\nRequests] --> D;
-    F --> G[Federation\nReader]
+    C --> E[Background &<br>Event Writer];
+    A --> D[Room<br>Workers];
+    F[Federation<br>Requests] --> D;
+    F --> G[Federation<br>Reader]
     G --> B;
     G --> E;
-    H[Media\nRequests] --> I[Media\nRepository];
+    H[Media<br>Requests] --> I[Media<br>Repository];
 ```
 
 - **Main Process**: Some requests can only go to the Synapse main process, but we also send client