diff --git a/content/apage.md b/content/apage.md
index 29b6f33..ef78ffa 100644
--- a/content/apage.md
+++ b/content/apage.md
@@ -19,8 +19,34 @@ test
 
 {% end %}
 
+## My example mermaid diagram
 
+I wanted to use mermaid in this project, and it looks like this
+{% mermaid() %}
 
+classDiagram
+Animal <|-- Duck
+Animal <|-- Fish
+Animal <|-- Zebra
+Animal : +int age
+Animal : +String gender
+Animal: +isMammal()
+Animal: +mate()
+class Duck{
++String beakColor
++swim()
++quack()
+}
+class Fish{
+-int sizeInFeet
+-canEat()
+}
+class Zebra{
++bool is_wild
++run()
+}
+
+{% end %}
 
 {% row() %}
 
@@ -41,9 +67,7 @@ Finally a framework fun to be used.
 - test
 - test2
   - internet
-  - something 
+  - something
 - test3
 
-
-
 {% end %}
diff --git a/templates/page.html b/templates/page.html
index bea8136..9da7934 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -2,6 +2,9 @@
 
 {% block content %}
 
-<main class="pt-16">
+<main class="p-16">
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>mermaid.initialize({startOnLoad:true});</script>
     {{page.content | safe}}
+
  </main> {% endblock content %}
diff --git a/templates/shortcodes/mermaid.html b/templates/shortcodes/mermaid.html
new file mode 100644
index 0000000..7ddc2e9
--- /dev/null
+++ b/templates/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<div class="mermaid">
+    {{ body }}
+</div>
\ No newline at end of file