fix: update mermaid diagram rendering in extra.js to use new API

- Refactored the mermaid rendering logic to utilize the latest API for generating diagrams.
- Improved error handling by displaying the error message directly instead of using a string property.
- Ensured that the diagram's HTML is updated correctly after rendering.

Signed-off-by: Yukai Huang <[email protected]>

Author: Yukaii

public/js/extra.js

@@ -437,23 +437,25 @@ export function finishView (view) {
   // mermaid
   const mermaids = view.find('div.mermaid.raw').removeClass('raw')
   mermaids.each(async (key, value) => {
+    const $value = $(value)
+    const $ele = $value.closest('pre')
     try {
-      var $value = $(value)
-      const $ele = $(value).closest('pre')
-
       const text = $value.text()
       // validate the syntax first
       if (window.mermaid.parse(text)) {
         $ele.addClass('mermaid')
         $ele.text(text)
         // render the diagram
-        await window.mermaid.run({
-          nodes: [$ele[0]]
-        })
+        const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+        const { svg, bindFunctions } = await window.mermaid.render(id, text, $ele[0])
+        $ele.html(svg)
+        if (bindFunctions) {
+          bindFunctions($ele[0])
+        }
       }
     } catch (err) {
       $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err.str)}</div>`)
+      $ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
       console.warn(err)
     }
   })