From 8b6485035ebb553708a21005662122fad11629d4 Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 16:32:11 +0200
Subject: [PATCH 1/4] add failing test

---
 cypress/integration/rendering/flowchart-v2.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index eaa14ed50..486e548a1 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -695,6 +695,15 @@ A ~~~ B
       {}
     );
   });
+
+  it('4439: Should the graph event if some images are missing', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    B[<img>]
+    B-->C[<img>]`,
+      {}
+    );
+  });
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {

From aa1b998fbf2d56c8a072b2feeb55566c2e90199e Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 16:32:57 +0200
Subject: [PATCH 2/4] always resolve in the end

---
 .../mermaid/src/dagre-wrapper/shapes/util.js     | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 7ad412bdb..f67af5b29 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -66,8 +66,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
       await Promise.all(
         [...images].map(
           (img) =>
-            new Promise((res) =>
-              img.addEventListener('load', function () {
+            new Promise((res) => {
+              /**
+               *
+               */
+              function setupImage() {
                 img.style.display = 'flex';
                 img.style.flexDirection = 'column';
 
@@ -82,8 +85,13 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                   img.style.width = '100%';
                 }
                 res(img);
-              })
-            )
+              }
+              if (img.complete) {
+                setupImage();
+              }
+              img.addEventListener('error', setupImage);
+              img.addEventListener('load', setupImage);
+            })
         )
       );
     }

From 270586095fc75d28e9c04b0379c64f7e0c46dbd9 Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 16:37:34 +0200
Subject: [PATCH 3/4] fix typo in test description

---
 cypress/integration/rendering/flowchart-v2.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 486e548a1..0b2e77293 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -696,7 +696,7 @@ A ~~~ B
     );
   });
 
-  it('4439: Should the graph event if some images are missing', () => {
+  it('4439: Should render the graph even if some images are missing', () => {
     imgSnapshotTest(
       `flowchart TD
     B[<img>]

From 9efd9e8a451390c2b20bef2dad60c47aa1077d77 Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 18:01:52 +0200
Subject: [PATCH 4/4] defer a bit for electron to catch up

---
 packages/mermaid/src/dagre-wrapper/shapes/util.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index f67af5b29..3eaedb4b9 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -86,9 +86,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                 }
                 res(img);
               }
-              if (img.complete) {
-                setupImage();
-              }
+              setTimeout(() => {
+                if (img.complete) {
+                  setupImage();
+                }
+              });
               img.addEventListener('error', setupImage);
               img.addEventListener('load', setupImage);
             })