Fix Mermaid visualization rendering and SSR mode

- Fixed Mermaid.js rendering to properly display graphs (not just text)
- Added unique IDs for each diagram to prevent conflicts
- Disabled SSR mode to fix Spaces hot-reloading error
- Updated tests to match new HTML structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -45,23 +45,54 @@ EXPORT_FORMATS = ["OpenLineage", "Collibra", "Purview", "Alation"]
 # ============================================================================
 
 def render_mermaid(viz_code: str) -> str:
-    """Wrap mermaid source in HTML and initialize mermaid when the HTML is inserted."""
+    """Render mermaid diagram using embedded script with proper initialization."""
+    # Escape HTML-sensitive characters but preserve newlines for mermaid
     safe_viz = viz_code.replace("<", "&lt;").replace(">", "&gt;")
-    init_script = (
-        "<script>"
-        "(function(){"
-        "function run(){"
-        "  if(window.mermaid){ mermaid.init(undefined, document.querySelectorAll('.mermaid')); }"
-        "  else { setTimeout(run,50); }"
-        " } run();})();"
-        "</script>"
-    )
-    return f"""
-    <div style="background: white; padding: 20px; border-radius: 8px; overflow: auto;">
-        <div class="mermaid">{safe_viz}</div>
+
+    # Generate unique ID for this diagram
+    import random
+    diagram_id = f"mermaid-{random.randint(10000, 99999)}"
+
+    # Complete HTML with embedded Mermaid.js and proper rendering
+    html = f'''
+    <div id="{diagram_id}-container" style="background: white; padding: 20px; border-radius: 8px; min-height: 200px;">
+        <div id="{diagram_id}" class="mermaid">
+{safe_viz}
+        </div>
     </div>
-    {init_script}
-    """
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <script>
+        (function() {{
+            // Initialize mermaid with configuration
+            if (typeof mermaid !== 'undefined') {{
+                mermaid.initialize({{
+                    startOnLoad: false,
+                    theme: 'default',
+                    securityLevel: 'loose',
+                    flowchart: {{
+                        useMaxWidth: true,
+                        htmlLabels: true,
+                        curve: 'basis'
+                    }}
+                }});
+
+                // Render the specific diagram
+                try {{
+                    const element = document.getElementById('{diagram_id}');
+                    if (element) {{
+                        mermaid.init(undefined, element);
+                    }}
+                }} catch (e) {{
+                    console.error('Mermaid rendering error:', e);
+                }}
+            }} else {{
+                // Retry if mermaid not loaded yet
+                setTimeout(arguments.callee, 100);
+            }}
+        }})();
+    </script>
+    '''
+    return html
 
 
 # ============================================================================
@@ -505,13 +536,6 @@ with gr.Blocks(
         mcp_status = gr.Textbox(label="Connection Status", interactive=False)
         test_btn.click(fn=test_mcp_connection, inputs=[mcp_server, mcp_api_key], outputs=[mcp_status])
 
-    # Mermaid.js loader
-    gr.HTML(
-        value='<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>'
-              '<script>mermaid.initialize({startOnLoad:false, theme:"default"});</script>',
-        visible=False
-    )
-
     # Main Tabs
     with gr.Tabs():
         # Tab 1: Text/File Input
@@ -718,4 +742,4 @@ with gr.Blocks(
 
 # Launch
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=False)

tests/test_app.py

@@ -12,7 +12,7 @@ class TestLineageExtractors(unittest.TestCase):
     def test_render_mermaid_wraps_and_inits(self):
         viz = "graph TD\n A --> B"
         html = render_mermaid(viz)
-        self.assertIn('<div class="mermaid">', html)
+        self.assertIn('class="mermaid"', html)
         self.assertIn('graph TD', html)
         self.assertIn('mermaid.init', html)
 
@@ -22,7 +22,7 @@ class TestLineageExtractors(unittest.TestCase):
         html, summary = extract_lineage_from_text(sample_json, "Custom JSON", "Mermaid")
         self.assertIsInstance(html, str)
         self.assertIsInstance(summary, str)
-        self.assertIn('<div class="mermaid">', html)
+        self.assertIn('class="mermaid"', html)
         self.assertIn('Parsed', summary)
 
     def test_extract_lineage_from_text_empty_input(self):
@@ -34,12 +34,12 @@ class TestLineageExtractors(unittest.TestCase):
 
     def test_extract_lineage_from_bigquery_returns_html_and_summary(self):
         html, summary = extract_lineage_from_bigquery("proj", "SELECT 1", "key", "Mermaid")
-        self.assertIn('<div class="mermaid">', html)
+        self.assertIn('class="mermaid"', html)
         self.assertIn('BigQuery', summary)
 
     def test_extract_lineage_from_url_returns_html_and_summary(self):
         html, summary = extract_lineage_from_url("https://example.com", "Mermaid")
-        self.assertIn('<div class="mermaid">', html)
+        self.assertIn('class="mermaid"', html)
         # Summary can be either 'Lineage' or 'Parsed' depending on response
         self.assertTrue('Lineage' in summary or 'Parsed' in summary)