DAG-like Workflow Visualization

Temporal (out of the box) only offers the WF visualization for the already executed steps - Timeline View.

This creates a capability gap for the UI scenarios when it is beneficial to see the whole WF regardless of how far the execution progressed.

The problem has been detected and even discussed in the Temporal community but without significant progress in addressing it.

The Temporalio.Graphs project is an attempt to address this problem.

The concept is simple: the worker registers a graph-generating interceptor and executes the workflow. The interceptor mocks all workflow activities by immediately returning the activity default result on the activity execution. It also records the activity “visit”. At the end of the workflow execution, the interceptor returns a complete dag captured as a Mermaid diagram:

The github project wiki also shows how to implement decisions DAG nodes as well as to make the Mermaid diagram interactive (e.g. show and update execution progress).

The concept can be easily ported to any other language SDK.

2 Likes

Neat! May also want to show on #show-us-what-you-got on Slack and send a PR to awesome-temporal.

I like the idea of using [Decision] attribute to help visualize the flow. We had similar ideas for a sample interceptor that made a diagram. What you built works well like the OpenTelemetry interceptor. As part of user metadata work which we hope to build very soon, we will expose a Workflow.CurrentDetails statically-settable property which will take an arbitrary markdown string to appear on the UI. We hope to support mermaid code fences like GitHub markdown does, allowing your visualization here to appear on the UI representing the live current workflow’s flow/state.