RooCodeInc · sairamreddy2211 · Jun 19, 2025 · Jun 19, 2025 · Jun 19, 2025 · Jun 19, 2025
@@ -0,0 +1,12 @@
+export async function createMermaidFixInstructions(error: string, code: string): Promise<string> {
+	return [
+		"Please fix the following Mermaid diagram.",
+		error ? `Error: ${error}` : "",
+		"Diagram code:",
+		"```mermaid",
+		code,
+		"```",
+	]
+		.filter(Boolean)
+		.join("\n\n")
+}
@@ -3,11 +3,14 @@ import { createModeInstructions } from "./create-mode"
 import { McpHub } from "../../../services/mcp/McpHub"
 import { DiffStrategy } from "../../../shared/tools"
 import * as vscode from "vscode"
+import { createMermaidFixInstructions } from "./fix-mermaid"
 
 interface InstructionsDetail {
 	mcpHub?: McpHub
 	diffStrategy?: DiffStrategy
 	context?: vscode.ExtensionContext
+	error?: string
+	code?: string
 }
 
 export async function fetchInstructions(text: string, detail: InstructionsDetail): Promise<string> {
@@ -18,6 +21,9 @@ export async function fetchInstructions(text: string, detail: InstructionsDetail
 		case "create_mode": {
 			return await createModeInstructions(detail.context)
 		}
+		case "fix_mermaid": {
+			return await createMermaidFixInstructions(detail.error || "", detail.code || "")
+		}
 		default: {
 			return ""
 		}

@@ -40,6 +40,7 @@ import { getModels, flushModels } from "../../api/providers/fetchers/modelCache"
 import { GetModelsOptions } from "../../shared/api"
 import { generateSystemPrompt } from "./generateSystemPrompt"
 import { getCommand } from "../../utils/commands"
+import { fetchInstructions } from "../prompts/instructions/instructions"
 
 const ALLOWED_VSCODE_SETTINGS = new Set(["terminal.integrated.inheritEnv"])
 
@@ -186,6 +187,15 @@ export const webviewMessageHandler = async (
 		case "askResponse":
 			provider.getCurrentCline()?.handleWebviewAskResponse(message.askResponse!, message.text, message.images)
 			break
+		case "fixMermaidChart":
+			const customInstruction = await fetchInstructions(
+				"fix_mermaid",
+				message.values as { error: string; code: string },
+			)
+			provider
+				.getCurrentCline()
+				?.handleWebviewAskResponse(message.askResponse!, customInstruction, message.images)
+			break
 		case "autoCondenseContext":
 			await updateGlobalState("autoCondenseContext", message.bool)
 			await provider.postStateToWebview()

@@ -39,6 +39,7 @@ export interface WebviewMessage {
 		| "webviewDidLaunch"
 		| "newTask"
 		| "askResponse"
+		| "fixMermaidChart"
 		| "terminalOperation"
 		| "clearTask"
 		| "didShowAnnouncement"

@@ -94,6 +94,22 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 	const { showCopyFeedback, copyWithFeedback } = useCopyToClipboard()
 	const { t } = useAppTranslation()
 
+	/**
+	 * Handles the "Fix Mermaid Diagram" button click.
+	 */
+	function handleFixMermaidDiagram(e: React.MouseEvent<HTMLButtonElement>) {
+		e.stopPropagation()
+		vscode.postMessage({
+			type: "fixMermaidChart",
+			askResponse: "messageResponse",
+			values: {
+				error,
+				code,
+			},
+			images: [],
+		})
+	}
+
 	// 1) Whenever `code` changes, mark that we need to re-render a new chart
 	useEffect(() => {
 		setIsLoading(true)
@@ -157,7 +173,7 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 			{isLoading && <LoadingMessage>{t("common:mermaid.loading")}</LoadingMessage>}
 
 			{error ? (
-				<div style={{ marginTop: "0px", overflow: "hidden", marginBottom: "8px" }}>
+				<div style={{ marginTop: "0px", overflow: "hidden", marginBottom: "8px", position: "relative" }}>
 					<div
 						style={{
 							borderBottom: isErrorExpanded ? "1px solid var(--vscode-editorGroup-border)" : "none",
@@ -187,8 +203,31 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 								}}></span>
 							<span style={{ fontWeight: "bold" }}>{t("common:mermaid.render_error")}</span>
 						</div>
-						<div style={{ display: "flex", alignItems: "center" }}>
+						<div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+							{/* Fix Mermaid Diagram Button */}
+							<button
+								style={{
+									background: "var(--vscode-button-background)",
+									color: "var(--vscode-button-foreground)",
+									border: "none",
+									borderRadius: "4px",
+									padding: "2px 8px",
+									fontSize: "12px",
+									cursor: "pointer",
+									boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+									marginRight: "0px",
+									display: "flex",
+									alignItems: "center",
+									height: "24px",
+								}}
+								aria-label={t("common:mermaid.buttons.retry")}
+								title={t("common:mermaid.buttons.retry")}
+								type="button"
+								onClick={handleFixMermaidDiagram}>
+								{t("common:mermaid.buttons.retry")}
+							</button>
 							<CopyButton
+								style={{ marginRight: 0, height: "24px" }}
 								onClick={(e) => {
 									e.stopPropagation()
 									const combinedContent = `Error: ${error}\n\n\`\`\`mermaid\n${code}\n\`\`\``

@@ -25,7 +25,8 @@
 			"save": "Desar imatge",
 			"viewCode": "Veure codi",
 			"viewDiagram": "Veure diagrama",
-			"close": "Tancar"
+			"close": "Tancar",
+			"retry": "Tornar a intentar"
 		},
 		"modal": {
 			"codeTitle": "Codi Mermaid"

@@ -25,7 +25,8 @@
 			"save": "Bild speichern",
 			"viewCode": "Code anzeigen",
 			"viewDiagram": "Diagramm anzeigen",
-			"close": "Schließen"
+			"close": "Schließen",
+			"retry": "Wiederholen"
 		},
 		"modal": {
 			"codeTitle": "Mermaid-Code"

@@ -25,7 +25,8 @@
 			"save": "Save Image",
 			"viewCode": "View Code",
 			"viewDiagram": "View Diagram",
-			"close": "Close"
+			"close": "Close",
+			"retry": "Retry"
 		},
 		"modal": {
 			"codeTitle": "Mermaid Code"

@@ -25,7 +25,8 @@
 			"save": "Guardar imagen",
 			"viewCode": "Ver código",
 			"viewDiagram": "Ver diagrama",
-			"close": "Cerrar"
+			"close": "Cerrar",
+			"retry": "Reintentar"
 		},
 		"modal": {
 			"codeTitle": "Código Mermaid"

@@ -25,7 +25,8 @@
 			"save": "Enregistrer l'image",
 			"viewCode": "Voir le code",
 			"viewDiagram": "Voir le diagramme",
-			"close": "Fermer"
+			"close": "Fermer",
+			"retry": "Réessayer"
 		},
 		"modal": {
 			"codeTitle": "Code Mermaid"

@@ -25,7 +25,8 @@
 			"save": "छवि सहेजें",
 			"viewCode": "कोड देखें",
 			"viewDiagram": "डायग्राम देखें",
-			"close": "बंद करें"
+			"close": "बंद करें",
+			"retry": "पुनः प्रयास करें"
 		},
 		"modal": {
 			"codeTitle": "मरमेड कोड"

@@ -25,7 +25,8 @@
 			"save": "Simpan Gambar",
 			"viewCode": "Lihat Kode",
 			"viewDiagram": "Lihat Diagram",
-			"close": "Tutup"
+			"close": "Tutup",
+			"retry":"Coba Lagi"
 		},
 		"modal": {
 			"codeTitle": "Kode Mermaid"

@@ -25,7 +25,8 @@
 			"save": "Salva immagine",
 			"viewCode": "Visualizza codice",
 			"viewDiagram": "Visualizza diagramma",
-			"close": "Chiudi"
+			"close": "Chiudi",
+			"retry": "Riprova"
 		},
 		"modal": {
 			"codeTitle": "Codice Mermaid"

@@ -25,7 +25,8 @@
 			"save": "画像を保存",
 			"viewCode": "コードを表示",
 			"viewDiagram": "ダイアグラムを表示",
-			"close": "閉じる"
+			"close": "閉じる",
+			"retry": "再試行"
 		},
 		"modal": {
 			"codeTitle": "Mermaidコード"

@@ -25,7 +25,8 @@
 			"save": "이미지 저장",
 			"viewCode": "코드 보기",
 			"viewDiagram": "다이어그램 보기",
-			"close": "닫기"
+			"close": "닫기",
+			"retry": "다시 시도"
 		},
 		"modal": {
 			"codeTitle": "머메이드 코드"

@@ -25,7 +25,8 @@
 			"save": "Afbeelding opslaan",
 			"viewCode": "Code bekijken",
 			"viewDiagram": "Diagram bekijken",
-			"close": "Sluiten"
+			"close": "Sluiten",
+			"retry": "Opnieuw proberen"
 		},
 		"modal": {
 			"codeTitle": "Mermaid-code"

@@ -25,7 +25,8 @@
 			"save": "Zapisz obraz",
 			"viewCode": "Zobacz kod",
 			"viewDiagram": "Zobacz diagram",
-			"close": "Zamknij"
+			"close": "Zamknij",
+			"retry": "Ponów"
 		},
 		"modal": {
 			"codeTitle": "Kod Mermaid"

@@ -25,7 +25,8 @@
 			"save": "Salvar imagem",
 			"viewCode": "Ver código",
 			"viewDiagram": "Ver diagrama",
-			"close": "Fechar"
+			"close": "Fechar",
+			"retry": "Tentar novamente"
 		},
 		"modal": {
 			"codeTitle": "Código Mermaid"

@@ -25,7 +25,8 @@
 			"save": "Сохранить изображение",
 			"viewCode": "Посмотреть код",
 			"viewDiagram": "Посмотреть диаграмму",
-			"close": "Закрыть"
+			"close": "Закрыть",
+			"retry": "Повторить"
 		},
 		"modal": {
 			"codeTitle": "Код Mermaid"

@@ -25,7 +25,8 @@
 			"save": "Resmi kaydet",
 			"viewCode": "Kodu görüntüle",
 			"viewDiagram": "Diyagramı görüntüle",
-			"close": "Kapat"
+			"close": "Kapat",
+			"retry": "Yeniden Dene"
 		},
 		"modal": {
 			"codeTitle": "Mermaid Kodu"

@@ -25,7 +25,8 @@
 			"save": "Lưu hình ảnh",
 			"viewCode": "Xem mã",
 			"viewDiagram": "Xem biểu đồ",
-			"close": "Đóng"
+			"close": "Đóng",
+			"retry": "Thử lại"
 		},
 		"modal": {
 			"codeTitle": "Mã Mermaid"

@@ -25,7 +25,8 @@
 			"save": "保存图片",
 			"viewCode": "查看代码",
 			"viewDiagram": "查看图表",
-			"close": "关闭"
+			"close": "关闭",
+			"retry": "重试"
 		},
 		"modal": {
 			"codeTitle": "Mermaid 代码"

@@ -25,7 +25,8 @@
 			"save": "儲存圖片",
 			"viewCode": "檢視程式碼",
 			"viewDiagram": "檢視圖表",
-			"close": "關閉"
+			"close": "關閉",
+			"retry": "重試"
 		},
 		"modal": {
 			"codeTitle": "Mermaid 程式碼"