UML, flow diagram between pages

Question

I remember seeing something like that in college, but because it’s been too many years.

Which diagram should I use to represent the flow between pages?

It would be similar to represent the general structure of the website. Example: on page X the user can have access to such other pages. As it is a web system, depending on the profile of the user it can have access to the page and I can differentiate in the diagram with a color relative to the profile that has access. That’s about it, so I can document the pages and the flow.

Answer 1

After your editing, it became clearer to understand what you need. In this case, I don’t think a Sequence Diagram is the best choice. The sequence diagram models communications (or transitions in your case) over time between the entities involved. Thus, its great use is to represent the logical sequence in which the actions, usually in a specific use case, are performed by all involved (users and components of a system).

From what I understand, your interest is more in representing two things:

1. The logical structure of the website, that is, which pages are linked to which other pages
2. Properties of certain transitions, for example, if only one profile is able to make/allow a certain transition.

So I agree more with the answer from Mr @rray, on the use of State diagram. On it you can represent each page as a state of your system, and in the transitions add information (even the color, which you yourself suggested) to indicate its properties.

Wireframes, that I mentioned in comments, would be more useful if you want to enter a higher level of detail (but not final - that is, very low level) as to which areas of each page should allow transitions. This helps you not only plan transitions, but also other aspects of user interaction. In this type of diagram, more informal, you can draw the transition arrows from specific areas of a sketch of the screen, for example to indicate if the user should always click in the same region to navigate, in side columns to have access to tools, etc.

Note that although I think that the Sequence Diagram is not the most appropriate one, it does not mean that you cannot use it. You’ll probably just have to do several of them, for each setting navigation. And, even if I answer this question with the best I can infer based on my experience, I still think it’s a little based on opinion, because there really isn’t a more correct answer.

Answer 2

Would be the Sequence diagram.

The Sequence Diagram is one of the UML tools used to represent interactions between objects of a scenario, performed through of operations or methods (procedures or functions). This diagram is constructed from the Use Case Diagram. First, it is defined what the role of the system (Use Cases) is then defined as the software will perform your role (Sequence of operations).

wikipedia source

Answer 3

To display this information there are two candidates, they are the state or activity diagram.

Status diagram or state machine serves to display transitions of objects, systems or protocols.

Diagram of activities, serves to model workflows, algorithmic processes, much like a flowchart the difference is that the latter does not support parallel activities.