fix: resolve Mermaid mindmap generation issue (#20227)

web/app/components/base/mermaid/index.tsx

           numberSectionStyles: 4,
           axisFormat: '%Y-%m-%d',
         },
+        mindmap: {
+          useMaxWidth: true,
+          padding: 10,
+          diagramPadding: 20,
+        },
         maxTextSize: 50000,
       })
       isMermaidInitialized = true
     try {
       let finalCode: string
 
-      // Check if it's a gantt chart
+      // Check if it's a gantt chart or mindmap
       const isGanttChart = primitiveCode.trim().startsWith('gantt')
+      const isMindMap = primitiveCode.trim().startsWith('mindmap')
 
-      if (isGanttChart) {
-        // For gantt charts, ensure each task is on its own line
+      if (isGanttChart || isMindMap) {
+        // For gantt charts and mindmaps, ensure each task is on its own line
         // and preserve exact whitespace/format
         finalCode = primitiveCode.trim()
       }
           numberSectionStyles: 4,
           axisFormat: '%Y-%m-%d',
         },
+        mindmap: {
+          useMaxWidth: true,
+          padding: 10,
+          diagramPadding: 20,
+        },
       }
 
       if (look === 'classic') {
       'bg-white': currentTheme === Theme.light,
       'bg-slate-900': currentTheme === Theme.dark,
     }),
-    mermaidDiv: cn('mermaid relative h-auto w-full cursor-pointer', {
+    mermaidDiv: cn('mermaid cursor-pointer h-auto w-full relative', {
       'bg-white': currentTheme === Theme.light,
       'bg-slate-900': currentTheme === Theme.dark,
     }),
-    errorMessage: cn('px-[26px] py-4', {
+    errorMessage: cn('py-4 px-[26px]', {
       'text-red-500': currentTheme === Theme.light,
       'text-red-400': currentTheme === Theme.dark,
     }),
-    errorIcon: cn('h-6 w-6', {
+    errorIcon: cn('w-6 h-6', {
       'text-red-500': currentTheme === Theme.light,
       'text-red-400': currentTheme === Theme.dark,
     }),
       'text-gray-700': currentTheme === Theme.light,
       'text-gray-300': currentTheme === Theme.dark,
     }),
-    themeToggle: cn('flex h-10 w-10 items-center justify-center rounded-full shadow-md backdrop-blur-sm transition-all duration-300', {
+    themeToggle: cn('flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 shadow-md backdrop-blur-sm', {
       'bg-white/80 hover:bg-white hover:shadow-lg text-gray-700 border border-gray-200': currentTheme === Theme.light,
       'bg-slate-800/80 hover:bg-slate-700 hover:shadow-lg text-yellow-300 border border-slate-600': currentTheme === Theme.dark,
     }),
   // Style classes for look options
   const getLookButtonClass = (lookType: 'classic' | 'handDrawn') => {
     return cn(
-      'system-sm-medium mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary',
+      'flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
       look === lookType && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
       currentTheme === Theme.dark && 'border-slate-600 bg-slate-800 text-slate-300',
       look === lookType && currentTheme === Theme.dark && 'border-blue-500 bg-slate-700 text-white',
     <div ref={ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}>
       <div className={themeClasses.segmented}>
         <div className="msh-segmented-group">
-          <label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1">
+          <label className="msh-segmented-item flex items-center space-x-1 m-2 w-[200px]">
             <div
               key='classic'
               className={getLookButtonClass('classic')}
       <div ref={containerRef} style={{ position: 'absolute', visibility: 'hidden', height: 0, overflow: 'hidden' }} />
 
       {isLoading && !svgCode && (
-        <div className='px-[26px] py-4'>
+        <div className='py-4 px-[26px]'>
           <LoadingAnim type='text'/>
           {!isCodeComplete && (
             <div className="mt-2 text-sm text-gray-500">
 
       {svgCode && (
         <div className={themeClasses.mermaidDiv} style={{ objectFit: 'cover' }} onClick={() => setImagePreviewUrl(svgCode)}>
-          <div className="absolute bottom-2 left-2 z-[100]">
+          <div className="absolute left-2 bottom-2 z-[100]">
             <button
               onClick={(e) => {
                 e.stopPropagation()

web/app/components/base/mermaid/utils.ts

     .replace(/section\s+([^:]+):/g, (match, sectionName) => `section ${sectionName}：`)
     // Fix common syntax issues
     .replace(/fifopacket/g, 'rect')
+    // Ensure graph has direction
+    .replace(/^graph\s+((?:TB|BT|RL|LR)*)/, (match, direction) => {
+      return direction ? match : 'graph TD'
+    })
     // Clean up empty lines and extra spaces
     .trim()
 }
 export function prepareMermaidCode(code: string, style: 'classic' | 'handDrawn'): string {
   let finalCode = preprocessMermaidCode(code)
 
-  // Special handling for gantt charts
-  if (finalCode.trim().startsWith('gantt')) {
-    // For gantt charts, preserve the structure exactly as is
+  // Special handling for gantt charts and mindmaps
+  if (finalCode.trim().startsWith('gantt') || finalCode.trim().startsWith('mindmap')) {
+    // For gantt charts and mindmaps, preserve the structure exactly as is
     return finalCode
   }
 
       return lines.length >= 3
     }
 
+    // Special handling for mindmaps
+    if (trimmedCode.startsWith('mindmap')) {
+      // For mindmaps, check if it has at least a root node
+      const lines = trimmedCode.split('\n').filter(line => line.trim().length > 0)
+      return lines.length >= 2
+    }
+
     // Check for basic syntax structure
-    const hasValidStart = /^(graph|flowchart|sequenceDiagram|classDiagram|classDef|class|stateDiagram|gantt|pie|er|journey|requirementDiagram)/.test(trimmedCode)
+    const hasValidStart = /^(graph|flowchart|sequenceDiagram|classDiagram|classDef|class|stateDiagram|gantt|pie|er|journey|requirementDiagram|mindmap)/.test(trimmedCode)
 
     // Check for balanced brackets and parentheses
     const isBalanced = (() => {