Fix Mermaid rendering with mermaid.ink SVG service

- Use mermaid.ink external service to render diagrams as SVG images
- This avoids JavaScript execution issues in Gradio/HuggingFace Spaces
- Add link to Mermaid Live Editor for interactive editing
- Add spaces>=0.44.0 to fix hot-reloading startup warning
- Update tests to match new HTML structure

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

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

app.py

@@ -44,57 +44,37 @@ EXPORT_FORMATS = ["OpenLineage", "Collibra", "Purview", "Alation"]
 # Mermaid Rendering
 # ============================================================================
 
+import base64
+import urllib.parse
+
 def render_mermaid(viz_code: str) -> str:
-    """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;")
+    """Render mermaid diagram using mermaid.ink service (renders as SVG image)."""
+    # Encode the mermaid code for the URL
+    # mermaid.ink accepts base64 encoded diagram
+    encoded = base64.urlsafe_b64encode(viz_code.encode('utf-8')).decode('utf-8')
+
+    # Create the mermaid.ink URL for SVG rendering
+    img_url = f"https://mermaid.ink/svg/{encoded}"
 
-    # Generate unique ID for this diagram
-    import random
-    diagram_id = f"mermaid-{random.randint(10000, 99999)}"
+    # Also create a link to the live editor for users who want to modify
+    editor_url = f"https://mermaid.live/edit#base64:{base64.b64encode(viz_code.encode('utf-8')).decode('utf-8')}"
 
-    # 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 style="background: white; padding: 20px; border-radius: 8px; min-height: 200px;">
+        <img src="{img_url}" alt="Lineage Graph" style="max-width: 100%; height: auto;" />
+        <div style="margin-top: 10px; font-size: 12px; color: #666;">
+            <a href="{editor_url}" target="_blank" style="color: #7c3aed;">Open in Mermaid Live Editor</a>
         </div>
     </div>
-    <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
 
 
+def render_mermaid_code(viz_code: str) -> str:
+    """Return the raw mermaid code for display."""
+    return viz_code
+
+
 # ============================================================================
 # Lineage Parsing and Visualization Generation
 # ============================================================================

requirements.txt

@@ -1,4 +1,5 @@
 gradio>=6.0.0
+spaces>=0.44.0
 anthropic>=0.25.0
 google-cloud-bigquery>=3.10.0
 requests>=2.31.0

tests/test_app.py

@@ -12,9 +12,10 @@ class TestLineageExtractors(unittest.TestCase):
     def test_render_mermaid_wraps_and_inits(self):
         viz = "graph TD\n A --> B"
         html = render_mermaid(viz)
-        self.assertIn('class="mermaid"', html)
-        self.assertIn('graph TD', html)
-        self.assertIn('mermaid.init', html)
+        # Using mermaid.ink service for SVG rendering
+        self.assertIn('mermaid.ink/svg/', html)
+        self.assertIn('<img', html)
+        self.assertIn('mermaid.live/edit', html)
 
     def test_extract_lineage_from_text_returns_html_and_summary(self):
         # Test with valid JSON input
@@ -22,7 +23,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('class="mermaid"', html)
+        self.assertIn('mermaid.ink/svg/', html)
         self.assertIn('Parsed', summary)
 
     def test_extract_lineage_from_text_empty_input(self):
@@ -34,12 +35,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('class="mermaid"', html)
+        self.assertIn('mermaid.ink/svg/', 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('class="mermaid"', html)
+        self.assertIn('mermaid.ink/svg/', html)
         # Summary can be either 'Lineage' or 'Parsed' depending on response
         self.assertTrue('Lineage' in summary or 'Parsed' in summary)