diff --git a/web/package-lock.json b/web/package-lock.json
index 366d93565..0a1abdea2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -62,7 +62,7 @@
                 "eslint-plugin-lit": "^1.8.2",
                 "fuse.js": "^6.6.2",
                 "lit": "^2.6.1",
-                "mermaid": "^9.4.0",
+                "mermaid": "^10.0.0",
                 "moment": "^2.29.4",
                 "prettier": "^2.8.4",
                 "pyright": "^1.1.294",
@@ -7525,25 +7525,26 @@
             }
         },
         "node_modules/mermaid": {
-            "version": "9.4.0",
-            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.4.0.tgz",
-            "integrity": "sha512-4PWbOND7CNRbjHrdG3WUUGBreKAFVnMhdlPjttuUkeHbCQmAHkwzSh5dGwbrKmXGRaR4uTvfFVYzUcg++h0DkA==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.0.0.tgz",
+            "integrity": "sha512-syS1qyYCd3EPXCVSpYtefY4D9z9WZAK8hFgjeHR9PAtanybLO162Tu7o5i/nZkqRrJq0Rk8RqskQlhBPgT8eBw==",
             "dependencies": {
                 "@braintree/sanitize-url": "^6.0.0",
                 "cytoscape": "^3.23.0",
                 "cytoscape-cose-bilkent": "^4.1.0",
                 "cytoscape-fcose": "^2.1.0",
-                "d3": "^7.0.0",
+                "d3": "^7.4.0",
                 "dagre-d3-es": "7.0.8",
                 "dompurify": "2.4.3",
                 "elkjs": "^0.8.2",
                 "khroma": "^2.0.0",
                 "lodash-es": "^4.17.21",
-                "moment": "^2.29.4",
+                "moment-mini": "^2.29.4",
                 "non-layered-tidy-tree-layout": "^2.0.2",
                 "stylis": "^4.1.2",
                 "ts-dedent": "^2.2.0",
-                "uuid": "^9.0.0"
+                "uuid": "^9.0.0",
+                "web-worker": "^1.2.0"
             }
         },
         "node_modules/micromatch": {
@@ -7620,6 +7621,11 @@
                 "node": "*"
             }
         },
+        "node_modules/moment-mini": {
+            "version": "2.29.4",
+            "resolved": "https://registry.npmjs.org/moment-mini/-/moment-mini-2.29.4.tgz",
+            "integrity": "sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg=="
+        },
         "node_modules/moo": {
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -10028,6 +10034,11 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/web-worker": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
+            "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
+        },
         "node_modules/webcomponent-qr-code": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/webcomponent-qr-code/-/webcomponent-qr-code-1.1.1.tgz",
@@ -15742,25 +15753,26 @@
             "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
         },
         "mermaid": {
-            "version": "9.4.0",
-            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.4.0.tgz",
-            "integrity": "sha512-4PWbOND7CNRbjHrdG3WUUGBreKAFVnMhdlPjttuUkeHbCQmAHkwzSh5dGwbrKmXGRaR4uTvfFVYzUcg++h0DkA==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.0.0.tgz",
+            "integrity": "sha512-syS1qyYCd3EPXCVSpYtefY4D9z9WZAK8hFgjeHR9PAtanybLO162Tu7o5i/nZkqRrJq0Rk8RqskQlhBPgT8eBw==",
             "requires": {
                 "@braintree/sanitize-url": "^6.0.0",
                 "cytoscape": "^3.23.0",
                 "cytoscape-cose-bilkent": "^4.1.0",
                 "cytoscape-fcose": "^2.1.0",
-                "d3": "^7.0.0",
+                "d3": "^7.4.0",
                 "dagre-d3-es": "7.0.8",
                 "dompurify": "2.4.3",
                 "elkjs": "^0.8.2",
                 "khroma": "^2.0.0",
                 "lodash-es": "^4.17.21",
-                "moment": "^2.29.4",
+                "moment-mini": "^2.29.4",
                 "non-layered-tidy-tree-layout": "^2.0.2",
                 "stylis": "^4.1.2",
                 "ts-dedent": "^2.2.0",
-                "uuid": "^9.0.0"
+                "uuid": "^9.0.0",
+                "web-worker": "^1.2.0"
             }
         },
         "micromatch": {
@@ -15816,6 +15828,11 @@
             "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
             "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
         },
+        "moment-mini": {
+            "version": "2.29.4",
+            "resolved": "https://registry.npmjs.org/moment-mini/-/moment-mini-2.29.4.tgz",
+            "integrity": "sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg=="
+        },
         "moo": {
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -17609,6 +17626,11 @@
             "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.1.1.tgz",
             "integrity": "sha512-Czi3fG883e96T4DLEPRvufrF2ydhOOW1+1a6c3gNjH2aIh50DNFBdfwh2AKoOf1rXvpvavAoA11Qdq9+BKjE0Q=="
         },
+        "web-worker": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
+            "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
+        },
         "webcomponent-qr-code": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/webcomponent-qr-code/-/webcomponent-qr-code-1.1.1.tgz",
diff --git a/web/package.json b/web/package.json
index f78aee450..bfce03bd0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -106,7 +106,7 @@
         "eslint-plugin-lit": "^1.8.2",
         "fuse.js": "^6.6.2",
         "lit": "^2.6.1",
-        "mermaid": "^9.4.0",
+        "mermaid": "^10.0.0",
         "moment": "^2.29.4",
         "prettier": "^2.8.4",
         "pyright": "^1.1.294",
diff --git a/web/src/elements/Diagram.ts b/web/src/elements/Diagram.ts
index 051e7c22f..82818c5fe 100644
--- a/web/src/elements/Diagram.ts
+++ b/web/src/elements/Diagram.ts
@@ -6,6 +6,7 @@ import mermaid from "mermaid";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { until } from "lit/directives/until.js";
 
 @customElement("ak-diagram")
 export class Diagram extends AKElement {
@@ -74,6 +75,11 @@ export class Diagram extends AKElement {
         if (!this.diagram) {
             return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
         }
-        return html`${unsafeHTML(mermaid.render("graph", this.diagram))}`;
+        return html`${until(
+            mermaid.render("graph", this.diagram).then((r) => {
+                r.bindFunctions?.(this.shadowRoot as unknown as Element);
+                return unsafeHTML(r.svg);
+            }),
+        )}`;
     }
 }