Skip to content

Add flow visualization API (Mermaid + ASCII rendering) #79

@dgenio

Description

@dgenio

Context / Problem

Flows are opaque data structures. Users can't see the pipeline shape, data flow between steps, or where errors occurred without manually inspecting execution_log records. For debugging, documentation, and demos, a visual representation is essential.

Existing issue #46 covers a CLI viz command, but there is no library-level API for generating visualizations programmatically. Users should be able to render flows in their notebooks, docs, or web UIs.

Proposal

Add library-level visualization methods to Flow and ExecutionResult:

# Static flow visualization
print(flow.to_ascii())
#  [double] ──► [add_ten] ──► [format_result]

print(flow.to_mermaid())
# graph LR
#   A[double] --> B[add_ten]
#   B --> C[format_result]

# Execution result overlay
print(result.to_mermaid())
# graph LR
#   A[double ✓ 3ms] --> B[add_ten ✓ 1ms]
#   B --> C[format_result ✗ ERROR]
#   style C fill:#f66

Core capabilities:

  1. flow.to_ascii() — simple ASCII pipeline diagram for terminal output
  2. flow.to_mermaid() — Mermaid graph syntax for GitHub README, notebooks, and web rendering
  3. result.to_mermaid() — Mermaid diagram with execution status overlay (success/failure/timing per step)
  4. flow.to_dot() — Graphviz DOT format for high-quality image rendering (stretch goal)
  5. Schema annotations — optionally show input/output field names on edges

Acceptance Criteria

  • Flow.to_ascii() returns a string with an ASCII pipeline diagram
  • Flow.to_mermaid() returns valid Mermaid graph syntax
  • ExecutionResult.to_mermaid() overlays success/failure status and timing on each step
  • Failed steps are visually distinct (color/style in Mermaid)
  • Generated Mermaid renders correctly on GitHub (test by pasting in a .md file)
  • Works for linear flows (1 step, 3 steps, 10+ steps)
  • Works for empty flows (no steps)
  • Optional show_schemas=True adds field names to edges
  • No external dependencies required (pure string generation)
  • Tests cover: linear flow, single step, empty flow, failed execution, schema annotations

Implementation Notes

  • Implement in chainweaver/viz.py and add methods to Flow/ExecutionResult via mixin or direct methods
  • Mermaid syntax: graph LR for left-to-right, graph TD for top-to-bottom
  • For future DAG flows (Design and implement DAG-based flow model with topological execution #10), the visualization should naturally handle non-linear topologies
  • Consider adding to_svg() that calls Mermaid CLI if available (optional, non-blocking)

Dependencies

Tasks

  • Create chainweaver/viz.py with ASCII and Mermaid generators
  • Add to_ascii() and to_mermaid() methods to Flow
  • Add to_mermaid() method to ExecutionResult with status overlay
  • Add optional schema annotation support
  • Add unit tests in tests/test_viz.py
  • Add visualization usage to README
  • Verify Mermaid output renders on GitHub

Metadata

Metadata

Assignees

No one assigned

    Labels

    ai-friendlyDesigned for AI-assisted implementationarea:coreCore library internalsarea:observabilityLogging, tracing, and monitoringcomplexity:averageModerate effort, some design neededpriority:mediumImportant but not blockingsize:MMedium effort (1-3 days)type:featureNew feature or capability

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions