1. 在浏览器中切换至 Mermaid 模块生成示例图，确认 SVG 容器占满可用空间且居中显示。

2. 若存在缓存，建议强制刷新（Ctrl+F5）以确保最新样式生效。

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

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