web: bump mermaid from 9.4.0 to 10.0.0 in /web (#4752)

* web: bump mermaid from 9.4.0 to 10.0.0 in /web

Bumps [mermaid](https://github.com/mermaid-js/mermaid) from 9.4.0 to 10.0.0.
- [Release notes](https://github.com/mermaid-js/mermaid/releases)
- [Changelog](https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/mermaid-js/mermaid/compare/v9.4.0...v10.0.0)

---
updated-dependencies:
- dependency-name: mermaid
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* update diagram element for mermaid v10

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

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);
+            }),
+        )}`;
     }
 }