diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
index 7831e65..b8b2a82 100644
--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@@ -1,3 +1,5 @@
+import mermaid from 'mermaid/dist/mermaid';
+
 var config = {
   theme: 'default',
   fontFamily: '"Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";',
diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html
index 4238c15..c868c79 100644
--- a/layouts/partials/footer/script-footer.html
+++ b/layouts/partials/footer/script-footer.html
@@ -10,7 +10,7 @@
 {{ $katex := resources.Get "js/vendor/katex/dist/katex.js" -}}
 {{ $katexAutoRender := resources.Get "js/vendor/katex/dist/contrib/auto-render.js" -}}
 
-{{ $mermaid := resources.Get "js/vendor/mermaid/dist/mermaid.min.js" -}}
+{{ $mermaid := resources.Get "js/mermaid.js" | js.Build -}}
 
 {{ $app := resources.Get "js/app.js" -}}
 
@@ -51,12 +51,6 @@
   {{ $slice = $slice | append $katexConfig -}}
 {{ end -}}
 
-{{ if .Site.Params.options.mermaid -}}
-  {{ $mermaidConfig := resources.Get "js/mermaid.js" -}}
-  {{ $mermaidConfig := $mermaidConfig | js.Build -}}
-  {{ $slice = $slice | append $mermaidConfig -}}
-{{ end -}}
-
 {{ $js := $slice | resources.Concat "main.js" -}}
 
 {{ if eq (hugo.Environment) "development" -}}
@@ -70,10 +64,10 @@
     <script src="{{ $katex.RelPermalink }}" defer></script>
     <script src="{{ $katexAutoRender.RelPermalink }}" onload="renderMathInElement(document.body);" defer></script>
   {{ end -}}
+  <script src="{{ $js.RelPermalink }}" defer></script>
   {{ if .Site.Params.options.mermaid -}}
     <script src="{{ $mermaid.RelPermalink }}" defer></script>
   {{ end -}}
-  <script src="{{ $js.RelPermalink }}" defer></script>
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" defer></script>
   {{ end -}}
@@ -95,10 +89,10 @@
     <script src="{{ $katex.RelPermalink }}" integrity="{{ $katex.Data.Integrity }}" crossorigin="anonymous" defer></script>
     <script src="{{ $katexAutoRender.RelPermalink }}" integrity="{{ $katexAutoRender.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
+  <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ if .Site.Params.options.mermaid -}}
     <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
-  <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}