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

Cloudflare Workflows, a robust execution engine designed to enable developers to chain steps, retry on failure, and persist state across long-running processes, has recently introduced a significant enhancement. Last month, the company announced that every workflow deployed to Cloudflare now comes with a complete visual diagram in the dashboard. This development is a response to the growing importance of visualizing applications, especially as coding agents are increasingly responsible for building complex systems that may not always be easily readable by humans.

The ability to visualize workflows is crucial, as it provides insights into how steps connect, where they branch, and the overall flow of execution. Unlike traditional visual workflow builders that rely on declarative configurations such as JSON or YAML, Cloudflare Workflows are based on code, which can include Promises, Promise.all, loops, conditionals, and nested functions or classes. This dynamic execution model poses a challenge when it comes to rendering a visual diagram.

To address this challenge, Cloudflare has implemented Abstract Syntax Trees (ASTs) to statically derive the graph that represents the workflow. ASTs provide a structured representation of the code, making it possible to track Promise and await relationships and understand which steps run in parallel, which block execution, and how the pieces connect.

The process of translating TypeScript code into a visual representation involves parsing the code and constructing an AST. This tree-like structure allows developers to traverse the code and identify key execution points, such as steps that are executed in parallel or those that are dependent on the completion of others. By analyzing these relationships, Cloudflare can generate an accurate and informative visual diagram that reflects the actual execution flow of the workflow.

The visual diagram in the dashboard offers several benefits. Firstly, it provides a high-level overview of the workflow, making it easier for developers to understand the structure and flow of their code. This is particularly useful when dealing with complex workflows that involve multiple steps and conditional logic. Secondly, the diagram serves as a valuable tool for debugging and troubleshooting, as it allows developers to identify potential issues or bottlenecks in the execution flow.

In addition to these benefits, the visual diagram also enhances collaboration among team members. By providing a shared visual representation of the workflow, developers can more effectively communicate the intended flow and functionality of their code. This can lead to improved code quality and reduced time spent on understanding the workflow's structure.

To see the diagram for yourself, simply deploy your first workflow on Cloudflare and navigate to the dashboard. The visual representation will provide a dynamic and informative overview of your workflow's execution flow, making it easier to manage and maintain your code.

In conclusion, Cloudflare's integration of Abstract Syntax Trees (ASTs) to translate Workflows code into visual diagrams represents a significant advancement in the field of workflow management. By leveraging ASTs, the company has created a powerful tool that enables developers to better understand, debug, and collaborate on their workflows. As the importance of visualizing applications continues to grow, Cloudflare's innovation serves as a valuable example of how code can be transformed into a more accessible and intuitive format.