diff --git a/content/undergraduate/curriculum.en.md b/content/undergraduate/curriculum.en.md
index c363328..6a9fe96 100644
--- a/content/undergraduate/curriculum.en.md
+++ b/content/undergraduate/curriculum.en.md
@@ -5,6 +5,7 @@ metadata: none
 toc: false
 weight: 2
 type: wide
+hasMermaid: true
 ---
 
 <!-- prettier-ignore-start -->
@@ -85,8 +86,7 @@ type: wide
 
 ## Course Prerequisites Graph
 
-```mermaid "caption=prerequisites"
-%%{ init: { 'flowchart': { 'curve': 'linear' } } }%%
+{{< svg-graph >}}
 flowchart TD
 
 classDef core fill:#0072B2,stroke:none,stroke-width:2px,color:#eee,font-weight:bolder
@@ -232,7 +232,8 @@ click CC6 href "/undergraduate/electives" "Undergraduate Electives"
 
 click HSS1 href "/undergraduate/electives" "Undergraduate Electives"
 click HSS2 href "/undergraduate/electives" "Undergraduate Electives"
-```
+{{< /svg-graph >}}
+
 
 ## Committee
 
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
index 2202d9d..2f8975a 100644
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@@ -26,4 +26,7 @@ <h5 class="mb-4">{{- .Name -}}</h5>
             {{ end }}
         </ul>
     </div>
+    {{ if .Params.hasMermaid }}
+        {{ partial "footer/optional-scripts.html" . }}
+    {{ end }}
 </footer>
diff --git a/layouts/shortcodes/svg-graph.html b/layouts/shortcodes/svg-graph.html
new file mode 100644
index 0000000..aed8f28
--- /dev/null
+++ b/layouts/shortcodes/svg-graph.html
@@ -0,0 +1,54 @@
+<!-- layouts/shortcodes/svg-graph.html -->
+<div id="graphDiv"></div>
+<style type="text/css">
+    #courseSvg {
+      width: 100%;
+      height: 80vh; /* This sets the height relative to the viewport height */
+    }
+  
+    /* Media query for mobile devices */
+    @media (max-width: 768px) {
+      #courseSvg {
+        height: 300px; /* Utilize full viewport height on smaller screens */
+        width: 100%;
+      }
+    }
+  
+    /* Optional: Additional styles for tablets */
+    @media (min-width: 769px) and (max-width: 1024px) {
+      #courseSvg {
+        height: 85vh;
+        width: 100%;
+      }
+    }
+  
+    /* Desktop-specific styling */
+    @media (min-width: 1025px) {
+      #courseSvg {
+        height: 600px;
+        width: 100%;
+      }
+    }
+  </style>
+  
+<script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: false });
+
+  const drawDiagram = async function () {
+    const element = document.querySelector('#graphDiv');
+    const graphDefinition = `{{ .Inner | safeJS }}`; // Captures content between shortcode tags
+    const { svg } = await mermaid.render('courseSvg', graphDefinition);
+    element.innerHTML = svg.replace(/( )*max-width:( 0-9\.)*px;/i, '');
+
+
+    let panZoom = svgPanZoom('#courseSvg', {
+      zoomEnabled: true,
+      controlIconsEnabled: true,
+      center: true,
+      zoomScaleSensitivity: 0.5,
+    });
+  };
+  await drawDiagram();
+</script>