diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..197e07f
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,8 @@
+<figure class="my-3">
+  <div class="mermaid" align="center">
+    {{ safeHTML .Inner }}
+  </div>
+  <figcaption class="text-center">
+    <small>{{ .Get "caption" }}</small>
+  </figcaption>
+</figure>
diff --git a/package.json b/package.json
index b02d61f..3bc66b3 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "jquery": "3.2.1",
     "lg-thumbnail": "1.1.0",
     "lightgallery": "1.6.4",
+    "mermaid": "7.1.2",
     "plyr": "2.0.17",
     "speedpack": "0.2.0",
     "tstatic": "1.1.0"
diff --git a/static/src/js/index.js b/static/src/js/index.js
index 35cd6e9..b06e01c 100644
--- a/static/src/js/index.js
+++ b/static/src/js/index.js
@@ -4,13 +4,14 @@ require('./jquery-global');
 require('./fa');
 require('bootstrap');
 
-
 require('lightgallery/dist/js/lightgallery');
 require('lg-thumbnail/dist/lg-thumbnail');
 
 require('plyr').setup();
 var Clipboard = require('clipboard');
 
+var mermaid = require('mermaid');
+
 
 $('.image').each(function () {  // setup div-image hybrids
   var ele = $(this);
@@ -40,6 +41,10 @@ $(document).ready(function () {
       ele.children('ul').replaceWith(ele.children('ul').children('li').children('ul'));
     }
   });
+
+  mermaid.initialize({
+    startOnLoad: true
+  });
 });
 
 $('.navbar-brand').on('click', function (event) {
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index b89804a..83db069 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -250,3 +250,7 @@ p code, li code {
     vertical-align: middle;
   }
 }
+
+.mermaid {
+  font-size: $font-size-base;
+}