diff --git a/_includes/head.html b/_includes/head.html
index 4e448bd56a..17aac581ad 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -76,6 +76,8 @@
   {%- endif -%}
   {%- include analytics/feedback.html -%}
 
+  {% include mermaid.html %}
+
   {%- comment -%}
   preload fonts: https://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/
   we only preload the "woff2" variants, as older formats (woff, eot) are only used
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
new file mode 100644
index 0000000000..d838f2fce8
--- /dev/null
+++ b/_includes/mermaid.html
@@ -0,0 +1,7 @@
+<script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: false });
+    await mermaid.run({
+        querySelector: '.language-mermaid',
+    });
+</script>