Upgraded Mermaid to 10.6.1

Upgrade to Mermaid 10.6.1

material/templates/base.html

@@ -252,7 +252,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.6c14ae12.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.50eae0f4.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

src/templates/assets/javascripts/components/content/mermaid/index.ts

@@ -69,7 +69,7 @@ let sequence = 0
  */
 function fetchScripts(): Observable<void> {
   return typeof mermaid === "undefined" || mermaid instanceof Element
-    ? watchScript("https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js")
+    ? watchScript("https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js")
     : of(undefined)
 }
 
@@ -104,7 +104,7 @@ export function mountMermaid(
     )
 
   /* Render diagram */
-  mermaid$.subscribe(() => {
+  mermaid$.subscribe(async () => {
     el.classList.add("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
     const id = `__mermaid_${sequence++}`
 
@@ -113,16 +113,15 @@ export function mountMermaid(
     const text = el.textContent
 
     /* Render and inject diagram */
-    mermaid.mermaidAPI.render(id, text, (svg: string, fn: Function) => {
+    const { svg, fn } = await mermaid.render(id, text)
 
-      /* Create a shadow root and inject diagram */
+    /* Create a shadow root and inject diagram */
-      const shadow = host.attachShadow({ mode: "closed" })
+    const shadow = host.attachShadow({ mode: "closed" })
-      shadow.innerHTML = svg
+    shadow.innerHTML = svg
 
-      /* Replace code block with diagram and bind functions */
+    /* Replace code block with diagram and bind functions */
-      el.replaceWith(host)
+    el.replaceWith(host)
-      fn?.(shadow)
+    fn?.(shadow)
-    })
   })
 
   /* Create and return component */