Fix Mermaid syntax error and enhance hero section

- Add sanitize_mermaid_text() to escape special characters in node names
- Fixes "Syntax error in text" when using Local Demo MCP with parentheses in names
- Update hero section with feature table and quick start guide

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

Co-Authored-By: Claude <[email protected]>

app.py

@@ -378,6 +378,21 @@ def parse_metadata_to_graph(metadata_text: str, source_type: str) -> Tuple[Linea
         return graph, f"Error parsing metadata: {str(e)}"
 
 
+def sanitize_mermaid_text(text: str) -> str:
+    """Sanitize text for use in Mermaid diagrams by escaping special characters."""
+    if not text:
+        return "Unknown"
+    # Replace characters that conflict with Mermaid syntax
+    # Parentheses conflict with node shapes, brackets with labels
+    text = text.replace("(", " - ").replace(")", "")
+    text = text.replace("[", " ").replace("]", " ")
+    text = text.replace("{", " ").replace("}", " ")
+    text = text.replace('"', "'")
+    text = text.replace("<", "").replace(">", "")
+    text = text.replace("#", "")
+    return text.strip()
+
+
 def generate_mermaid_from_graph(graph: LineageGraph) -> str:
     """Generate Mermaid diagram code from a LineageGraph."""
     if not graph.nodes:
@@ -414,18 +429,21 @@ def generate_mermaid_from_graph(graph: LineageGraph) -> str:
     if len(categories) > 1:
         for cat, nodes in categories.items():
             if cat != "default":
-                lines.append(f"    subgraph {cat.replace('_', ' ').title()}")
+                lines.append(f"    subgraph {sanitize_mermaid_text(cat.replace('_', ' ').title())}")
                 for node in nodes:
-                    shape = f"[{node.name}]" if node.type in ["table", "model"] else f"({node.name})"
+                    safe_name = sanitize_mermaid_text(node.name)
+                    shape = f"[{safe_name}]" if node.type in ["table", "model"] else f"({safe_name})"
                     lines.append(f"        {node.id}{shape}")
                 lines.append("    end")
             else:
                 for node in nodes:
-                    shape = f"[{node.name}]" if node.type in ["table", "model"] else f"({node.name})"
+                    safe_name = sanitize_mermaid_text(node.name)
+                    shape = f"[{safe_name}]" if node.type in ["table", "model"] else f"({safe_name})"
                     lines.append(f"    {node.id}{shape}")
     else:
         for node in graph.nodes:
-            shape = f"[{node.name}]" if node.type in ["table", "model"] else f"({node.name})"
+            safe_name = sanitize_mermaid_text(node.name)
+            shape = f"[{safe_name}]" if node.type in ["table", "model"] else f"({safe_name})"
             lines.append(f"    {node.id}{shape}")
 
     # Add edges
@@ -755,8 +773,21 @@ with gr.Blocks(
 
     **AI-powered data lineage extraction and visualization for modern data platforms**
 
-    Extract, visualize, and export data lineage from dbt, Airflow, BigQuery, Snowflake, and more.
-    Export to enterprise data catalogs like Collibra, Microsoft Purview, and Alation.
+    ### What You Can Do
+
+    | Feature | Description |
+    |---------|-------------|
+    | **Extract Lineage** | Parse metadata from dbt manifests, Airflow DAGs, SQL DDL, BigQuery, and custom JSON |
+    | **Visualize** | Generate interactive Mermaid diagrams with color-coded nodes and relationship labels |
+    | **Export** | Export to enterprise data catalogs: OpenLineage, Collibra, Microsoft Purview, Alation |
+    | **MCP Integration** | Connect to MCP servers for AI-powered metadata extraction |
+
+    ### Quick Start
+
+    1. **Try the Demo**: Enable "Use MCP Server" and select "Local Demo MCP" to fetch sample lineage metadata
+    2. **Use Your Data**: Paste your dbt manifest, Airflow DAG, or custom JSON in the Text/File tab
+    3. **Load Samples**: Click "Load Sample" in the Demo Gallery to explore pre-built examples
+    4. **Export**: Use the Export section to generate catalog-ready JSON
 
     ---
     """)