Tools - Using ASTs to Visualize Workflows Code

What Happened

Cloudflare recently announced a significant update to its Workflows feature. Every workflow now includes a visual diagram in the dashboard. This enhancement aims to help developers visualize their applications better. With workflows being just code, understanding how steps connect and branch is crucial. The visualization process utilizes Abstract Syntax Trees (ASTs) to translate TypeScript code into these diagrams.

How It Works

Workflows can execute steps dynamically, meaning that steps can run in parallel or sequentially based on the code's logic. This dynamic execution model presents challenges when rendering diagrams. To tackle this, Cloudflare fetches the workflow script at deployment time, allowing for a comprehensive parsing of the code. The AST is created to represent the workflow, which is then used to generate a visual graph that illustrates the workflow's structure.

Challenges Faced

Rendering accurate diagrams involves tracking relationships between steps and functions. The workflow engine does not inherently know the execution order of steps, which is vital for creating a meaningful diagram. Additionally, minified JavaScript can complicate parsing. Cloudflare addressed this by implementing the oxc-parser, which processes various forms of minified code efficiently. This parser converts the minified JavaScript into AST node types, enabling the generation of the graphical representation.

Future Improvements

As the diagram feature is still in beta, Cloudflare plans to iterate and enhance the visual representations continually. The goal is to ensure that the diagrams accurately reflect the workflow's execution flow, making it easier for developers to understand their code. By improving this tool, Cloudflare aims to empower developers to manage their workflows more effectively and intuitively.