diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html
index 676a6d83bd..43e379a091 100644
--- a/layouts/_default/_markup/render-codeblock-mermaid.html
+++ b/layouts/_default/_markup/render-codeblock-mermaid.html
@@ -1,5 +1,6 @@
 {{- partial "shortcodes/mermaid.html" (dict
-  "page"    .Page
-  "content" .Inner
-  "align"  (index .Attributes "align")
+  "page"       .Page
+  "attributes" .Attributes
+  "content"    .Inner
+  "align"      (index .Attributes "align")
 ) }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/mermaid.html b/layouts/partials/shortcodes/mermaid.html
index 3130310c9a..ff11e7a512 100644
--- a/layouts/partials/shortcodes/mermaid.html
+++ b/layouts/partials/shortcodes/mermaid.html
@@ -18,9 +18,30 @@
     {{- $zoom = (eq . "true") }}
   {{- end }}
 {{- end }}
+
+{{- /* separate shortcode attributes from rest */}}
+{{- $attributes := .attributes | default dict }}
+{{- $otherAttributes := dict }}
+{{- range $k, $v := $attributes }}
+  {{- if eq $k "align" }}
+  {{- else if eq $k "zoom" }}
+  {{- else }}
+    {{- $otherAttributes = (dict $k $v) | merge $otherAttributes }}
+  {{- end }}
+{{- end }}
+{{- $attributes = $otherAttributes }}
+
+{{- /* enrich attributes */}}
+{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "mermaid" slice) " ")) }}
+{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) (printf "align-%s" $align) slice) " ")) }}
+{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) (printf "%s" (cond $zoom "zoomable" "")) slice) " ")) }}
+
 {{- with $page }}
-<pre class="mermaid align-{{ $align }}{{ if $zoom }} zoomable{{ end }}">
-  {{- replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) -}}
-</pre>
+<pre
+  {{- range $k, $v := $attributes }}
+    {{- if $v }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end }}>{{ replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) }}</pre>
 {{- .Store.Set "hasMermaid" true }}
 {{- end }}
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index e6d38b5a99..940916d7d1 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -2288,8 +2288,3 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
 .term-list ul > li ~ li:before {
     content: " | "
 }
-
-.red {
-    background-color: red !important;
-    border: 5px solid #d000d0 !important;
-}
\ No newline at end of file