From 1409889399a6bf41fc22643569ec50fc1d300f51 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 13 Mar 2026 16:41:00 +0800
Subject: [PATCH] =?UTF-8?q?=EF=BB=BFfeat(mermaid-editor):=20implement=20PN?=
 =?UTF-8?q?G=20export=20with=20direct=20file=20save=20and=20e2e=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Refactor export to save PNG directly to downloads folder via Tauri fs API
- Simplify export button from SVG/PNG dropdown to a single PNG export button
- Expose getSvgElement/getSvgDimensions via MermaidPreview ref for export use
- Rewrite SVG-to-PNG conversion using Image/Canvas instead of blob URL approach
- Integrate notification system to show loading/success/error during export
- Prepare self-contained export SVG: strip interactive styles, add background rect
- Add data-testid attributes to NotificationButton, NotificationCenter, MermaidEditor
- Add l1-mermaid-export e2e test spec and corresponding npm script
- Add .bitfun/ to e2e .gitignore
- Add export i18n keys for en-US and zh-CN

Made-with: Cursor
---
 .../TitleBar/NotificationButton.tsx           |   1 +
 .../src/locales/en-US/mermaid-editor.json     |  12 ++
 .../src/locales/zh-CN/mermaid-editor.json     |  12 ++
 .../components/NotificationCenter.tsx         |   4 +-
 .../components/MermaidEditor.tsx              | 169 +++++++++++++++--
 .../components/MermaidEditorHeader.css        |  55 ------
 .../components/MermaidEditorHeader.tsx        |  26 ++-
 .../components/MermaidPreview.tsx             |   4 +
 .../mermaid-editor/services/MermaidService.ts |  99 +++++++---
 tests/e2e/.gitignore                          |   3 +
 tests/e2e/package.json                        |   1 +
 tests/e2e/specs/l1-mermaid-export.spec.ts     | 171 ++++++++++++++++++
 12 files changed, 444 insertions(+), 113 deletions(-)
 create mode 100644 tests/e2e/specs/l1-mermaid-export.spec.ts

diff --git a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
index b0179e8b..c9dc60b7 100644
--- a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
+++ b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
@@ -55,6 +55,7 @@ const NotificationButton: React.FC<NotificationButtonProps> = ({ className = ''
       ].filter(Boolean).join(' ')}
       onClick={() => notificationService.toggleCenter()}
       type="button"
+      data-testid="notification-button"
     >
       {activeNotification ? (
         <>
diff --git a/src/web-ui/src/locales/en-US/mermaid-editor.json b/src/web-ui/src/locales/en-US/mermaid-editor.json
index d23dc7ef..87b65529 100644
--- a/src/web-ui/src/locales/en-US/mermaid-editor.json
+++ b/src/web-ui/src/locales/en-US/mermaid-editor.json
@@ -97,6 +97,18 @@
   "loading": {
     "processing": "Processing..."
   },
+  "export": {
+    "loading": {
+      "svgTitle": "Exporting SVG",
+      "svgMessage": "Generating SVG file...",
+      "pngTitle": "Exporting PNG",
+      "pngMessage": "Rendering diagram and generating PNG..."
+    },
+    "success": {
+      "svg": "SVG exported successfully",
+      "png": "PNG exported successfully"
+    }
+  },
   "panel": {
     "diagramName": "Mermaid Diagram"
   },
diff --git a/src/web-ui/src/locales/zh-CN/mermaid-editor.json b/src/web-ui/src/locales/zh-CN/mermaid-editor.json
index 6c5cfb45..23bd608c 100644
--- a/src/web-ui/src/locales/zh-CN/mermaid-editor.json
+++ b/src/web-ui/src/locales/zh-CN/mermaid-editor.json
@@ -97,6 +97,18 @@
   "loading": {
     "processing": "处理中..."
   },
+  "export": {
+    "loading": {
+      "svgTitle": "正在导出 SVG",
+      "svgMessage": "正在生成 SVG 文件...",
+      "pngTitle": "正在导出 PNG",
+      "pngMessage": "正在渲染图表并生成 PNG..."
+    },
+    "success": {
+      "svg": "SVG 导出成功",
+      "png": "PNG 导出成功"
+    }
+  },
   "panel": {
     "diagramName": "Mermaid图表"
   },
diff --git a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
index cbbbd76f..48a7af46 100644
--- a/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
+++ b/src/web-ui/src/shared/notification-system/components/NotificationCenter.tsx
@@ -329,7 +329,7 @@ export const NotificationCenter: React.FC = () => {
       showCloseButton={false}
       size="large"
     >
-      <div className="notification-center">
+      <div className="notification-center" data-testid="notification-center">
         
         <div className="notification-center__header">
           <h2 className="notification-center__title">{t('components:notificationCenter.title')}</h2>
@@ -401,7 +401,7 @@ export const NotificationCenter: React.FC = () => {
         <div className="notification-center__content">
           
           {activeTaskNotifications.length > 0 && (
-            <div className="notification-center__active-section">
+            <div className="notification-center__active-section" data-testid="notification-center-active-section">
               <div className="notification-center__active-section-title">
                 {t('components:notificationCenter.activeTasks.title', { count: activeTaskNotifications.length })}
               </div>
diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditor.tsx b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditor.tsx
index 10b171a3..aec1ab3d 100644
--- a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditor.tsx
+++ b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditor.tsx
@@ -12,6 +12,10 @@ import { CubeLoading } from '@/component-library/components/CubeLoading';
 import { Sparkles } from 'lucide-react';
 import { aiApi } from '../../../infrastructure/api';
 import { useI18n } from '@/infrastructure/i18n';
+import { notificationService } from '@/shared/notification-system';
+
+import { downloadDir, join } from '@tauri-apps/api/path';
+import { writeFile } from '@tauri-apps/plugin-fs';
 import './MermaidEditor.css';
 
 /** Escape regex special characters. */
@@ -29,6 +33,130 @@ const detectDiagramType = (code: string): MermaidDiagramContext['diagramType'] =
   return 'other';
 };
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const XHTML_NS = 'http://www.w3.org/1999/xhtml';
+
+const sanitizeFileName = (name: string) => name.replace(/[<>:"/\\|?*\u0000-\u001F]/g, '_').trim() || 'diagram';
+
+const createTimestampSuffix = () => {
+  const now = new Date();
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+};
+
+const saveExportBlob = async (blob: Blob, baseName: string, extension: 'svg' | 'png') => {
+  const downloadsPath = await downloadDir();
+  const fileName = `${sanitizeFileName(baseName)}_${createTimestampSuffix()}.${extension}`;
+  const filePath = await join(downloadsPath, fileName);
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  await writeFile(filePath, bytes);
+  return filePath;
+};
+
+/**
+ * Prepare a self-contained SVG element for export.
+ *
+ * cloneNode(true) already preserves:
+ *  - Mermaid's internal <style> block (with resolved theme colors)
+ *  - All inline styles set by applyBaseStyles (fill, stroke, etc.)
+ *
+ * We only need to: clean up interactive-only styles, set proper namespaces,
+ * add a background rect, and ensure dimensions are correct.
+ *
+ * IMPORTANT: Do NOT bulk-copy computed styles (getComputedStyle) onto elements —
+ * doing so injects hundreds of irrelevant CSS properties (width, display,
+ * overflow, …) that break SVG layout and rendering.
+ */
+const prepareExportSvg = (
+  sourceSvg: SVGElement,
+  dims: { width: number; height: number }
+) => {
+  const cloned = sourceSvg.cloneNode(true) as SVGElement;
+
+  const rootStyles = window.getComputedStyle(document.documentElement);
+  const previewContainer = sourceSvg.parentElement;
+  const previewBg = previewContainer
+    ? window.getComputedStyle(previewContainer).backgroundColor
+    : '';
+  const exportBgColor =
+    (previewBg && previewBg !== 'transparent' && previewBg !== 'rgba(0, 0, 0, 0)')
+      ? previewBg
+      : rootStyles.getPropertyValue('--mermaid-bg').trim()
+        || rootStyles.getPropertyValue('--color-bg-primary').trim()
+        || '#ffffff';
+
+  // Strip interactive-only styles irrelevant for static export.
+  cloned.style.transform = '';
+  cloned.style.transition = '';
+  cloned.style.transformOrigin = '';
+  cloned.style.position = '';
+  cloned.style.left = '';
+  cloned.style.top = '';
+  cloned.style.userSelect = '';
+  cloned.style.flexShrink = '';
+  cloned.style.width = '';
+  cloned.style.height = '';
+  cloned.style.minWidth = '';
+  cloned.style.minHeight = '';
+
+  cloned.setAttribute('width', String(dims.width));
+  cloned.setAttribute('height', String(dims.height));
+  cloned.setAttribute('xmlns', SVG_NS);
+  cloned.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+
+  if (!cloned.getAttribute('viewBox')) {
+    cloned.setAttribute('viewBox', `0 0 ${dims.width} ${dims.height}`);
+  }
+
+  // Ensure foreignObject HTML children carry the XHTML namespace
+  // (required for standalone SVG rendering / Image data-URI loading).
+  cloned.querySelectorAll('foreignObject').forEach(fo => {
+    Array.from(fo.children).forEach(child => {
+      if (!child.getAttribute('xmlns')) {
+        child.setAttribute('xmlns', XHTML_NS);
+      }
+    });
+  });
+
+  // Remove interactive helper attributes & styles from all descendants.
+  cloned.querySelectorAll('*').forEach(el => {
+    const htmlEl = el as HTMLElement;
+    if (htmlEl.style) {
+      htmlEl.style.cursor = '';
+      htmlEl.style.pointerEvents = '';
+      htmlEl.style.transition = '';
+    }
+    el.removeAttribute('data-original-fill');
+    el.removeAttribute('data-original-stroke');
+    el.removeAttribute('data-original-color');
+  });
+
+  // Insert a background rect that covers the full viewBox (which may have
+  // negative x/y offsets for padding), not just 0,0 → width,height.
+  const backgroundRect = document.createElementNS(SVG_NS, 'rect');
+  const viewBox = cloned.getAttribute('viewBox');
+  if (viewBox) {
+    const parts = viewBox.trim().split(/[\s,]+/).map(Number);
+    if (parts.length >= 4) {
+      backgroundRect.setAttribute('x', String(parts[0]));
+      backgroundRect.setAttribute('y', String(parts[1]));
+      backgroundRect.setAttribute('width', String(parts[2]));
+      backgroundRect.setAttribute('height', String(parts[3]));
+    }
+  }
+  if (!backgroundRect.getAttribute('width')) {
+    backgroundRect.setAttribute('width', String(dims.width));
+    backgroundRect.setAttribute('height', String(dims.height));
+  }
+  backgroundRect.setAttribute('fill', exportBgColor);
+  const firstContent = Array.from(cloned.children).find(
+    c => !['style', 'defs'].includes(c.tagName.toLowerCase())
+  );
+  cloned.insertBefore(backgroundRect, firstContent ?? null);
+
+  return cloned;
+};
+
 export const MermaidEditor: React.FC<MermaidEditorProps> = React.memo(({
   initialSourceCode,
   onSave,
@@ -40,6 +168,7 @@ export const MermaidEditor: React.FC<MermaidEditorProps> = React.memo(({
 }) => {
   const { t } = useI18n('mermaid-editor');
   
+  
   const {
     actions: { setSourceCode, setShowSourceEditor, setShowComponentLibrary, setLoading, setError },
     sourceCode,
@@ -118,21 +247,35 @@ export const MermaidEditor: React.FC<MermaidEditorProps> = React.memo(({
   }, [isDirty, onSave, sourceCode, setLoading, setError]);
 
   const handleExport = useCallback(async (format: string) => {
-    if (!onExport) return;
+    const loadingCtrl = notificationService.loading({
+      title: t('export.loading.pngTitle'),
+      message: t('export.loading.pngMessage'),
+    });
+
     try {
-      setLoading(true);
-      let exportData = sourceCode;
-      if (format === 'svg') {
-        const svgEl = document.querySelector('.mermaid-preview svg');
-        if (svgEl) exportData = new XMLSerializer().serializeToString(svgEl);
-      }
-      await onExport(format, exportData);
+      setError(null);
+
+      const svgEl = previewRef.current?.getSvgElement();
+      const dims = previewRef.current?.getSvgDimensions();
+      if (!svgEl) throw new Error(t('errors.exportFailed'));
+
+      const w = dims?.width ?? 800;
+      const h = dims?.height ?? 600;
+      const cloned = prepareExportSvg(svgEl, { width: w, height: h });
+      const svgData = new XMLSerializer().serializeToString(cloned);
+
+      const { mermaidService } = await import('../services/MermaidService');
+      const blob = await mermaidService.exportAsPNG(sourceCode, 2, svgData, { width: w, height: h });
+      const filePath = await saveExportBlob(blob, t('panel.diagramName'), 'png');
+      loadingCtrl.complete();
+      notificationService.success(filePath, { title: t('export.success.png') });
+      await onExport?.(format, '');
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('errors.exportFailed'));
-    } finally {
-      setLoading(false);
+      const msg = err instanceof Error ? err.message : t('errors.exportFailed');
+      loadingCtrl.fail(`PNG ${t('errors.exportFailed')}: ${msg}`);
+      setError(msg);
     }
-  }, [onExport, sourceCode, setLoading, setError]);
+  }, [onExport, sourceCode, setError, t]);
 
   const handleComponentSelect = useCallback((component: MermaidComponent) => {
     setSourceCode(sourceCode + '\n' + component.code);
@@ -389,7 +532,7 @@ export const MermaidEditor: React.FC<MermaidEditorProps> = React.memo(({
   }, [floatingToolbar.isVisible]);
 
   return (
-    <div className={`mermaid-editor ${className}`} onClick={handleContainerClick}>
+    <div className={`mermaid-editor ${className}`} onClick={handleContainerClick} data-testid="mermaid-editor">
       <MermaidEditorHeader
         showComponentLibrary={showComponentLibrary}
         isDirty={isDirty}
diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.css b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.css
index cfd3deb7..3002c75b 100644
--- a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.css
+++ b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.css
@@ -243,61 +243,6 @@
   color: var(--color-text-primary, #e8e8e8) !important;
 }
 
-/* ==================== Export dropdown ==================== */
-.export-dropdown {
-  position: relative;
-}
-
-.export-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: var(--size-gap-1, 4px);
-  min-width: 100px;
-  background: var(--color-bg-elevated, #18181a);
-  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
-  border-radius: var(--size-radius-sm, 6px);
-  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.6));
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-4px);
-  transition: all 0.15s ease;
-  z-index: 100;
-}
-
-.export-dropdown:hover .export-menu,
-.export-dropdown:focus-within .export-menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.export-menu button {
-  display: block;
-  width: 100%;
-  padding: var(--size-gap-2, 8px) var(--size-gap-3, 12px);
-  background: transparent;
-  border: none;
-  color: var(--color-text-secondary, #a0a0a0);
-  font-size: var(--font-size-xs, 12px);
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.export-menu button:hover {
-  background: var(--element-bg-base, rgba(255, 255, 255, 0.08));
-  color: var(--color-text-primary, #e8e8e8);
-}
-
-.export-menu button:first-child {
-  border-radius: 5px 5px 0 0;
-}
-
-.export-menu button:last-child {
-  border-radius: 0 0 5px 5px;
-}
-
 /* ==================== Responsive ==================== */
 @media (max-width: 768px) {
   .mermaid-editor-header {
diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.tsx b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.tsx
index f43782d6..b044001b 100644
--- a/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.tsx
+++ b/src/web-ui/src/tools/mermaid-editor/components/MermaidEditorHeader.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Layers, Save, Download, Plus, Minus, Home, Edit3, MessageSquarePlus, Wrench } from 'lucide-react';
-import { IconButton, Button } from '@/component-library';
+import { IconButton } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n';
 import './MermaidEditorHeader.css';
 
@@ -159,20 +159,16 @@ export const MermaidEditorHeader: React.FC<MermaidEditorHeaderProps> = ({
             <Save size={16} />
           </IconButton>
           
-          <div className="export-dropdown">
-            <IconButton
-              className="export-btn"
-              tooltip={t('header.export')}
-              tooltipPlacement="bottom"
-              size="small"
-            >
-              <Download size={16} />
-            </IconButton>
-            <div className="export-menu">
-              <Button variant="ghost" size="small" onClick={() => onExport('svg')}>SVG</Button>
-              <Button variant="ghost" size="small" onClick={() => onExport('png')}>PNG</Button>
-            </div>
-          </div>
+          <IconButton
+            className="export-btn"
+            onClick={() => onExport('png')}
+            tooltip={t('header.export')}
+            tooltipPlacement="bottom"
+            size="small"
+            data-testid="mermaid-export-png"
+          >
+            <Download size={16} />
+          </IconButton>
         </div>
       </div>
     </div>
diff --git a/src/web-ui/src/tools/mermaid-editor/components/MermaidPreview.tsx b/src/web-ui/src/tools/mermaid-editor/components/MermaidPreview.tsx
index 10767cce..d5849c7c 100644
--- a/src/web-ui/src/tools/mermaid-editor/components/MermaidPreview.tsx
+++ b/src/web-ui/src/tools/mermaid-editor/components/MermaidPreview.tsx
@@ -36,6 +36,8 @@ export interface MermaidPreviewRef {
   resetView: () => void;
   fitToContainer: () => void;
   getZoomLevel: () => number;
+  getSvgElement: () => SVGElement | null;
+  getSvgDimensions: () => { width: number; height: number } | null;
 }
 
 const RENDER_DEBOUNCE_DELAY = 200;
@@ -192,6 +194,8 @@ export const MermaidPreview = React.memo(forwardRef<MermaidPreviewRef, MermaidPr
   useImperativeHandle(ref, () => ({
     ...controls,
     fitToContainer: handleFitToContainer,
+    getSvgElement: () => svgRef.current,
+    getSvgDimensions: () => svgDimensionsRef.current,
   }), [controls, handleFitToContainer]);
 
   const renderDiagram = useCallback(async () => {
diff --git a/src/web-ui/src/tools/mermaid-editor/services/MermaidService.ts b/src/web-ui/src/tools/mermaid-editor/services/MermaidService.ts
index e84e7702..e6dfa274 100644
--- a/src/web-ui/src/tools/mermaid-editor/services/MermaidService.ts
+++ b/src/web-ui/src/tools/mermaid-editor/services/MermaidService.ts
@@ -114,38 +114,81 @@ export class MermaidService {
     return this.renderDiagram(sourceCode);
   }
 
-  /** Export as PNG. */
-  public async exportAsPNG(sourceCode: string, scale: number = 2): Promise<Blob> {
-    const svg = await this.exportAsSVG(sourceCode);
-    
+  /**
+   * Export as PNG by loading the self-contained SVG markup into an Image
+   * element, drawing it onto a canvas, and extracting the result as a Blob.
+   *
+   * This avoids html-to-image which re-serializes the DOM and often breaks
+   * foreignObject content and inline styles.
+   */
+  public async exportAsPNG(
+    sourceCode: string,
+    scale: number = 2,
+    svgMarkup?: string,
+    dims?: { width: number; height: number }
+  ): Promise<Blob> {
+    let svgContent = svgMarkup;
+    let width = dims?.width ?? 0;
+    let height = dims?.height ?? 0;
+
+    if (!svgContent) {
+      svgContent = await this.exportAsSVG(sourceCode);
+    }
+
+    if (!width || !height) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(svgContent, 'image/svg+xml');
+      const svg = doc.documentElement;
+      const viewBox = svg.getAttribute('viewBox');
+      if (viewBox) {
+        const parts = viewBox.trim().split(/[\s,]+/).map(Number);
+        if (parts.length >= 4) {
+          width = width || parts[2];
+          height = height || parts[3];
+        }
+      }
+      if (!width) width = parseFloat(svg.getAttribute('width') ?? '0') || 800;
+      if (!height) height = parseFloat(svg.getAttribute('height') ?? '0') || 600;
+    }
+
+    const e2eDelayMs = Number((window as Window & {
+      __BITFUN_E2E_PNG_EXPORT_DELAY_MS__?: number;
+    }).__BITFUN_E2E_PNG_EXPORT_DELAY_MS__ ?? 0);
+
+    if (e2eDelayMs > 0) {
+      await new Promise(resolve => setTimeout(resolve, e2eDelayMs));
+    }
+
+    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`;
+
+    const img = new Image();
+    await new Promise<void>((resolve, reject) => {
+      const timeout = window.setTimeout(
+        () => reject(new Error('PNG export timed out')),
+        15000,
+      );
+      img.onload = () => { window.clearTimeout(timeout); resolve(); };
+      img.onerror = () => { window.clearTimeout(timeout); reject(new Error('Unable to load SVG as image')); };
+      img.src = dataUrl;
+    });
+
     const canvas = document.createElement('canvas');
+    canvas.width = width * scale;
+    canvas.height = height * scale;
     const ctx = canvas.getContext('2d');
     if (!ctx) throw new Error('Unable to create canvas');
-    
-    const img = new Image();
-    const svgBlob = new Blob([svg], { type: 'image/svg+xml' });
-    const url = URL.createObjectURL(svgBlob);
-    
-    return new Promise((resolve, reject) => {
-      img.onload = () => {
-        canvas.width = img.width * scale;
-        canvas.height = img.height * scale;
-        ctx.scale(scale, scale);
-        ctx.drawImage(img, 0, 0);
-        
-        canvas.toBlob((blob) => {
-          URL.revokeObjectURL(url);
-          blob ? resolve(blob) : reject(new Error('Unable to generate PNG'));
-        }, 'image/png');
-      };
-      
-      img.onerror = () => {
-        URL.revokeObjectURL(url);
-        reject(new Error('Unable to load SVG'));
-      };
-      
-      img.src = url;
+
+    ctx.scale(scale, scale);
+    ctx.drawImage(img, 0, 0, width, height);
+
+    const blob = await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(result => {
+        if (result) resolve(result);
+        else reject(new Error('Unable to generate PNG blob'));
+      }, 'image/png');
     });
+
+    return blob;
   }
 
   /** Dispose resources. */
diff --git a/tests/e2e/.gitignore b/tests/e2e/.gitignore
index fb37ae5d..d39f7751 100644
--- a/tests/e2e/.gitignore
+++ b/tests/e2e/.gitignore
@@ -16,3 +16,6 @@ node_modules/
 # OS files
 .DS_Store
 Thumbs.db
+
+# BitFun snapshot data - auto managed
+.bitfun/
diff --git a/tests/e2e/package.json b/tests/e2e/package.json
index bc52f926..652fe0d4 100644
--- a/tests/e2e/package.json
+++ b/tests/e2e/package.json
@@ -26,6 +26,7 @@
     "test:l1:git-panel": "wdio run ./config/wdio.conf.ts --spec \"./specs/l1-git-panel.spec.ts\"",
     "test:l1:settings": "wdio run ./config/wdio.conf.ts --spec \"./specs/l1-settings.spec.ts\"",
     "test:l1:session": "wdio run ./config/wdio.conf.ts --spec \"./specs/l1-session.spec.ts\"",
+    "test:l1:mermaid-export": "wdio run ./config/wdio.conf.ts --spec \"./specs/l1-mermaid-export.spec.ts\"",
     "test:l1:dialog": "wdio run ./config/wdio.conf.ts --spec \"./specs/l1-dialog.spec.ts\"",
     "test:l1:chat-flow": "wdio run ./config/wdio.conf.ts --spec \"./specs/l1-chat.spec.ts\"",
     "test:smoke": "wdio run ./config/wdio.conf.ts --spec \"./specs/startup/*.spec.ts\"",
diff --git a/tests/e2e/specs/l1-mermaid-export.spec.ts b/tests/e2e/specs/l1-mermaid-export.spec.ts
new file mode 100644
index 00000000..a7444952
--- /dev/null
+++ b/tests/e2e/specs/l1-mermaid-export.spec.ts
@@ -0,0 +1,171 @@
+/**
+ * L1 mermaid export spec: validates export notifications and completion flow.
+ */
+
+import { browser, expect, $ } from '@wdio/globals';
+import { Header } from '../page-objects/components/Header';
+import { StartupPage } from '../page-objects/StartupPage';
+import { ensureWorkspaceOpen } from '../helpers/workspace-utils';
+import { saveStepScreenshot } from '../helpers/screenshot-utils';
+
+const SAMPLE_MERMAID = `flowchart TD
+  A[Start] --> B{Check}
+  B -->|Yes| C[Done]
+  B -->|No| D[Retry]`;
+
+describe('L1 Mermaid Export', () => {
+  let header: Header;
+  let startupPage: StartupPage;
+  let hasWorkspace = false;
+
+  const openMermaidEditor = async () => {
+    await browser.execute((code: string) => {
+      window.dispatchEvent(new CustomEvent('expand-right-panel'));
+      window.dispatchEvent(new CustomEvent('agent-create-tab', {
+        detail: {
+          type: 'mermaid-editor',
+          title: 'Mermaid Editor',
+          data: {
+            mermaid_code: code,
+            sourceCode: code,
+            mode: 'editor',
+            allow_mode_switch: true,
+            editor_config: {
+              readonly: false,
+              show_preview: true,
+              auto_format: false,
+            },
+          },
+          metadata: {
+            duplicateCheckKey: 'e2e-mermaid-export',
+            fromE2E: true,
+          },
+          checkDuplicate: true,
+          duplicateCheckKey: 'e2e-mermaid-export',
+          replaceExisting: true,
+        },
+      }));
+    }, SAMPLE_MERMAID);
+
+    await browser.waitUntil(async () => (await $('[data-testid="mermaid-editor"]')).isExisting(), {
+      timeout: 15000,
+      timeoutMsg: 'Mermaid editor did not open',
+    });
+
+    await browser.waitUntil(async () => {
+      const svg = await $('.mermaid-preview svg');
+      return svg.isExisting();
+    }, {
+      timeout: 15000,
+      timeoutMsg: 'Mermaid preview SVG did not render',
+    });
+  };
+
+  const openNotificationCenter = async () => {
+    const button = await $('[data-testid="notification-button"]');
+    await browser.waitUntil(async () => button.isExisting(), {
+      timeout: 5000,
+      timeoutMsg: 'Notification button not found',
+    });
+    await button.click();
+    await browser.waitUntil(async () => (await $('[data-testid="notification-center"]')).isExisting(), {
+      timeout: 5000,
+      timeoutMsg: 'Notification center did not open',
+    });
+  };
+
+  before(async () => {
+    console.log('[L1] Starting mermaid export tests');
+    header = new Header();
+    startupPage = new StartupPage();
+
+    await browser.pause(3000);
+    await header.waitForLoad();
+    hasWorkspace = await ensureWorkspaceOpen(startupPage);
+  });
+
+  beforeEach(async function () {
+    if (!hasWorkspace) {
+      this.skip();
+      return;
+    }
+
+    await browser.execute(() => {
+      (window as Window & { __BITFUN_E2E_PNG_EXPORT_DELAY_MS__?: number }).__BITFUN_E2E_PNG_EXPORT_DELAY_MS__ = 1200;
+    });
+
+    await openMermaidEditor();
+  });
+
+  afterEach(async () => {
+    await browser.execute(() => {
+      delete (window as Window & { __BITFUN_E2E_PNG_EXPORT_DELAY_MS__?: number }).__BITFUN_E2E_PNG_EXPORT_DELAY_MS__;
+    });
+  });
+
+  it('should render the mermaid editor preview before export', async function () {
+    if (!hasWorkspace) {
+      this.skip();
+      return;
+    }
+
+    const editor = await $('[data-testid="mermaid-editor"]');
+    const previewSvg = await $('.mermaid-preview svg');
+
+    expect(await editor.isExisting()).toBe(true);
+    expect(await previewSvg.isExisting()).toBe(true);
+
+    await saveStepScreenshot('l1-mermaid-export-preview-ready');
+  });
+
+  it('png export should show progress and finish successfully', async function () {
+    if (!hasWorkspace) {
+      this.skip();
+      return;
+    }
+
+    await browser.execute(() => {
+      const button = document.querySelector('[data-testid="mermaid-export-png"]') as HTMLButtonElement | null;
+      button?.click();
+    });
+
+    await browser.waitUntil(async () => {
+      const className = await (await $('[data-testid="notification-button"]')).getAttribute('class');
+      return !!className && className.includes('bitfun-notification-btn--loading');
+    }, {
+      timeout: 5000,
+      timeoutMsg: 'PNG export did not enter loading state',
+    });
+
+    await openNotificationCenter();
+
+    const activeSection = await $('[data-testid="notification-center-active-section"]');
+    expect(await activeSection.isExisting()).toBe(true);
+
+    await saveStepScreenshot('l1-mermaid-export-loading');
+
+    await browser.waitUntil(async () => {
+      return browser.execute(() => {
+        const button = document.querySelector('[data-testid="notification-button"]');
+        return !(button?.classList.contains('bitfun-notification-btn--loading'));
+      });
+    }, {
+      timeout: 20000,
+      timeoutMsg: 'PNG export loading state did not finish',
+    });
+
+    await browser.waitUntil(async () => {
+      return browser.execute(() => {
+        const texts = Array.from(document.querySelectorAll('.notification-center'))
+          .map(el => el.textContent || '')
+          .join('\n');
+        return /PNG/i.test(texts) && /(成功|success)/i.test(texts);
+      });
+    }, {
+      timeout: 10000,
+      timeoutMsg: 'PNG export success notification not found',
+    });
+
+    await saveStepScreenshot('l1-mermaid-export-success');
+  });
+});