Redmine

When a page contains both a valid Mermaid diagram and an invalid one, Mermaid.js's error diagram (bomb icon) is sometimes drawn into the valid diagram instead.
Mermaid.js uses Date.now() as the diagram ID, so blocks rendered within the same millisecond can get the same ID. Mermaid.js then draws the error diagram for the invalid block into the valid diagram that has the same ID.

The following change sets suppressErrorRendering: true so that Mermaid.js does not draw its error diagram. The error is still shown as a flash message, as introduced in r25204 (#44425).

diff --git a/app/javascript/controllers/mermaid_controller.js b/app/javascript/controllers/mermaid_controller.js
index 5fa1944e35..1b95f6c7e1 100644
--- a/app/javascript/controllers/mermaid_controller.js
+++ b/app/javascript/controllers/mermaid_controller.js
@@ -73,7 +73,7 @@ export default class extends Controller {
     if (!pre) return;

     if (!mermaidInitialized) {
-      mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+      mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true });
       mermaidInitialized = true;
     }

@@ -83,9 +83,8 @@ export default class extends Controller {
     pre.insertAdjacentElement('afterend', container);
     this.container = container;

-    // Mermaid.js draws its own error diagram on failure; replace it with a
-    // Redmine flash message while keeping the source block visible, so that
-    // the invalid diagram can be inspected and copied.
+    // On failure, show a Redmine flash message while keeping the source block
+    // visible, so that the invalid diagram can be inspected and copied.
     mermaid.run({ nodes: [container], suppressErrors: false }).then(() => {
       pre.style.display = 'none';
     }).catch((error) => {