diff --git a/layout/_third-party/tags/mermaid.njk b/layout/_third-party/tags/mermaid.njk
index 9f59dc4..d551ed8 100644
--- a/layout/_third-party/tags/mermaid.njk
+++ b/layout/_third-party/tags/mermaid.njk
@@ -3,13 +3,13 @@
 <script{{ pjax }}>
 if (document.querySelectorAll('pre.mermaid').length) {
   NexT.utils.getScript('{{ url_for(mermaid_uri) }}', () => {
-    mermaid.initialize({
+    mermaid.init({
       theme    : '{{ theme.mermaid.theme }}',
       logLevel : 3,
       flowchart: { curve     : 'linear' },
       gantt    : { axisFormat: '%m/%d/%Y' },
       sequence : { actorMargin: 50 }
-    });
+    }, '.mermaid');
   }, window.mermaid);
 }
 </script>
diff --git a/scripts/tags/mermaid.js b/scripts/tags/mermaid.js
index e2a029c..04dc4f4 100644
--- a/scripts/tags/mermaid.js
+++ b/scripts/tags/mermaid.js
@@ -4,9 +4,11 @@
 
 'use strict';
 
+const { escapeHTML } = require('hexo-util');
+
 module.exports = function(args, content) {
   return `<pre class="mermaid" style="text-align: center;">
 ${args.join(' ')}
-${content}
+${escapeHTML(content)}
 </pre>`;
 };
diff --git a/test/tags/mermaid.js b/test/tags/mermaid.js
index 546e75a..359cc04 100644
--- a/test/tags/mermaid.js
+++ b/test/tags/mermaid.js
@@ -2,6 +2,8 @@
 
 require('chai').should();
 
+const { escapeHTML } = require('hexo-util');
+
 const result = `A[Hard] -->|Text| B(Round)
 B --> C{Decision}
 C -->|One| D[Result 1]
@@ -13,7 +15,7 @@ describe('mermaid', () => {
   it('default', () => {
     mermaid(['graph', 'TD'], result).should.eql(`<pre class="mermaid" style="text-align: center;">
 graph TD
-${result}
+${escapeHTML(result)}
 </pre>`);
   });
 });