# DAG-like Workflow Visualization

**URL:** <https://community.temporal.io/t/dag-like-workflow-visualization/15080>\
**Category:** Show & Tell\
**Tags:** dotnet-sdk\
**Created:** [November 10, 2024, 5:42am UTC](https://community.temporal.io/t/dag-like-workflow-visualization/15080 "2024-11-10T05:42:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Oleg\_Shilo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.temporal.io/oleg_shilo/32/6145_2.png) [@Oleg\_Shilo](https://community.temporal.io/u/Oleg_Shilo)\
**Post date:** [November 10, 2024, 5:42am UTC](https://community.temporal.io/t/dag-like-workflow-visualization/15080/1 "2024-11-10T05:42:59Z")

</div>

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](https://community.temporal.io/t/see-workflow-as-a-dag/2010) in the Temporal community but without significant progress in addressing it.

The [Temporalio.Graphs](https://github.com/oleg-shilo/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).

 ![f4ce18b2cdfd218705471dbe990f739cdabcb9ea_2_690x135](https://us1.discourse-cdn.com/flex016/uploads/temporal/original/2X/8/84f945acfedbcadccc92845c4b7e221049780924.png)

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

---

<div class="post-metadata">

**Author:** ![Chad\_Retz](https://sea2.discourse-cdn.com/flex016/user_avatar/community.temporal.io/chad_retz/32/1396_2.png) [@Chad\_Retz](https://community.temporal.io/u/Chad_Retz)\
**Post date:** [November 12, 2024, 1:16pm UTC](https://community.temporal.io/t/dag-like-workflow-visualization/15080/2 "2024-11-12T13:16:30Z")

</div>

Neat! May also want to show on `#show-us-what-you-got` on [Slack](https://t.mp/slack) and send a PR to [awesome-temporal](https://github.com/temporalio/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](https://github.com/temporalio/sdk-dotnet/issues/359) 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.