diff --git a/assets/css/custom.css b/assets/css/custom.css
index 2f245c1..197bba7 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -286,3 +286,9 @@ blockquote.alert-warning {
     font-style: italic;
     font-size: 0.9rem;
 }
+
+/* background color of mermaid diagrams */
+.content pre.mermaid{
+    color: var(--code-block-color);
+    background-color: var(--bkg-color) !important;
+}
diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..5d44d83
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..1da439c
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,18 @@
+{{ partial "head/head.html" . }}
+    <body class="{{if .Site.Params.layoutReverse}}layout-reverse {{end}}{{if .Site.Params.dark_mode}}dark-theme{{end}}">
+        <div class="wrapper">
+            {{ partial "sidebar/sidebar.html" . }}
+            <main class="content container">
+                {{ block "main" . -}}{{- end }}
+            </main>
+            {{ block "sidebar" . }}{{ end }}
+        </div>
+
+        {{ if .Store.Get "hasMermaid" }}
+        <script type="module">
+            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+            mermaid.initialize({ startOnLoad: true });
+        </script>
+        {{ end }}
+    </body>
+</html>
