Merge branch 'feature_add_mermaid' into 'master'

Add support of Mermaid

Closes #3711

See merge request gitlab-org/gitlab-ce!15107

3 files changed, 33 insertions, 1 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index b7ef1ecd923..d908452399c 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -70,6 +70,7 @@ import './projects_dropdown';
 import './projects_list';
 import './syntax_highlight';
 import './render_math';
+import './render_mermaid';
 import './render_gfm';
 import './right_sidebar';
 import './search';
diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js
index bcdc0fd67b8..bf6fc0ec305 100644
--- a/app/assets/javascripts/render_gfm.js
+++ b/app/assets/javascripts/render_gfm.js
@@ -2,12 +2,13 @@
 
 // Render Gitlab flavoured Markdown
 //
-// Delegates to syntax highlight and render math
+// Delegates to syntax highlight and render math & mermaid diagrams.
 //
 (function() {
   $.fn.renderGFM = function() {
     this.find('.js-syntax-highlight').syntaxHighlight();
     this.find('.js-render-math').renderMath();
+    this.find('.js-render-mermaid').renderMermaid();
     return this;
   };
 
diff --git a/app/assets/javascripts/render_mermaid.js b/app/assets/javascripts/render_mermaid.js
new file mode 100644
index 00000000000..a253601f8e8
--- /dev/null
+++ b/app/assets/javascripts/render_mermaid.js
@@ -0,0 +1,30 @@
+// Renders diagrams and flowcharts from text using Mermaid in any element with the
+// `js-render-mermaid` class.
+//
+// Example markup:
+//
+// <pre class="js-render-mermaid">
+//  graph TD;
+//    A-- > B;
+//    A-- > C;
+//    B-- > D;
+//    C-- > D;
+// </pre>
+//
+
+import Flash from './flash';
+
+$.fn.renderMermaid = function renderMermaid() {
+  if (this.length === 0) return;
+
+  import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => {
+    mermaid.initialize({
+      loadOnStart: false,
+      theme: 'neutral',
+    });
+
+    mermaid.init(undefined, this);
+  }).catch((err) => {
+    Flash(`Can't load mermaid module: ${err}`);
+  });
+};