diff --git a/public/js/extra.js b/public/js/extra.js
index 53fdc76b5..47b5a916a 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -254,7 +254,10 @@ function replaceExtraTags (html) {
 }
 
 if (typeof window.mermaid !== 'undefined' && window.mermaid) {
-  window.mermaid.startOnLoad = false
+  window.mermaid.initialize({
+    startOnLoad: false
+  })
+
   window.mermaid.parseError = function (err, hash) {
     console.warn(err)
   }
@@ -433,22 +436,26 @@ export function finishView (view) {
   })
   // mermaid
   const mermaids = view.find('div.mermaid.raw').removeClass('raw')
-  mermaids.each((key, value) => {
+  mermaids.each(async (key, value) => {
+    const $value = $(value)
+    const $ele = $value.closest('pre')
     try {
-      var $value = $(value)
-      const $ele = $(value).closest('pre')
-
       const text = $value.text()
       // validate the syntax first
       if (window.mermaid.parse(text)) {
         $ele.addClass('mermaid')
         $ele.text(text)
         // render the diagram
-        window.mermaid.init(undefined, $ele)
+        const id = `mermaid-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+        const { svg, bindFunctions } = await window.mermaid.render(id, text, $ele[0])
+        $ele.html(svg)
+        if (bindFunctions) {
+          bindFunctions($ele[0])
+        }
       }
     } catch (err) {
       $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err.str)}</div>`)
+      $ele.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
       console.warn(err)
     }
   })
diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs
index db7d8fa9e..3384fb0b1 100644
--- a/public/views/codimd/foot.ejs
+++ b/public/views/codimd/foot.ejs
@@ -30,5 +30,6 @@
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/Safe.js" defer></script>
+<script src="<%- serverURL %>/build/mermaid/mermaid.min.js" defer></script>
 <%- include('../build/index-pack-scripts') %>
 <% } %>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index f545622dc..c4f82a5d6 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -105,6 +105,7 @@
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
 <script src="<%- serverURL %>/build/MathJax/config/Safe.js" defer></script>
+<script src="<%- serverURL %>/build/mermaid/mermaid.min.js" defer></script>
 <%- include('build/pretty-pack-scripts') %>
 <% } %>
 <%- include('shared/ga') %>
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index ca044b8d6..76bc58525 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -117,6 +117,7 @@
         <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>
         <script src="<%- serverURL %>/build/MathJax/config/TeX-AMS-MML_HTMLorMML.js" defer></script>
         <script src="<%- serverURL %>/build/MathJax/config/Safe.js" defer></script>
+        <script src="<%- serverURL %>/build/mermaid/mermaid.min.js" defer></script>
         <%- include('build/slide-pack-scripts') %>
         <% } %>
     </body>
diff --git a/webpack.common.js b/webpack.common.js
index 014ebbd8a..4c03de705 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -205,6 +205,11 @@ module.exports = {
         context: path.join(__dirname, 'node_modules/fork-awesome'),
         from: 'css',
         to: 'fork-awesome/css'
+      },
+      {
+        context: path.join(__dirname, 'node_modules/mermaid'),
+        from: 'dist/mermaid.min.js',
+        to: 'mermaid/mermaid.min.js'
       }
     ]),
     new MiniCssExtractPlugin(
@@ -295,7 +300,6 @@ module.exports = {
       'script-loader!jquery-ui-resizable',
       'bootstrap-validator',
       'expose-loader?jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?moment!moment',
       'script-loader!handlebars',
       'expose-loader?hljs!highlight.js',
@@ -340,7 +344,6 @@ module.exports = {
     'pretty-pack': [
       'babel-polyfill',
       'expose-loader?jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?moment!moment',
       'script-loader!handlebars',
       'expose-loader?hljs!highlight.js',
@@ -383,7 +386,6 @@ module.exports = {
       'imports-loader?$=jquery!jquery-mousewheel',
       'bootstrap-tooltip',
       'expose-loader?jsyaml!js-yaml',
-      'script-loader!mermaid',
       'expose-loader?moment!moment',
       'script-loader!handlebars',
       'expose-loader?hljs!highlight.js',
@@ -419,7 +421,6 @@ module.exports = {
       jqueryTextcomplete: path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
       codemirrorInlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
       ot: path.join(__dirname, 'public/vendor/ot/ot.min.js'),
-      mermaid: path.join(__dirname, 'node_modules/mermaid/dist/mermaid.min.js'),
       handlebars: path.join(__dirname, 'node_modules/handlebars/dist/handlebars.min.js'),
       'jquery-ui-resizable': path.join(__dirname, 'public/vendor/jquery-ui/jquery-ui.min.js'),
       'gist-embed': path.join(__dirname, 'node_modules/gist-embed/gist-embed.min.js'),