1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/lib/mermaid.js b/app/assets/javascripts/lib/mermaid.js
new file mode 100644
index 00000000000..d621c9ddf9e
--- /dev/null
+++ b/app/assets/javascripts/lib/mermaid.js
@@ -0,0 +1,61 @@
+import mermaid from 'mermaid';
+import { getParameterByName } from '~/lib/utils/url_utility';
+
+const setIframeRenderedSize = (h, w) => {
+  const { origin } = window.location;
+  window.parent.postMessage({ h, w }, origin);
+};
+
+const drawDiagram = (source) => {
+  const element = document.getElementById('app');
+  const insertSvg = (svgCode) => {
+    element.innerHTML = svgCode;
+
+    const height = parseInt(element.firstElementChild.getAttribute('height'), 10);
+    const width = parseInt(element.firstElementChild.style.maxWidth, 10);
+    setIframeRenderedSize(height, width);
+  };
+  mermaid.mermaidAPI.render('mermaid', source, insertSvg);
+};
+
+const darkModeEnabled = () => getParameterByName('darkMode') === 'true';
+
+const initMermaid = () => {
+  let theme = 'neutral';
+
+  if (darkModeEnabled()) {
+    theme = 'dark';
+  }
+
+  mermaid.initialize({
+    // mermaid core options
+    mermaid: {
+      startOnLoad: false,
+    },
+    // mermaidAPI options
+    theme,
+    flowchart: {
+      useMaxWidth: true,
+      htmlLabels: true,
+    },
+    secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize', 'htmlLabels'],
+    securityLevel: 'strict',
+  });
+};
+
+const addListener = () => {
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      drawDiagram(event.data);
+    },
+    false,
+  );
+};
+
+addListener();
+initMermaid();
+export default {};