process workflow visualization

Question

I'm trying to visualize some steps in my application. Here is the scenario:

1. User A creates task and assigns it to user B
2. User B starts that task and adds some attachments to that task
3. User A accepts that attachments or rejects them
4. User B is doing some actions and then he is changing status of that task.
5. User A accepts those actions or rejects them

If everything is going right, the flow is simple:

^{download bmml source – Wireframes created with Balsamiq Mockups}

but when in Step 3 User A rejects attachments process is returning to Step 2.

like this:

^{download bmml source}

so basically I can have multiple steps and from every step I can go to next one to step back to previous (from step 5 to step 2 for example)

My question is: What would be the clearest way of visually presenting the flow of all steps. and what javascript library could be used to do this, that is simple and fast (I would like to avoid creating everything from scratch and reinventing the wheel)

Second part of question is bit off-topic (I'm aware of that), but maybe someone could advise potential implementation tool, if not please don't downvote.

Answer 1

Rather than trying to display this audit trail in a single, very large and complicated diagram, consider presenting it as a log with a simple diagram for each change.

In my wireframe below, I am showing the history of a single task. For each record, I am showing a brief description of who did what and then illustrating the flow between steps with a basic diagram.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Perhaps use a loop to symbolise that steps 2 and 3 could be iterative?

^{download bmml source – Wireframes created with Balsamiq Mockups}