From ae46cedd37107d19d63d56484220d85742865854 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Mon, 27 Oct 2025 15:10:06 +0800
Subject: [PATCH] =?UTF-8?q?=201.=20=E5=9C=A8=E6=B5=8F=E8=A7=88=E5=99=A8?=
 =?UTF-8?q?=E4=B8=AD=E5=88=87=E6=8D=A2=E8=87=B3=20Mermaid=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E7=94=9F=E6=88=90=E7=A4=BA=E4=BE=8B=E5=9B=BE=EF=BC=8C?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=20SVG=20=E5=AE=B9=E5=99=A8=E5=8D=A0=E6=BB=A1?=
 =?UTF-8?q?=E5=8F=AF=E7=94=A8=E7=A9=BA=E9=97=B4=E4=B8=94=E5=B1=85=E4=B8=AD?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E3=80=82=20=20=202.=20=E8=8B=A5=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E7=BC=93=E5=AD=98=EF=BC=8C=E5=BB=BA=E8=AE=AE=E5=BC=BA?=
 =?UTF-8?q?=E5=88=B6=E5=88=B7=E6=96=B0=EF=BC=88Ctrl+F5=EF=BC=89=E4=BB=A5?=
 =?UTF-8?q?=E7=A1=AE=E4=BF=9D=E6=9C=80=E6=96=B0=E6=A0=B7=E5=BC=8F=E7=94=9F?=
 =?UTF-8?q?=E6=95=88=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css        | 20 ++++++++++++++++++++
 js/core/app-shell.js | 16 ++++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 9a4ea5e..7b6911b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -291,6 +291,17 @@ iconify-icon {
   transform-origin: center top;
 }
 
+.svg-content-wrapper--mermaid {
+  flex: 1;
+  margin: 1rem;
+  text-align: center;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    max-width: 100% !important;
+}
+
+
 /* 小手摇摆动画 */
 @keyframes wave {
   0%, 100% {transform: translateX(0px) rotate(90deg);}
@@ -436,3 +447,12 @@ iconify-icon {
 #send-button.terminate-mode {
   border-color: #dc2626;
 }
+
+
+
+.flowchart {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    max-width: 100% !important;
+}
diff --git a/js/core/app-shell.js b/js/core/app-shell.js
index 8607584..8367d53 100644
--- a/js/core/app-shell.js
+++ b/js/core/app-shell.js
@@ -1191,7 +1191,8 @@
         );
         this.destroyMermaidPanZoom();
         this.renderSvgMarkup(svgContent, this.activeModuleId, {
-          applyTransform: false
+          applyTransform: false,
+          wrapperClasses: ['svg-content-wrapper--mermaid']
         });
         const svgElement = this.el.viewer.querySelector('svg');
         if (svgElement) {
@@ -1356,10 +1357,21 @@
 
     renderSvgMarkup(svgMarkup, moduleId = this.activeModuleId, options = {}) {
       if (!this.el.viewer || !svgMarkup) return;
-      const { opacity = 1, applyTransform = true } = options;
+      const {
+        opacity = 1,
+        applyTransform = true,
+        wrapperClasses = []
+      } = options;
       this.el.viewer.innerHTML = '';
       const wrapper = document.createElement('div');
       wrapper.className = 'svg-content-wrapper';
+      if (Array.isArray(wrapperClasses)) {
+        wrapperClasses.filter(Boolean).forEach((className) =>
+          wrapper.classList.add(className)
+        );
+      } else if (typeof wrapperClasses === 'string' && wrapperClasses.trim()) {
+        wrapper.classList.add(wrapperClasses.trim());
+      }
       wrapper.innerHTML = svgMarkup;
       wrapper.style.opacity = opacity;
       this.el.viewer.appendChild(wrapper);