1 files changed, 17 insertions, 2 deletions
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index 5b5148a850b..f5b2d266c18 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { once } from 'lodash';
+import { once, countBy } from 'lodash';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import { darkModeEnabled } from '~/lib/utils/color_utils';
 import { __, sprintf } from '~/locale';
@@ -22,6 +22,8 @@ import { __, sprintf } from '~/locale';
 const MAX_CHAR_LIMIT = 2000;
 // Max # of mermaid blocks that can be rendered in a page.
 const MAX_MERMAID_BLOCK_LIMIT = 50;
+// Max # of `&` allowed in Chaining of links syntax
+const MAX_CHAINING_OF_LINKS_LIMIT = 30;
 // Keep a map of mermaid blocks we've already rendered.
 const elsProcessingMap = new WeakMap();
 let renderedMermaidBlocks = 0;
@@ -64,6 +66,18 @@ function importMermaidModule() {
     });
 }
 
+function shouldLazyLoadMermaidBlock(source) {
+  /**
+   * If source contains `&`, which means that it might
+   * contain Chaining of links a new syntax in Mermaid.
+   */
+  if (countBy(source)['&'] > MAX_CHAINING_OF_LINKS_LIMIT) {
+    return true;
+  }
+
+  return false;
+}
+
 function fixElementSource(el) {
   // Mermaid doesn't like `<br />` tags, so collapse all like tags into `<br>`, which is parsed correctly.
   const source = el.textContent.replace(/<br\s*\/>/g, '<br>');
@@ -128,7 +142,8 @@ function renderMermaids($els) {
         if (
           (source && source.length > MAX_CHAR_LIMIT) ||
           renderedChars > MAX_CHAR_LIMIT ||
-          renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT
+          renderedMermaidBlocks >= MAX_MERMAID_BLOCK_LIMIT ||
+          shouldLazyLoadMermaidBlock(source)
         ) {
           const html = `
           <div class="alert gl-alert gl-alert-warning alert-dismissible lazy-render-mermaid-container js-lazy-render-mermaid-container fade show" role="alert">