From b73f44671380d8740377ff186e78727a11ad5d54 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Wed, 29 Jan 2025 21:50:28 -0800
Subject: [PATCH] Fallback to show raw outputted diagram if fails rendering

---
 .../web/app/components/mermaid/mermaid.tsx        | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/interface/web/app/components/mermaid/mermaid.tsx b/src/interface/web/app/components/mermaid/mermaid.tsx
index d73a4447..bdbbe6a3 100644
--- a/src/interface/web/app/components/mermaid/mermaid.tsx
+++ b/src/interface/web/app/components/mermaid/mermaid.tsx
@@ -141,10 +141,17 @@ const Mermaid: React.FC<MermaidProps> = ({ chart }) => {
     return (
         <div>
             {mermaidError ? (
-                <div className="flex items-center gap-2 bg-red-100 border border-red-500 rounded-md p-3 mt-3 text-red-900 text-sm">
-                    <Info className="w-12 h-12" />
-                    <span>Error rendering diagram: {mermaidError}</span>
-                </div>
+                <>
+                    <div className="flex items-center gap-2 bg-red-100 border border-red-500 rounded-md p-1 mt-3 text-red-900 text-sm">
+                        <Info className="w-12 h-12" />
+                        <span>{mermaidError}</span>
+                    </div>
+                    <code className="block bg-secondary text-secondary-foreground p-4 mt-3 rounded-lg font-mono text-sm whitespace-pre-wrap overflow-x-auto max-h-[400px] border border-gray-200">
+                        {
+                            chart
+                        }
+                    </code>
+                </>
             ) : (
                 <div
                     id={mermaidId}