Add mermaid graphs

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>

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"

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) {

static/src/scss/style.scss

@@ -250,3 +250,7 @@ p code, li code {
     vertical-align: middle;
   }
 }
+
+.mermaid {
+  font-size: $font-size-base;
+}