From 4c7351176cafeddb0c7be2828f24b2282ca9f742 Mon Sep 17 00:00:00 2001
From: GonzaHM <122193788+GonzaHM@users.noreply.github.com>
Date: Mon, 26 May 2025 17:26:56 +0900
Subject: [PATCH 01/11] fix: resolve Mermaid mindmap generation issue (#20227)
---
web/app/components/base/mermaid/index.tsx | 33 +++++++++++++++--------
web/app/components/base/mermaid/utils.ts | 19 ++++++++++---
2 files changed, 37 insertions(+), 15 deletions(-)
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index a484261a51..a0332ce819 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -91,6 +91,11 @@ const initMermaid = () => {
numberSectionStyles: 4,
axisFormat: '%Y-%m-%d',
},
+ mindmap: {
+ useMaxWidth: true,
+ padding: 10,
+ diagramPadding: 20,
+ },
maxTextSize: 50000,
})
isMermaidInitialized = true
@@ -289,11 +294,12 @@ const Flowchart = React.forwardRef((props: {
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()
}
@@ -352,6 +358,11 @@ const Flowchart = React.forwardRef((props: {
numberSectionStyles: 4,
axisFormat: '%Y-%m-%d',
},
+ mindmap: {
+ useMaxWidth: true,
+ padding: 10,
+ diagramPadding: 20,
+ },
}
if (look === 'classic') {
@@ -476,15 +487,15 @@ const Flowchart = React.forwardRef((props: {
'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,
}),
@@ -492,7 +503,7 @@ const Flowchart = React.forwardRef((props: {
'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,
}),
@@ -501,7 +512,7 @@ const Flowchart = React.forwardRef((props: {
// 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',
@@ -512,7 +523,7 @@ const Flowchart = React.forwardRef((props: {
} className={themeClasses.container}>
-