diff --git a/README.md b/README.md
index dc32f39..ea28b2d 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ This theme is based on Hugo theme [hugo-paper](https://github.com/nanxiaobei/hug
 - SEO Friendly
 - Comments using [Giscus](https://giscus.app/)
 - Mathematical notations using [KaTeX](https://katex.org/)
+- Diagrams and charts using [Mermaid](https://mermaid.js.org/)
 
 ## Installation
 
diff --git a/content/markdown-syntax.md b/content/markdown-syntax.md
index 18e61cd..d7fdce3 100644
--- a/content/markdown-syntax.md
+++ b/content/markdown-syntax.md
@@ -4,6 +4,8 @@ date = "2019-03-11"
 description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
 [taxonomies]
 tags = ["markdown", "css", "html"]
+[extra]
+mermaid = true
 +++
 
 This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Zola theme.
@@ -128,3 +130,19 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
 
 Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Mermaid
+
+{% mermaid() %}
+sequenceDiagram
+participant Alice
+participant Bob
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts <br/>prevail!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+{% end %}
diff --git a/static/main.css b/static/main.css
index 790b808..3b24ba8 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1176,6 +1176,10 @@ body {
   margin-bottom: 0.375rem;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-16 {
   margin-bottom: 4rem;
 }
@@ -1232,10 +1236,6 @@ body {
   margin-top: 4rem;
 }
 
-.mb-12 {
-  margin-bottom: 3rem;
-}
-
 .block {
   display: block;
 }
@@ -1415,6 +1415,11 @@ body {
   background-color: rgb(0 0 0 / 3%);
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-white\/50 {
   background-color: rgb(255 255 255 / 0.5);
 }
@@ -1439,6 +1444,11 @@ body {
   padding: 1.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1479,11 +1489,6 @@ body {
   padding-bottom: 1rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1504,6 +1509,10 @@ body {
   padding-left: 0.75rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1516,18 +1525,6 @@ body {
   padding-top: 8rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
-.pl-6 {
-  padding-left: 1.5rem;
-}
-
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .text-center {
   text-align: center;
 }
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 8b8d048..72058db 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -56,6 +56,14 @@
   {% endif %}
   <!---->
 
+  <!-- Mermaid -->
+  {% if page.extra.mermaid %}
+  <script type="module">
+    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+  {% endif %}
+
   <!-- Favicon -->
   <link rel="icon" href="{{ get_url(path=`favicon.ico`) }}" />
   <link rel="apple-touch-icon" href="{{ get_url(path=`apple-touch-icon.png`) }}" />
diff --git a/templates/shortcodes/mermaid.html b/templates/shortcodes/mermaid.html
new file mode 100644
index 0000000..79b7a2f
--- /dev/null
+++ b/templates/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<pre class="mermaid bg-white">
+  {{ body }}
+</pre>