diff --git a/docs/index.md b/docs/index.md
index 6c67e4c..636233b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -9,6 +9,12 @@
 
 [Presentation slides](https://docs.google.com/presentation/d/1Ajv9MYQQ011_Y4r1W4I6Y-6XP_faFF0317Zkn2XupMw/edit?usp=sharing) 📊
 
+```mermaid
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+```
+
+
 ## Introduction and Overview
 
 - 🎬 Lecture: Introduction to Django and Django Rest Framework, and overview of API development.
diff --git a/mkdocs.yml b/mkdocs.yml
index 7cf7e2b..788e0b1 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -51,9 +51,13 @@ markdown_extensions:
       generic: true
   - footnotes
   - pymdownx.details
-  - pymdownx.superfences
   - pymdownx.mark
   - attr_list
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
   - pymdownx.emoji:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
       emoji_generator: !!python/name:material.extensions.emoji.to_svg