feat: Refactor PNG export and add sequence diagram

[MrCoder]

No description provided.

[cursor]

Bug: Iframe Load Timing Issue

A race condition exists where iframe.contentWindow.getPng() is called before the getPng method is defined within the iframe. The getPng method is only exposed to the iframe's window object after its load event fires. If a user attempts to export, share, or copy an image before the iframe has fully loaded, the call to getPng will fail with a TypeError: getPng is not a function, preventing the action.

src/components/MainHeader.jsx#L26-L28

web-sequence/src/components/MainHeader.jsx

Lines 26 to 28 in fdb3a7f

	const iframe = document.getElementById('demo-frame');
	// Use the getPng method exposed by the iframe
	const pngDataUrl = await iframe.contentWindow.getPng();

src/components/ContentWrap.jsx#L550-L552

web-sequence/src/components/ContentWrap.jsx

Lines 550 to 552 in fdb3a7f

	async getPngBlob() {
	// Use the getPng method exposed by the iframe
	const pngDataUrl = await this.frame.contentWindow.getPng();

src/computes.js#L172-L179

web-sequence/src/computes.js

Lines 172 to 179 in fdb3a7f

	window.app = new window.zenuml.default('#mounting-point')
	// Expose getPng method to parent window
	window.getPng = async function() {
	if (window.app) {
	return await window.app.getPng();
	}
	return null;
	};

Fix in Cursor • Fix in Web

---

BugBot free trial expires on July 22, 2025
Learn more in the Cursor dashboard.

Was this report helpful? Give feedback by reacting with 👍 or 👎