diff --git a/docs/templates/html/partials/scripts.tmpl.partial b/docs/templates/html/partials/scripts.tmpl.partial
new file mode 100644
index 0000000..8f25392
--- /dev/null
+++ b/docs/templates/html/partials/scripts.tmpl.partial
@@ -0,0 +1,15 @@
+<!-- Mermaid -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
+<script type="text/javascript" src="{{_rel}}styles/docfx.vendor.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/docfx.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/main.js"></script>
+<script type="text/javascript" src="https://unpkg.com/mermaid@9.1.3/dist/mermaid.min.js"
+        integrity="sha384-LnGjpNDrP4cp7MIk4CpRa/lPNclrf839ryYVFx1T1mPSV3RGAZ7nlBa7pqcyGY/K" 
+        crossorigin="anonymous"></script>
+<!-- Initialize Mermaid -->
+<script>
+    mermaid.initialize({
+        startOnLoad: false
+    });
+    mermaid.init(undefined, ".lang-mermaid");
+</script>
\ No newline at end of file
diff --git a/docs/templates/html/styles/main.css b/docs/templates/html/styles/main.css
index e359389..0619227 100644
--- a/docs/templates/html/styles/main.css
+++ b/docs/templates/html/styles/main.css
@@ -98,4 +98,20 @@
 
 summary {
   display: list-item;
+}
+
+pre:has(> .lang-mermaid) {
+  background-color: transparent;
+}
+
+.lang-mermaid, .label {
+  line-height: unset;
+  font-size: unset;
+  font-weight: unset;
+}
+
+.lang-mermaid, hr {
+  margin-top: unset;
+  margin-bottom: unset;
+  border-color: unset;
 }
\ No newline at end of file