diff options
author | Phil Hughes <me@iamphill.com> | 2017-11-22 11:00:12 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-11-22 11:00:12 +0000 |
commit | d7527d73b17e41f949c609380aeffc837b80652e (patch) | |
tree | 8f465bb688d59063c85e9689241e65137cf6cc96 /app | |
parent | 0efa7e24f22abd1dc04c165f31e7b77b0eb30ed4 (diff) | |
parent | 131e74d10dafbf2b781ab5d5517e42a18e20a587 (diff) | |
download | gitlab-ce-d7527d73b17e41f949c609380aeffc837b80652e.tar.gz |
Merge branch 'feature_add_mermaid' into 'master'
Add support of Mermaid
Closes #3711
See merge request gitlab-org/gitlab-ce!15107
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/main.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/render_gfm.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/render_mermaid.js | 30 |
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}`); + }); +}; |