diff --git a/static/css/theme.css b/static/css/theme.css
index 8f0c273b60..3d3c12521e 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1319,10 +1319,15 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 .mermaid {
     border: 1px solid transparent;
-    display: inline;
+    /* don't use display: none, as this will cause no renderinge by Mermaid */
+    visibility: hidden;
     padding: .5rem .5rem 0 .5rem;
 }
-.mermaid.zoom {
+.mermaid.mermaid-render {
+    display: inline;
+    visibility: visible;
+}
+.mermaid.mermaid-render.zoom {
     display: inline-block;
     position: relative;
     width: 100%;