diff --git a/layouts/partials/article/components/footer.html b/layouts/partials/article/components/footer.html
index 6853921..e6ccf75 100644
--- a/layouts/partials/article/components/footer.html
+++ b/layouts/partials/article/components/footer.html
@@ -16,4 +16,9 @@
         </span>
     </section>
     {{- end -}}
+
+    <!-- Add mermaid min js file -->
+    {{ if (.Params.mermaid) }}
+    {{ partial "mermaid.html" }}
+    {{ end }}
 </footer>
diff --git a/layouts/partials/mermaid.html b/layouts/partials/mermaid.html
new file mode 100644
index 0000000..a09805a
--- /dev/null
+++ b/layouts/partials/mermaid.html
@@ -0,0 +1,12 @@
+<script
+  type="application/javascript"
+  src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"
+></script>
+<script>
+  var config = {
+    startOnLoad: true,
+    theme:'{{ if site.Params.mermaid.theme }}{{ site.Params.mermaid.theme }}{{ else }}dark{{ end }}',
+    align:'{{ if site.Params.mermaid.align }}{{ site.Params.mermaid.align }}{{ else }}center{{ end }}',
+  };
+  mermaid.initialize(config);
+</script>
\ No newline at end of file
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..ca78f87
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1 @@
+<div class="mermaid">{{.Inner}}</div>
\ No newline at end of file