diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 305c55b21..391f6c90e 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 render the graph even if some images are missing', () => {
+ imgSnapshotTest(
+ `flowchart TD
+ B[
]
+ B-->C[
]`,
+ {}
+ );
+ });
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 7ad412bdb..3eaedb4b9 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,15 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
img.style.width = '100%';
}
res(img);
- })
- )
+ }
+ setTimeout(() => {
+ if (img.complete) {
+ setupImage();
+ }
+ });
+ img.addEventListener('error', setupImage);
+ img.addEventListener('load', setupImage);
+ })
)
);
}