diff --git a/docs/src/js/uml.js b/docs/src/js/uml.js
index 0fa039dfc..139ef215d 100644
--- a/docs/src/js/uml.js
+++ b/docs/src/js/uml.js
@@ -12,7 +12,7 @@
* @param {string} className is the name of the class to target.
* @return {void}
*/
-export default className => {
+export default async className => {
// Custom element to encapsulate Mermaid content.
class MermaidDiv extends HTMLElement {
@@ -118,30 +118,26 @@ export default className => {
surrogate.appendChild(temp)
try {
- mermaid.mermaidAPI.render(
- `_diagram_${i}`,
- getFromCode(parentEl),
- (content, fn) => {
- const el = document.createElement("div")
- el.className = className
- el.innerHTML = content
- if (fn) {
- fn(el)
- }
+ const res = await mermaid.render(`_diagram_${i}`, getFromCode(parentEl), temp)
+ const content = res.svg
+ const fn = res.bindFunctions
+ const el = document.createElement("div")
+ el.className = className
+ el.innerHTML = content
+ if (fn) {
+ fn(el)
+ }
- // Insert the render where we want it and remove the original text source.
- // Mermaid will clean up the temporary element.
- const shadow = document.createElement("diagram-div")
- shadow.shadowRoot.appendChild(el)
- block.parentNode.insertBefore(shadow, block)
- parentEl.style.display = "none"
- shadow.shadowRoot.appendChild(parentEl)
- if (parentEl !== block) {
- block.parentNode.removeChild(block)
- }
- },
- temp
- )
+ // Insert the render where we want it and remove the original text source.
+ // Mermaid will clean up the temporary element.
+ const shadow = document.createElement("diagram-div")
+ shadow.shadowRoot.appendChild(el)
+ block.parentNode.insertBefore(shadow, block)
+ parentEl.style.display = "none"
+ shadow.shadowRoot.appendChild(parentEl)
+ if (parentEl !== block) {
+ block.parentNode.removeChild(block)
+ }
} catch (err) {} // eslint-disable-line no-empty
if (surrogate.contains(temp)) {
diff --git a/docs/src/markdown/extras/mermaid.md b/docs/src/markdown/extras/mermaid.md
index 166402575..f052457fe 100644
--- a/docs/src/markdown/extras/mermaid.md
+++ b/docs/src/markdown/extras/mermaid.md
@@ -332,7 +332,7 @@ and provide the configuration. We also have the custom loader that is runs when
end
-
+