feat(demo): use beautiful-mermaid for pipeline visualization

- Add beautiful-mermaid library (single-file ASCII renderer)
- Update pipeline_viz to generate mermaid graphs and render with beautiful-mermaid
- Creates dimensional network visualization with arrows connecting nodes
- Animates through effects and highlights active camera mode

engine/app.py

@@ -572,7 +572,7 @@ def run_pipeline_demo():
         get_registry,
         set_monitor,
     )
-    from engine.pipeline_viz import generate_animated_pipeline
+    from engine.pipeline_viz import generate_network_pipeline
 
     print("  \033[1;38;5;46mMAINLINE PIPELINE DEMO\033[0m")
     print("  \033[38;5;245mInitializing...\033[0m")
@@ -667,7 +667,7 @@ def run_pipeline_demo():
 
             camera.update(config.FRAME_DT)
 
-            buf = generate_animated_pipeline(w, frame_number)
+            buf = generate_network_pipeline(w, h, frame_number)
 
             ctx = EffectContext(
                 terminal_width=w,

engine/pipeline_viz.py

@@ -1,123 +1,133 @@
 """
-Pipeline visualization - ASCII text graphics showing the render pipeline.
+Pipeline visualization - Uses beautiful-mermaid to render the pipeline as ASCII network.
 """
 
 
-def generate_pipeline_visualization(width: int = 80, height: int = 24) -> list[str]:
+def generate_mermaid_graph(frame: int = 0) -> str:
-    """Generate ASCII visualization of the pipeline.
+    """Generate Mermaid flowchart for the pipeline."""
+    effects = ["NOISE", "FADE", "GLITCH", "FIREHOSE"]
+    active_effect = effects[(frame // 10) % 4]
 
-    Args:
+    cam_modes = ["VERTICAL", "HORIZONTAL", "OMNI", "FLOATING"]
-        width: Width of the visualization in characters
+    active_cam = cam_modes[(frame // 40) % 4]
-        height: Height in lines
 
-    Returns:
+    return f"""graph LR
-        List of formatted strings representing the pipeline
+    subgraph SOURCES
-    """
+        RSS[RSS Feeds]
-    lines = []
+        Poetry[Poetry DB]
+        Ntfy[Ntfy Msg]
+        Mic[Microphone]
+    end
 
+    subgraph FETCH
+        Fetch(fetch_all)
+        Cache[(Cache)]
+    end
+
+    subgraph SCROLL
+        Scroll(StreamController)
+        Camera({active_cam})
+    end
+
+    subgraph EFFECTS
+        Noise[NOISE]
+        Fade[FADE]
+        Glitch[GLITCH]
+        Fire[FIREHOSE]
+        Hud[HUD]
+    end
+
+    subgraph DISPLAY
+        Term[Terminal]
+        Web[WebSocket]
+        Pygame[PyGame]
+        Sixel[Sixel]
+    end
+
+    RSS --> Fetch
+    Poetry --> Fetch
+    Fetch --> Cache
+    Cache --> Scroll
+    Scroll --> Noise
+    Scroll --> Fade
+    Scroll --> Glitch
+    Scroll --> Fire
+    Scroll --> Hud
+
+    Noise --> Term
+    Fade --> Term
+    Glitch --> Term
+    Fire --> Term
+    Hud --> Term
+
+    Noise --> Web
+    Fade --> Web
+    Glitch --> Web
+    Fire --> Web
+    Hud --> Web
+
+    Noise --> Pygame
+    Fade --> Pygame
+    Glitch --> Pygame
+    Fire --> Pygame
+    Hud --> Pygame
+
+    Noise --> Sixel
+    Fade --> Sixel
+    Glitch --> Sixel
+    Fire --> Sixel
+    Hud --> Sixel
+
+    style {active_effect} fill:#90EE90
+    style Camera fill:#87CEEB
+"""
+
+
+def generate_network_pipeline(
+    width: int = 80, height: int = 24, frame: int = 0
+) -> list[str]:
+    """Generate dimensional ASCII network visualization using beautiful-mermaid."""
+    try:
+        from engine.beautiful_mermaid import render_mermaid_ascii
+
+        mermaid_graph = generate_mermaid_graph(frame)
+        ascii_output = render_mermaid_ascii(mermaid_graph, padding_x=3, padding_y=2)
+
+        lines = ascii_output.split("\n")
+
+        result = []
         for y in range(height):
-        line = ""
+            if y < len(lines):
-
+                line = lines[y]
-        if y == 1:
+                if len(line) < width:
-            line = "╔" + "═" * (width - 2) + "╗"
+                    line = line + " " * (width - len(line))
-        elif y == 2:
+                elif len(line) > width:
-            line = "║" + " RENDER PIPELINE ".center(width - 2) + "║"
+                    line = line[:width]
-        elif y == 3:
+                result.append(line)
-            line = "╠" + "═" * (width - 2) + "╣"
-
-        elif y == 5:
-            line = "║ SOURCES ══════════════> FETCH ═════════> SCROLL ═══> EFFECTS ═> DISPLAY"
-        elif y == 6:
-            line = "║   │                    │                    │            │"
-        elif y == 7:
-            line = "║   RSS                  Poetry               Camera      Terminal"
-        elif y == 8:
-            line = "║   Ntfy                 Cache               Noise       WebSocket"
-        elif y == 9:
-            line = "║   Mic                                      Fade        Pygame"
-        elif y == 10:
-            line = "║                                             Glitch      Sixel"
-        elif y == 11:
-            line = "║                                             Firehose   Kitty"
-        elif y == 12:
-            line = "║                                             Hud"
-
-        elif y == 14:
-            line = "╠" + "═" * (width - 2) + "╣"
-        elif y == 15:
-            line = "║ CAMERA MODES "
-            remaining = width - len(line) - 1
-            line += (
-                "─" * (remaining // 2 - 7)
-                + " VERTICAL "
-                + "─" * (remaining // 2 - 6)
-                + "║"
-            )
-        elif y == 16:
-            line = (
-                "║ "
-                + "●".center(8)
-                + " "
-                + "○".center(8)
-                + " "
-                + "○".center(8)
-                + " "
-                + "○".center(8)
-                + " " * 20
-                + "║"
-            )
-        elif y == 17:
-            line = (
-                "║  scroll up      scroll left    diagonal     bobbing    "
-                + " " * 16
-                + "║"
-            )
-
-        elif y == 19:
-            line = "╠" + "═" * (width - 2) + "╣"
-        elif y == 20:
-            fps = "60"
-            line = (
-                f"║ FPS: {fps} │ Frame: 16.7ms │ Effects: 5 active │ Camera: VERTICAL "
-                + " " * (width - len(line) - 2)
-                + "║"
-            )
-
-        elif y == 21:
-            line = "╚" + "═" * (width - 2) + "╝"
-
             else:
-            line = " " * width
+                result.append(" " * width)
 
-        lines.append(line)
+        status_y = height - 2
+        if status_y < height:
+            fps = 60 - (frame % 15)
+            frame_time = 16.6 + (frame % 5) * 0.1
+            cam_modes = ["VERTICAL", "HORIZONTAL", "OMNI", "FLOATING"]
+            cam = cam_modes[(frame // 40) % 4]
+            effects = ["NOISE", "FADE", "GLITCH", "FIREHOSE"]
+            eff = effects[(frame // 10) % 4]
 
-    return lines
+            anim = "▓▒░ "[frame % 4]
+            status = f" FPS:{fps:3.0f} │ Frame:{frame_time:4.1f}ms │ {anim} {eff} │ Camera:{cam}"
+            status = status[: width - 4].ljust(width - 4)
+            result[status_y] = "║ " + status + " ║"
 
+        if height > 0:
+            result[0] = "═" * width
+            result[height - 1] = "═" * width
 
-def generate_animated_pipeline(width: int = 80, frame: int = 0) -> list[str]:
+        return result
-    """Generate animated ASCII visualization.
 
-    Args:
+    except Exception as e:
-        width: Width of the visualization
+        return [
-        frame: Animation frame number
+            f"Error: {e}" + " " * (width - len(f"Error: {e}")) for _ in range(height)
-
+        ]
-    Returns:
-        List of formatted strings
-    """
-    lines = generate_pipeline_visualization(width, 20)
-
-    anim_chars = ["▓", "▒", "░", " ", "▓", "▒", "░"]
-    char = anim_chars[frame % len(anim_chars)]
-
-    for i, line in enumerate(lines):
-        if "Effects" in line:
-            lines[i] = line.replace("═" * 5, char * 5)
-
-        if "FPS:" in line:
-            lines[i] = (
-                f"║ FPS: {60 - frame % 10} │ Frame: {16 + frame % 5:.1f}ms │ Effects: {5 - (frame % 3)} active │ Camera: {['VERTICAL', 'HORIZONTAL', 'OMNI', 'FLOATING'][frame % 4]} "
-                + " " * (80 - len(lines[i]) - 2)
-                + "║"
-            )
-
-    return lines