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

Cloudflare's Workflows now generate visual diagrams of workflow code in the dashboard, enabling developers to understand complex processes at a glance. To achieve this, Cloudflare employs Abstract Syntax Trees (ASTs) to statically derive the workflow graph, tracking parallel and blocking relationships between steps. This dynamic execution model requires parsing the code before runtime to accurately translate workflows into diagnostic graphs. The workflow engine, a "supervisor" Durable Object, triggers user workers via dynamic dispatch, executing steps concurrently and persisting results. However, generating diagrams for these dynamic workflows poses a challenge, as the engine doesn't inherently know the step order. To overcome this, Cloudflare's internal service parses the workflow code using ASTs and generates an intermediate graph representing WorkflowEntrypoints and step calls. The service then renders the diagram based on this graph, allowing developers to visualize their code and troubleshoot issues more effectively.