Add Mermaid diagram to documentation index

Added a sequence diagram using Mermaid into the documentation index to illustrate clearer communication between Alice and Bob. Additionally, configured `pymdownx.superfences` in `mkdocs.yml` to support Mermaid custom fences for better diagram rendering.

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.

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