diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index af3faed..d9ea68b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,6 +5,9 @@
     <!------ ADD COMMON HEADERS -------->
     {{- partial "header.html" . -}}
     {{ template "_internal/opengraph.html" . }}
+    {{ if site.Params.features.mermaid.enabled}}
+      {{ partial "mermaid.html" . }}
+    {{ end }}
 
     <!------ ADD PAGE SPECIFIC HEADERS ------->
     {{ block "header" . }} {{ end }}
diff --git a/layouts/partials/mermaid.html b/layouts/partials/mermaid.html
new file mode 100644
index 0000000..6f60a70
--- /dev/null
+++ b/layouts/partials/mermaid.html
@@ -0,0 +1,2 @@
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..287bc38
--- /dev/null
+++ b/layouts/shortcodes/mermaid.html
@@ -0,0 +1,2 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">{{ safeHTML .Inner }}</div>