diff --git a/docs/advanced/routing.mdx b/docs/advanced/routing.mdx
index 4507ab724..d5bb44fa1 100644
--- a/docs/advanced/routing.mdx
+++ b/docs/advanced/routing.mdx
@@ -28,24 +28,37 @@ Each content plugin defines a `routeBasePath`, which tells Docusaurus **where to
 Here’s how these routes connect in the URL hierarchy:
 
 ```mermaid
-graph LR;
-    A(["https://codeharborhub.github.io/"])
-    B(["/base-url/"])
-    C(["/docs/"])
-    D(["/blog/"])
-    E(["/"])
-    F["Docs Routes"]
-    G["Blog Routes"]
-    H["Page Routes"]
-    A---B;
-    B---C;
-    B---D;
-    B---E;
-    C---F;
-    D---G;
-    E---H;
+graph LR
+    A(["CodeHarborHub 🌐"])
+    B(["Base URL"])
+    C(["Docs"])
+    D(["Blog"])
+    E(["Home Page"])
+    F["📘 Docs Routes"]
+    G["📰 Blog Routes"]
+    H["🧭 Page Routes"]
+
+    A --- B
+    B --- C
+    B --- D
+    B --- E
+    C --- F
+    D --- G
+    E --- H
+
+    %% Clickable links
+    click A "https://codeharborhub.github.io/" "Visit CodeHarborHub"
+    click B "https://codeharborhub.github.io/base-url/" "Base URL"
+    click C "https://codeharborhub.github.io/docs/" "Docs Section"
+    click D "https://codeharborhub.github.io/blog/" "Blog Section"
+    click E "https://codeharborhub.github.io/" "Homepage"
+    click F "https://codeharborhub.github.io/docs/" "Docs Routes"
+    click G "https://codeharborhub.github.io/blog/" "Blog Routes"
+    click H "https://codeharborhub.github.io/" "Page Routes"
 ```
 
+<br />
+
 When a user visits `/docs/configuration`, Docusaurus finds the `/docs` branch, and then loads the corresponding document route.
 
 You can fully customize your route structure. For instance, setting `routeBasePath: '/'` in **Docs-only mode** removes the `/docs` prefix while keeping all other plugins intact.