In my project we have so many transactions created every day, we wanted to create a workflow diagram which shows visually what is current state and what is my next state and how many levels need to go.

can someone please share some best practices and paradigms to show workflow in visual way?

2 Answers 2


Perhaps I didn't get the question right, but in most of the modern processes, several kinds of pipelines or stages are established.


One way to solve the visualization could so use one of these. I'd suggest Kanban - known from the Scrum methodology.

  • Your workflow has clear stages
  • you can see where most of the transactions pile up (aka. the bottleneck)
  • there is a defined pre- and next stage
  • You can name the progress 3/5 stages

enter image description here

Progress indicator

In terms of visualization you could relate to the carousel or progress dots: multiple dots show progress/Stage

Process Graph

The more defined approach would be a BPMN Diagram where you highlight the current position of transactions. But not everyone can read those easily.

BPMN Graph example


Utilizing semantic architecture (natural elements and terms):

For linear workflows, you would want to create a breadcrumb that shows the future.

For variable path workflows, you would want to create a tree. Which in essence is a stacked, or multilevel, breadcrumb that shows the future.

This covers the structure, visual display would follow your current style guidelines.

enter image description here

One funny thing is that ul’s by nature are vertical elements. Breadcrumbs are horizontal navigation elements that use ul’s. This is visual display breaking holistic markup, but is accepted approach.

If I were to make any point, it would be to start with holistic markup, and add styles and behavior to improve UX. In this case you need a trail, trails are ul elements in general. While they can be generated with anything, even groupings of span tags, the internet as a whole wants certain tags for certain things.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.