We have a function in our application that allows us to run a task. Depending on if the task succeeds or fails, it does a different task afterwards. This task chain/tree continues until no more tasks are defined for the success or fail result.
We have a request to be able to show all possible paths of this tree-like structure so a user can get a visual overview of the chain without viewing each task's details individually and creating the visualization in their head themselves.
My question is, how do I best visualize this tree while making it clear what the success and fail states are for each task?
In the image below the example being shown is the following: If 1 passes it goes to 3. If 1 fails, it goes to 2. If 2 passes, it goes to 100. If 2 fails, it goes to 5.
Here are my current ideas as to how to do this:
For (1), the success paths would go downwards while the failures would go towards the right. The problem is that as there are more failures, the subsequent tasks become smaller as they have to fit in the original row's size.
For (2), this would show each pass/fail task tabbed over from the parent task to signify it's position in the tree. However the problem is that as the path of successes grows, the initial task's failure gets pushed further down the page.
For (3), this is a variation of (2) but just showing more like a flowchart. This has similar space issues as (2), but just in the opposite orientation and also it seems less intuitive with only 2 nodes per level.