diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json
index 5eefb1aa23..6112b1f13c 100644
--- a/scm-ui/ui-components/package.json
+++ b/scm-ui/ui-components/package.json
@@ -92,7 +92,7 @@
     "remark-rehype": "^8.0.0",
     "tabbable": "^5.2.1",
     "unified": "^9.2.1",
-    "mermaid": "^9.1.4"
+    "mermaid": "^8.14.0"
   },
   "babel": {
     "presets": [
diff --git a/scm-ui/ui-components/src/markdown/MermaidCodeRenderer.tsx b/scm-ui/ui-components/src/markdown/MermaidCodeRenderer.tsx
index 29a6c6ba74..986a893676 100644
--- a/scm-ui/ui-components/src/markdown/MermaidCodeRenderer.tsx
+++ b/scm-ui/ui-components/src/markdown/MermaidCodeRenderer.tsx
@@ -23,32 +23,40 @@
  */
 
 import { extensionPoints } from "@scm-manager/ui-extensions";
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import mermaid from "mermaid";
+import ErrorNotification from "../ErrorNotification";
 import Loading from "../Loading";
 
 const MermaidCodeRenderer: FC<extensionPoints.MarkdownCodeRenderer["props"]> = ({ value }) => {
-  const [content, setContent] = useState<string>();
-  const ref = useRef<HTMLDivElement>(null);
+  const [content, setContent] = useState<string>("Loading...");
+  const [error, setError] = useState<Error>();
+  const id = useRef(`MERMAID-${Date.now()}`);
+  const dangerousHtmlObject = useMemo(() => ({ __html: content }), [content]);
 
   useEffect(() => {
     try {
-      mermaid.render("MERMAID", value, (svgCode, bindFunctions) => {
+      setError(undefined);
+      setContent("");
+      mermaid.render(id.current, value, (svgCode) => {
         setContent(svgCode);
-        if (ref.current) {
-          bindFunctions(ref.current);
-        }
       });
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      // @ts-ignore mermaid error
-      setContent(e.str);
+      if (e instanceof Error) {
+        setError(e);
+      } else {
+        // @ts-ignore Unknown mermaid error
+        setError(new Error(e.str));
+      }
     }
   }, [value]);
 
+  if (error) {
+    return <ErrorNotification error={error} />;
+  }
+
   if (content) {
-    return <div ref={ref} className="mermaid" dangerouslySetInnerHTML={{ __html: content }} />;
+    return <figure className="mermaid" dangerouslySetInnerHTML={dangerousHtmlObject} />;
   }
 
   return <Loading />;
diff --git a/yarn.lock b/yarn.lock
index ba1de9a7c5..9117aaf629 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1207,10 +1207,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@braintree/sanitize-url@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.0.tgz#fe364f025ba74f6de6c837a84ef44bdb1d61e68f"
-  integrity sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==
+"@braintree/sanitize-url@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
+  integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
 
 "@chromaui/localtunnel@^2.0.3":
   version "2.0.4"
@@ -8368,10 +8368,10 @@ domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-dompurify@2.3.10:
-  version "2.3.10"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.10.tgz#901f7390ffe16a91a5a556b94043314cd4850385"
-  integrity sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g==
+dompurify@2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.5.tgz#c83ed5a3ae5ce23e52efe654ea052ffb358dd7e3"
+  integrity sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ==
 
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
@@ -12818,10 +12818,10 @@ keygrip@~1.1.0:
   dependencies:
     tsscmp "1.0.6"
 
-khroma@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.0.0.tgz#7577de98aed9f36c7a474c4d453d94c0d6c6588b"
-  integrity sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==
+khroma@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-1.4.1.tgz#ad6a5b6a972befc5112ce5129887a1a83af2c003"
+  integrity sha512-+GmxKvmiRuCcUYDgR7g5Ngo0JEDeOsGdNONdU2zsiBQaK4z19Y2NvXqfEDE0ZiIrg45GTZyAnPLVsLZZACYm3Q==
 
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
@@ -13745,18 +13745,18 @@ merge2@^1.2.3, merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@^9.1.4:
-  version "9.1.4"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.1.4.tgz#05113b14dabe6b2ce5abd7452d10d4309cc0467f"
-  integrity sha512-QgQTpIIzJfV/Ob7FZTDzxmWjFzCciij4C8RbbQbamsadf2gHrNrfqAoWLF6ALfQlW5ZqOefvlogDdWcFZRnifg==
+mermaid@^8.14.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.14.0.tgz#ef589b0537f56d6340069070edb51719a4faba00"
+  integrity sha512-ITSHjwVaby1Li738sxhF48sLTxcNyUAoWfoqyztL1f7J6JOLpHOuQPNLBb6lxGPUA0u7xP9IRULgvod0dKu35A==
   dependencies:
-    "@braintree/sanitize-url" "^6.0.0"
+    "@braintree/sanitize-url" "^3.1.0"
     d3 "^7.0.0"
     dagre "^0.8.5"
     dagre-d3 "^0.6.4"
-    dompurify "2.3.10"
+    dompurify "2.3.5"
     graphlib "^2.1.8"
-    khroma "^2.0.0"
+    khroma "^1.4.1"
     moment-mini "^2.24.0"
     stylis "^4.0.10"