diff --git a/PNG-Export-and-iframe-Architecture-Analysis.md b/PNG-Export-and-iframe-Architecture-Analysis.md
new file mode 100644
index 00000000..0d437c99
--- /dev/null
+++ b/PNG-Export-and-iframe-Architecture-Analysis.md
@@ -0,0 +1,184 @@
+# ZenUML Web Sequence - PNG Export and iframe Architecture Analysis
+
+## 1. Overview
+
+ZenUML Web Sequence uses an iframe architecture to render sequence diagrams and implements PNG export functionality through the `toBlob()` method provided by the @zenuml/core library. This document provides a detailed analysis of these two core mechanisms.
+
+## 2. PNG Export Mechanism
+
+### 2.1 Export Flow
+
+The complete PNG export flow is as follows:
+
+1.  **User Triggers Export**
+    *   Click download button triggers `exportPngClickHandler()` (ContentWrap.jsx:540)
+    *   Or click copy button triggers `copyImageClickHandler()` (ContentWrap.jsx:559)
+
+2.  **Permission Check**
+    ```javascript
+    if (!window.user) {
+      this.props.onLogin();
+      return;
+    }
+    ```
+
+3.  **Get PNG Blob**
+    ```javascript
+    async getPngBlob() {
+      // Use the getPng method exposed by the iframe
+      const pngDataUrl = await this.frame.contentWindow.getPng();
+      if (!pngDataUrl) {
+        throw new Error('Failed to get PNG from diagram');
+      }
+      
+      // Convert data URL to Blob
+      const response = await fetch(pngDataUrl);
+      return await response.blob();
+    }
+    ```
+
+4.  **Process Export**
+    *   Download: Uses FileSaver.js's `saveAs(png, 'zenuml.png')`
+    *   Copy: Uses Clipboard API to write to clipboard
+
+### 2.2 Key Technical Points
+
+1.  **Official API Method**: Uses the `getPng()` method provided by @zenuml/core library
+2.  **Data URL to Blob Conversion**: The `getPng()` method returns a data URL which is converted to Blob using the Fetch API
+3.  **Cross-iframe Access**: Access iframe's exposed methods through `this.frame.contentWindow`
+4.  **No Vue Internals**: No longer relies on accessing Vue instance internals (`__vue__`), making it more stable and future-proof
+
+### 2.3 Chrome Extension Special Handling
+
+Chrome extension uses a different screenshot mechanism (takeScreenshot.js):
+- Uses Chrome tabs API for screenshots
+- Saves to filesystem through WriteFile.js
+
+## 3. iframe Architecture Analysis
+
+### 3.1 iframe Creation
+
+The iframe is created in ContentWrap.jsx:
+```jsx
+<iframe
+  ref={(el) => (this.frame = el)}
+  frameBorder="0"
+  id="demo-frame"
+  allowFullScreen
+/>
+```
+
+### 3.2 Content Loading Process
+
+1.  **HTML Template Generation** (computes.js:13-19)
+    ```javascript
+    var code = `<main id="demo">
+      <div id="diagram">
+        <div id="mounting-point">
+          <seq-diagram></seq-diagram>
+        </div>
+      </div>
+    </main>`;
+    ```
+
+2.  **Complete HTML Assembly** (utils.js - getCompleteHtml)
+    *   Creates complete HTML document structure
+    *   Injects CSS styles
+    *   **Loads ZenUML Core library**: `<script src="' + getUrl(zenumlUrl) + '"></script>`
+    *   zenumlUrl is imported via Vite's URL import feature: `import zenumlUrl from '@zenuml/core/dist/zenuml?url'`
+
+3.  **JavaScript Initialization** (computes.js:170-192)
+    ```javascript
+    window.addEventListener("load", function(event) {
+      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;
+      };
+    });
+    ```
+
+4.  **Content Setting**
+    *   Prefers `srcdoc` attribute (modern browsers)
+    *   Falls back to `document.write` (older browsers)
+
+### 3.3 Communication Mechanism
+
+#### Parent Window to iframe
+
+```javascript
+// ContentWrap.jsx
+targetWindow.postMessage({ code: this.cmCodes.js }, '*');
+```
+
+#### iframe Listener
+
+```javascript
+// computes.js
+window.addEventListener('message', (e) => {
+  const code = e.data && e.data.code;
+  const cursor = e.data && e.data.cursor;
+  
+  if (code && app) {
+    app.render(code, {
+      enableMultiTheme: false,
+      theme: "theme-default",
+      onContentChange: (code) => {
+        window.parent.postMessage({ code })
+      },
+      stickyOffset: Number(new URLSearchParams(window.location.search).get('stickyOffset') || 0)
+    });
+  }
+});
+```
+
+### 3.4 Key Features
+
+1.  **Real-time Synchronization**: Changes in the editor are reflected in the preview in real-time via postMessage
+2.  **Detached Window Support**: Supports opening preview in a separate window (detachPreview)
+3.  **Cursor Synchronization**: Cursor position synchronization between editor and preview
+4.  **Security Considerations**:
+    *   Uses srcdoc instead of data URL (more secure)
+    *   Communicates via postMessage API
+    *   Dynamically generates content to prevent XSS attacks
+
+## 4. Architecture Advantages
+
+1.  **Isolation**: Complete isolation between editor UI and rendering engine
+2.  **Flexibility**: Supports advanced features like detached windows and real-time preview
+3.  **Maintainability**: Clear modular design
+4.  **Security**: iframe provides a natural sandbox environment
+
+## 5. Potential Improvements
+
+1.  **PNG Export Dependency**: Currently relies on accessing Vue instance's internal property (__vue__), which may fail when Vue version updates
+2.  **Cross-origin Restrictions**: iframe communication uses `*` as target origin, could consider restricting to specific domains
+3.  **Error Handling**: Could enhance error handling and user feedback when PNG export fails
+
+## 6. Summary
+
+ZenUML Web Sequence achieves effective isolation between the editor and rendering engine through its iframe architecture, while leveraging the toBlob() method provided by @zenuml/core for efficient PNG export functionality. This design ensures system modularity and security while providing a good user experience.
+
+## 7. PNG Export Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    actor User
+    participant ContentWrap as Parent Window (ContentWrap.jsx)
+    participant IFrame as IFrame
+    participant ZenUMLCore as @zenuml/core
+
+    User->>ContentWrap: Clicks "Export PNG"
+    ContentWrap->>ContentWrap: exportPngClickHandler()
+    ContentWrap->>ContentWrap: getPngBlob()
+    ContentWrap->>IFrame: calls contentWindow.getPng()
+    IFrame->>ZenumlCore: calls app.getPng()
+    ZenumlCore-->>IFrame: returns pngDataUrl
+    IFrame-->>ContentWrap: returns pngDataUrl
+    ContentWrap->>ContentWrap: fetch(pngDataUrl)
+    ContentWrap->>ContentWrap: saveAs(blob, 'zenuml.png')
+    ContentWrap-->>User: PNG file download
+```
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
index 70592116..e32bb3b4 100644
--- a/src/components/ContentWrap.jsx
+++ b/src/components/ContentWrap.jsx
@@ -42,15 +42,15 @@ export default class ContentWrap extends Component {
     this.jsMode = JsModes.JS;
     this.prefs = {};
     this.codeInPreview = { html: null, css: null, js: null };
-    
+
     // Initialize with the current page's content if available
     const currentPage = this.getCurrentPage();
-    this.cmCodes = { 
-      html: props.currentItem.html, 
-      css: currentPage ? currentPage.css : props.currentItem.css || '', 
-      js: currentPage ? currentPage.js : props.currentItem.js || '' 
+    this.cmCodes = {
+      html: props.currentItem.html,
+      css: currentPage ? currentPage.css : props.currentItem.css || '',
+      js: currentPage ? currentPage.js : props.currentItem.js || ''
     };
-    
+
     this.cm = {};
     this.logCount = 0;
 
@@ -106,7 +106,7 @@ export default class ContentWrap extends Component {
   async onJsCodeChange(editor, change) {
     await this.setState({ lineOfCode: editor.doc.size });
     this.cmCodes.js = editor.getValue();
-    
+
     // Update the current page's JS content
     const currentPage = this.getCurrentPage();
     if (currentPage) {
@@ -114,17 +114,17 @@ export default class ContentWrap extends Component {
         ...currentPage,
         js: editor.getValue()
       };
-      
+
       // Find the index of the current page
       const pageIndex = this.props.currentItem.pages.findIndex(
         page => page.id === currentPage.id
       );
-      
+
       if (pageIndex !== -1) {
         // Create updated pages array
         const updatedPages = [...this.props.currentItem.pages];
         updatedPages[pageIndex] = updatedPage;
-        
+
         // Update the current item with the new pages array
         const updatedItem = {
           ...this.props.currentItem,
@@ -132,7 +132,7 @@ export default class ContentWrap extends Component {
           // Also update the js field for backward compatibility
           js: editor.getValue()
         };
-        
+
         // Only call onCodeChange once with the updated item
         this.props.onCodeChange('js', editor.getValue(), change.origin !== 'setValue', updatedItem);
       } else {
@@ -150,7 +150,7 @@ export default class ContentWrap extends Component {
 
   async onCssCodeChange(editor, change) {
     this.cmCodes.css = editor.getValue();
-    
+
     // Update the current page's CSS content
     const currentPage = this.getCurrentPage();
     if (currentPage) {
@@ -158,17 +158,17 @@ export default class ContentWrap extends Component {
         ...currentPage,
         css: editor.getValue()
       };
-      
+
       // Find the index of the current page
       const pageIndex = this.props.currentItem.pages.findIndex(
         page => page.id === currentPage.id
       );
-      
+
       if (pageIndex !== -1) {
         // Create updated pages array
         const updatedPages = [...this.props.currentItem.pages];
         updatedPages[pageIndex] = updatedPage;
-        
+
         // Update the current item with the new pages array
         const updatedItem = {
           ...this.props.currentItem,
@@ -176,7 +176,7 @@ export default class ContentWrap extends Component {
           // Also update the css field for backward compatibility
           css: editor.getValue()
         };
-        
+
         // Only call onCodeChange once with the updated item
         this.props.onCodeChange('css', editor.getValue(), change.origin !== 'setValue', updatedItem);
       } else {
@@ -236,7 +236,7 @@ export default class ContentWrap extends Component {
     if (!currentItem || !currentItem.pages || !currentItem.currentPageId) {
       return null;
     }
-    
+
     return currentItem.pages.find(page => page.id === currentItem.currentPageId) || null;
   }
 
@@ -287,23 +287,23 @@ export default class ContentWrap extends Component {
 
   showErrors(lang, errors) {
     var editor = this.cm[lang];
-    
+
     // Safety checks to prevent CodeMirror errors
     if (!editor || !editor.getDoc()) {
       console.warn(`Editor for ${lang} is not properly initialized`);
       return;
     }
-    
+
     errors.forEach(function (e) {
       try {
         editor.operation(function () {
           // Additional safety check for line number validity
           const doc = editor.getDoc();
           const lineCount = doc.lineCount();
-          
+
           // Ensure lineNumber is valid (0-based indexing)
           const lineNumber = Math.max(0, Math.min(e.lineNumber || 0, lineCount - 1));
-          
+
           var n = document.createElement('div');
           n.setAttribute('data-title', e.message);
           n.classList.add('gutter-error-marker');
@@ -403,7 +403,7 @@ export default class ContentWrap extends Component {
 
   refreshEditor() {
     const currentPage = this.getCurrentPage();
-    
+
     if (currentPage) {
       this.cmCodes.css = currentPage.css || '';
       this.cmCodes.js = currentPage.js || '';
@@ -411,7 +411,7 @@ export default class ContentWrap extends Component {
       this.cmCodes.css = this.props.currentItem.css || '';
       this.cmCodes.js = this.props.currentItem.js || '';
     }
-    
+
     this.cm.css.setValue(this.cmCodes.css);
     this.cm.js.setValue(this.cmCodes.js);
     this.cm.css.refresh();
@@ -548,12 +548,15 @@ export default class ContentWrap extends Component {
   }
 
   async getPngBlob() {
-    const mountingPoint =
-      this.frame.contentWindow.document.getElementById('diagram');
-    // eslint-disable-next-line
-    return await mountingPoint
-      .getElementsByClassName('frame')[0]
-      .parentElement.__vue__.toBlob();
+    // Use the getPng method exposed by the iframe
+    const pngDataUrl = await this.frame.contentWindow.getPng();
+    if (!pngDataUrl) {
+      throw new Error('Failed to get PNG from diagram');
+    }
+
+    // Convert data URL to Blob
+    const response = await fetch(pngDataUrl);
+    return await response.blob();
   }
 
   async copyImageClickHandler(e) {
@@ -665,13 +668,13 @@ export default class ContentWrap extends Component {
     const baseTranspilerPath = 'lib/transpilers';
     // Exit if already loaded
     var d = deferred();
-    
+
     // Add null check for modes[mode]
     if (!mode || !modes[mode]) {
       d.resolve();
       return d.promise;
     }
-    
+
     if (modes[mode].hasLoaded) {
       d.resolve();
       return d.promise;
@@ -713,7 +716,7 @@ export default class ContentWrap extends Component {
   updateHtmlMode(value) {
     this.props.onCodeModeChange('html', value);
     this.props.currentItem.htmlMode = value;
-    
+
     // Add null check to prevent "Cannot read properties of undefined (reading 'cmPath')" error
     if (this.cm && this.cm.html && modes[value]) {
       CodeMirror.autoLoadMode(
@@ -721,49 +724,49 @@ export default class ContentWrap extends Component {
         modes[value].cmPath || modes[value].cmMode,
       );
     }
-    
+
     return this.handleModeRequirements(value);
   }
 
   updateCssMode(value) {
     this.props.onCodeModeChange('css', value);
     this.props.currentItem.cssMode = value;
-    
+
     // Add null check to prevent "Cannot read properties of undefined" error
     if (this.cm && this.cm.css && modes[value]) {
       this.cm.css.setOption('mode', modes[value].cmMode);
       this.cm.css.setOption('readOnly', modes[value].cmDisable);
-      
+
       CodeMirror.autoLoadMode(
         this.cm.css,
         modes[value].cmPath || modes[value].cmMode,
       );
     }
-    
+
     // Only modify DOM if the element exists
     if (window.cssSettingsBtn && modes[value]) {
       window.cssSettingsBtn.classList[
         modes[value].hasSettings ? 'remove' : 'add'
       ]('hide');
     }
-    
+
     return this.handleModeRequirements(value);
   }
 
   updateJsMode(value) {
     this.props.onCodeModeChange('js', value);
     this.props.currentItem.jsMode = value;
-    
+
     // Add null check to prevent "Cannot read properties of undefined" error
     if (this.cm && this.cm.js && modes[value]) {
       this.cm.js.setOption('mode', modes[value].cmMode);
-      
+
       CodeMirror.autoLoadMode(
         this.cm.js,
         modes[value].cmPath || modes[value].cmMode,
       );
     }
-    
+
     return this.handleModeRequirements(value);
   }
 
diff --git a/src/components/MainHeader.jsx b/src/components/MainHeader.jsx
index 5d3727a8..4167811b 100644
--- a/src/components/MainHeader.jsx
+++ b/src/components/MainHeader.jsx
@@ -23,13 +23,16 @@ export function MainHeader(props) {
   };
 
   const getPngBlob = async () => {
-    const mountingPoint = document
-      .getElementById('demo-frame')
-      .contentWindow.document.getElementById('diagram');
-    // eslint-disable-next-line
-    return await mountingPoint
-      .getElementsByClassName('frame')[0]
-      .parentElement.__vue__.toBlob();
+    const iframe = document.getElementById('demo-frame');
+    // Use the getPng method exposed by the iframe
+    const pngDataUrl = await iframe.contentWindow.getPng();
+    if (!pngDataUrl) {
+      throw new Error('Failed to get PNG from diagram');
+    }
+    
+    // Convert data URL to Blob
+    const response = await fetch(pngDataUrl);
+    return await response.blob();
   };
 
   const shareClickHandler = async () => {
diff --git a/src/computes.js b/src/computes.js
index 8fce16d0..e9fee648 100644
--- a/src/computes.js
+++ b/src/computes.js
@@ -170,6 +170,13 @@ export function computeJs(
   let code = `
 	window.addEventListener("load", function(event) {
 		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;
+		};
 	});
 	window.addEventListener('message', (e) => {
 		const code = e.data && e.data.code;