Add latest changes from gitlab-org/gitlab@master

1 files changed, 12 insertions, 6 deletions

diff --git a/app/assets/javascripts/lib/mermaid.js b/app/assets/javascripts/lib/mermaid.js
index c72561ce69d..a119a33b0d7 100644
--- a/app/assets/javascripts/lib/mermaid.js
+++ b/app/assets/javascripts/lib/mermaid.js
@@ -1,4 +1,5 @@
 import mermaid from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
 import { getParameterByName } from '~/lib/utils/url_utility';
 
 const setIframeRenderedSize = (h, w) => {
@@ -12,11 +13,10 @@ const drawDiagram = (source) => {
     // eslint-disable-next-line no-unsanitized/property
     element.innerHTML = svgCode;
 
-    const height = parseInt(element.firstElementChild.getAttribute('height'), 10);
-    const width = parseInt(element.firstElementChild.style.maxWidth, 10);
+    const { width, height } = element.firstElementChild.viewBox.baseVal;
     setIframeRenderedSize(height, width);
   };
-  mermaid.mermaidAPI.render('mermaid', source, insertSvg);
+  mermaid.mermaidAPI.renderAsync('mermaid', source, insertSvg);
 };
 
 const darkModeEnabled = () => getParameterByName('darkMode') === 'true';
@@ -56,7 +56,13 @@ const addListener = () => {
     false,
   );
 };
-
-addListener();
-initMermaid();
+mermaid
+  .registerExternalDiagrams([mindmap])
+  .then(() => {
+    addListener();
+    initMermaid();
+  })
+  .catch((error) => {
+    throw error;
+  });
 export default {};