diff --git a/public/js/extra.js b/public/js/extra.js
index 099831ee6..6c63fb45f 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -17,6 +17,8 @@ import markdownitContainer from 'markdown-it-container'
 /* Defined regex markdown it plugins */
 import Plugin from 'markdown-it-regexp'
 
+import mermaid from 'mermaid'
+
 require('prismjs/themes/prism.css')
 require('prismjs/components/prism-wiki')
 require('prismjs/components/prism-haskell')
@@ -248,7 +250,7 @@ function replaceExtraTags (html) {
   return html
 }
 
-if (typeof window.mermaid !== 'undefined' && window.mermaid) window.mermaid.startOnLoad = false
+mermaid.startOnLoad = false
 
 // dynamic event or object binding here
 export function finishView (view) {
@@ -388,10 +390,10 @@ export function finishView (view) {
       $value = $(value)
       const $ele = $(value).closest('pre')
 
-      window.mermaid.mermaidAPI.parse($value.text())
+      mermaid.mermaidAPI.parse($value.text())
       $ele.addClass('mermaid')
       $ele.text($value.text())
-      window.mermaid.init(undefined, $ele)
+      mermaid.init(undefined, $ele)
     } catch (err) {
       let errormessage = err
       if (err.str) {
diff --git a/webpack.common.js b/webpack.common.js
index 7e047cd0c..5a6b7e138 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -248,7 +248,6 @@ module.exports = {
       'babel-polyfill',
       'bootstrap-validator',
       'expose-loader?exposes=jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?exposes=moment!moment',
       'script-loader!handlebars',
       'expose-loader?exposes=hljs!highlight.js',
@@ -284,7 +283,6 @@ module.exports = {
     'pretty-pack': [
       'babel-polyfill',
       'expose-loader?exposes=jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?exposes=moment!moment',
       'script-loader!handlebars',
       'expose-loader?exposes=hljs!highlight.js',
@@ -322,7 +320,6 @@ module.exports = {
       'imports-loader?imports=default|jquery|$!jquery-mousewheel',
       'bootstrap-tooltip',
       'expose-loader?exposes=jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?exposes=moment!moment',
       'script-loader!handlebars',
       'expose-loader?exposes=hljs!highlight.js',
@@ -348,7 +345,6 @@ module.exports = {
     modules: ['node_modules'],
     extensions: ['.js'],
     alias: {
-      mermaid: path.join(__dirname, 'node_modules/mermaid/dist/mermaid.min.js'),
       handlebars: path.join(__dirname, 'node_modules/handlebars/dist/handlebars.min.js'),
       'gist-embed': path.join(__dirname, 'node_modules/gist-embed/gist-embed.min.js'),
       'bootstrap-tooltip': path.join(__dirname, 'public/vendor/bootstrap/tooltip.min.js'),