How we use Abstract Syntax Trees (ASTs) to turn Workflows code into visual diagrams

Cloudflare Workflows is a durable execution engine enabling developers to create complex, dynamic workflows by chaining steps, retrying on failures, and managing state across long-running processes, supporting applications like data pipelines and human-in-the-loop systems. Recently, Cloudflare introduced a feature that provides a complete visual diagram of each deployed workflow, enhancing developers' ability to visualize and understand the structure and execution flow of their applications. Unlike traditional visual workflow builders that rely on declarative configurations, Cloudflare Workflows are built with code, allowing for a robust, dynamic execution model. This model involves using Abstract Syntax Trees (ASTs) to statically derive the execution graph, tracking relationships among Promises and Await statements to determine parallel executions, blocks, and connections between workflow components. The visual diagrams aim to aid in diagnosing and debugging by accurately translating the code into a graph that represents the workflow's execution, even when the code is minified. This feature is designed to evolve, providing developers with a comprehensive tool for real-time execution tracing, error detection, and workflow testing, while feedback from users is encouraged to refine the system further.