diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
new file mode 100644
index 0000000..2ed7001
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<div class="mermaid">
+    {{- .Inner | safeHTML }}
+</div>
+{{ .Page.Store.Set "hasMermaid" true }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3d13f07..4dc84f4 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -19,5 +19,20 @@
     </main>
     {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
 </body>
+{{ if .Page.Store.Get "hasMermaid" }}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+{{ end }}
+{{/*  {{ if .Page.Store.Get "hasChart" }}
+<script
+    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
+    integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+></script>
+{{ end }}  */}}
+
 
 </html>
diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html
new file mode 100644
index 0000000..be1aa04
--- /dev/null
+++ b/layouts/shortcodes/chart.html
@@ -0,0 +1,17 @@
+<div>
+    <h1>TEST</h1>
+    <canvas id='{{ .Get "id"}}' width='{{ .Get "width" }}' height='{{ .Get "height" }}'></canvas>
+    <script
+        src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
+        integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer">
+    </script>
+    <script>
+        (function () {
+            var ctx = document.getElementById('{{ .Get "id"}}');
+            var myChart = new Chart(ctx, {{ index .Site.Data (split (.Get "data") ".") }});
+        })();
+    </script>
+</div>
+{{/*  {{ .Page.Store.Set "hasChart" true }}  */}}