fix: Improve empty state for mermaid diagrams

shared/editor/components/Styles.ts

@@ -1089,6 +1089,7 @@ mark {
   display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 1.6em;
   background: ${props.theme.codeBackground};
   border-radius: 6px;
   border: 1px solid ${props.theme.codeBorder};
@@ -1100,6 +1101,11 @@ mark {
     font-family: ${props.theme.fontFamily};
   }
 
+  &.empty {
+    font-size: 14px;
+    color: ${props.theme.placeholder};
+  }
+
   &.parse-error {
     font-size: 14px;
     color: ${props.theme.brand.red};

shared/editor/extensions/Mermaid.ts

@@ -67,13 +67,20 @@ function getNewState({
               "mermaid-diagram-" + diagramId,
               block.node.textContent,
               (svgCode) => {
-                element.classList.remove("parse-error");
+                element.classList.remove("parse-error", "empty");
                 element.innerHTML = svgCode;
               }
             );
           } catch (error) {
-            element.innerText = "Error rendering diagram";
-            element.classList.add("parse-error");
+            const isEmpty = block.node.textContent.trim().length === 0;
+
+            if (isEmpty) {
+              element.innerText = "Empty diagram";
+              element.classList.add("empty");
+            } else {
+              element.innerText = "Error rendering diagram";
+              element.classList.add("parse-error");
+            }
           }
         });