diff --git a/layout/_third-party/tags/mermaid.njk b/layout/_third-party/tags/mermaid.njk
index 004b7f8..519db56 100644
--- a/layout/_third-party/tags/mermaid.njk
+++ b/layout/_third-party/tags/mermaid.njk
@@ -1,6 +1,6 @@
 {%- if theme.mermaid.enable %}
 <script{{ pjax }}>
-if (document.querySelectorAll('pre.mermaid').length) {
+if (document.querySelectorAll('.mermaid').length) {
   NexT.utils.getScript('{{ theme.vendors.mermaid }}', () => {
     mermaid.init({
       theme    : '{{ theme.mermaid.theme }}',
diff --git a/scripts/tags/mermaid.js b/scripts/tags/mermaid.js
index 04dc4f4..ab3546a 100644
--- a/scripts/tags/mermaid.js
+++ b/scripts/tags/mermaid.js
@@ -7,8 +7,8 @@
 const { escapeHTML } = require('hexo-util');
 
 module.exports = function(args, content) {
-  return `<pre class="mermaid" style="text-align: center;">
+  return `<div class="mermaid">
 ${args.join(' ')}
 ${escapeHTML(content)}
-</pre>`;
+</div>`;
 };
diff --git a/source/css/_common/scaffolding/tags/mermaid.styl b/source/css/_common/scaffolding/tags/mermaid.styl
new file mode 100644
index 0000000..f40cf90
--- /dev/null
+++ b/source/css/_common/scaffolding/tags/mermaid.styl
@@ -0,0 +1,4 @@
+.mermaid {
+  margin-bottom: 20px;
+  text-align: center;
+}
diff --git a/source/css/_common/scaffolding/tags/tags.styl b/source/css/_common/scaffolding/tags/tags.styl
index 3093eb4..47620d5 100644
--- a/source/css/_common/scaffolding/tags/tags.styl
+++ b/source/css/_common/scaffolding/tags/tags.styl
@@ -7,3 +7,5 @@
 @import 'note' if (hexo-config('note.style') != 'disabled');
 
 @import 'pdf' if (hexo-config('pdf.enable'));
+
+@import 'mermaid' if (hexo-config('mermaid.enable'));
diff --git a/test/tags/mermaid.js b/test/tags/mermaid.js
index 359cc04..7706249 100644
--- a/test/tags/mermaid.js
+++ b/test/tags/mermaid.js
@@ -13,9 +13,9 @@ describe('mermaid', () => {
   const mermaid = require('../../scripts/tags/mermaid');
 
   it('default', () => {
-    mermaid(['graph', 'TD'], result).should.eql(`<pre class="mermaid" style="text-align: center;">
+    mermaid(['graph', 'TD'], result).should.eql(`<div class="mermaid">
 graph TD
 ${escapeHTML(result)}
-</pre>`);
+</div>`);
   });
 });