diff --git a/exampleSite/config/_default/module.toml b/exampleSite/config/_default/module.toml
index 39ccf30..39cb6b4 100644
--- a/exampleSite/config/_default/module.toml
+++ b/exampleSite/config/_default/module.toml
@@ -94,3 +94,6 @@ path = "github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager"
 
 # [[imports]]
 # path = "github.com/gethugothemes/hugo-modules/seo-tools/counter-analytics"
+
+[[imports]]
+path = "github.com/hugomods/mermaid"
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index c7786cd..0992553 100755
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -85,6 +85,10 @@ expire_days = 60
 content = "This site uses cookies. By continuing to use this website, you agree to their use."
 button = "I Accept"
 
+# diagrams
+[mermaid]
+js_url = 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs'
+
 ######################## sidebar widgets #########################
 [widgets]
 sidebar = ["categories", "tags"]
diff --git a/exampleSite/content/english/pages/elements.md b/exampleSite/content/english/pages/elements.md
index 269ddbb..0734549 100755
--- a/exampleSite/content/english/pages/elements.md
+++ b/exampleSite/content/english/pages/elements.md
@@ -192,6 +192,15 @@ s = "Python syntax highlighting"
 print s
 ```
 
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -- Yes --> C[OK]
+    C --> D[Rethink]
+    D --> B
+    B -- No ----> E[End]
+```
+
 <hr>
 
 ### Blockquote
diff --git a/exampleSite/go.mod b/exampleSite/go.mod
index 9f1a275..2fd1ed0 100644
--- a/exampleSite/go.mod
+++ b/exampleSite/go.mod
@@ -26,5 +26,6 @@ require (
 	github.com/gethugothemes/hugo-modules/tab v0.0.0-20240504032439-79fc09d96848 // indirect
 	github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20240504032439-79fc09d96848 // indirect
 	github.com/gethugothemes/hugo-modules/videos v0.0.0-20240504032439-79fc09d96848 // indirect
+  github.com/hugomods/mermaid v0.1.1 // indirect
 	github.com/zeon-studio/hugoplate v0.0.0-20240513062835-d4274ad7e3df // indirect
 )
diff --git a/layouts/about/list.html b/layouts/about/list.html
index b338f21..8205241 100644
--- a/layouts/about/list.html
+++ b/layouts/about/list.html
@@ -3,7 +3,7 @@
     <div class="container">
       <div class="row justify-center">
         <div class="md:col-10 lg:col-7 text-center">
-          {{ partial "image" (dict "Src" .Params.image "Alt" .Title "Class" "mx-auto mb-6" "Size" "200x200") }}
+          {{ partial "image" (dict "Src" .Params.image "Context" .Page "Alt" .Title "Class" "mx-auto mb-6" "Size" "200x200") }}
           <h2 class="h3 mb-6">{{ .Title }}</h2>
           <div class="content">{{ .Content }}</div>
         </div>
diff --git a/layouts/authors/single.html b/layouts/authors/single.html
index 36cd1b0..18c3601 100755
--- a/layouts/authors/single.html
+++ b/layouts/authors/single.html
@@ -6,7 +6,7 @@
         <div class="lg:col-4 text-center">
           {{ $image:= .Params.image }}
           {{ if $image }}
-            {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "mx-auto" "Size" "200x200") }}
+            {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mx-auto" "Size" "200x200") }}
           {{ else if .Params.Email }}
             <img
               class="mx-auto"
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 87dcbfc..283acba 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -6,7 +6,7 @@
           {{ $image:= .Params.image }}
           {{ if $image }}
             <div class="mb-10">
-              {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "w-full rounded") }}
+              {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full rounded") }}
             </div>
           {{ end }}
           <h1 class="h2 mb-4">
@@ -41,6 +41,7 @@
             </li>
           </ul>
           <div class="content mb-10">
+            {{ partial "toc.html" (dict "Class" "blog" "Collapsed" false "TableOfContents" .TableOfContents ) }}
             {{ .Content }}
           </div>
           <div class="row items-start justify-between">
diff --git a/layouts/partials/components/author-card.html b/layouts/partials/components/author-card.html
index 23988af..f28f6d5 100755
--- a/layouts/partials/components/author-card.html
+++ b/layouts/partials/components/author-card.html
@@ -2,7 +2,7 @@
   class="bg-theme-light dark:bg-darkmode-theme-light rounded p-8 text-center">
   {{ $image:= .Params.image }}
   {{ if $image }}
-    {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "mx-auto mb-6 rounded" "size" "120x120") }}
+    {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mx-auto mb-6 rounded" "size" "120x120") }}
   {{ else if .Params.Email }}
     <img
       class="mx-auto mb-6 rounded"
diff --git a/layouts/partials/components/blog-card.html b/layouts/partials/components/blog-card.html
index d0d5266..6b85691 100644
--- a/layouts/partials/components/blog-card.html
+++ b/layouts/partials/components/blog-card.html
@@ -1,7 +1,7 @@
 <div class="bg-body dark:bg-darkmode-body">
   {{ $image:= .Params.image }}
   {{ if $image }}
-    {{ partial "image" (dict "Src" $image "Alt" .Title "Class" "mb-6 w-full rounded") }}
+    {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mb-6 w-full rounded") }}
   {{ end }}
   <h4 class="mb-3">
     <a href="{{ .RelPermalink }}">
diff --git a/layouts/partials/essentials/head.html b/layouts/partials/essentials/head.html
index a14796b..bb7b1a7 100755
--- a/layouts/partials/essentials/head.html
+++ b/layouts/partials/essentials/head.html
@@ -56,3 +56,6 @@
 
 <!-- Crisp Chat -->
 {{/* {{ partialCached "crisp-chat.html" . }} */}}
+
+<!-- Mermaid -->
+{{ partial "mermaid/assets/js" . }}