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); + }) ) ); }