Added errors to output the raw mermaid code

app.py

@@ -198,17 +198,27 @@ index_html = """
             submitBtn.textContent = "Generating...";
             targetDiv.innerHTML = "Generating diagram...";
 
+            let mermaidSyntax = "";
             try {
                 // Call the @app.api function registered in python (name + param must match)
                 const result = await client.predict("/generate_flowchart", { src_code: codeValue });
-                const mermaidSyntax = result.data[0];
+                mermaidSyntax = result.data[0];
 
                 // Inject the raw string into a clean layout block and re-trigger parsing
                 targetDiv.innerHTML = `<pre class="mermaid">${mermaidSyntax}</pre>`;
                 await mermaid.run();
 
             } catch (error) {
-                targetDiv.innerHTML = `<p style='color:red;'>Error during generation: ${error.message}</p>`;
+                // On failure show the error AND the exact raw Mermaid we tried to render,
+                // so a parse error can be diagnosed from the real output. textContent is
+                // used for the raw string so newlines/special chars can't break the page.
+                targetDiv.innerHTML = "<p style='color:red;'>Error during generation: " + error.message + "</p><p style='color:#111;font-weight:bold;text-align:left;'>Raw Mermaid output:</p>";
+                const dbg = document.createElement("pre");
+                dbg.style.color = "#111";
+                dbg.style.whiteSpace = "pre-wrap";
+                dbg.style.textAlign = "left";
+                dbg.textContent = mermaidSyntax;
+                targetDiv.appendChild(dbg);
             } finally {
                 submitBtn.disabled = false;
                 submitBtn.textContent = "Generate Flowchart";