UML, flow diagram between pages


I remember seeing something similar in college, but due to having already spent many years I forgot.

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 user profile he can have access to the page and I can differentiate in the diagram with a color relative to the profile that has access. This is more or less so that I can document the pages and the flow.

asked by anonymous 26.07.2015 / 17:21

3 answers


After your edit, it's clearer to understand what you need. In that case, I do not think a Sequence Diagram is the best choice. The sequence diagram models the communications (or transitions, if any) over time between the entities involved. Thus, its great use is to represent the logical sequence in which actions, usually in a specific use case, are carried out by all involved (users and components of a system).

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

  • The logical structure of the website, ie which pages are linked to which other pages
  • Properties of certain transitions, such as if only one profile is able to make / allow certain transition.
  • So, I agree more with colleague's answer @rray about using State diagram . In it you can represent each page as a state of your system, and in the transitions add information (even the color you suggested yourself) to indicate its properties.

    Wireframes, which I I mentioned in comments , would be most useful if you want to go into a higher (but not final - that is, very low level) detail 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 more informal type of diagram, you can draw the transition arrows from specific areas of a screen sketch, for example to indicate whether the user should always click on the same region to navigate, on side columns to access tools , etc.

    It should be noted that although I think the Sequence Diagram is not the most appropriate, it does not mean that you can not use it. You will probably only have to do several of them, for each scenario navigation. And even though I am answering this question with the best that I can infer from my experience, I still think it is a bit opinion-based, as there is no truly correct answer.     

    26.07.2015 / 21:18

    It would be the Sequence Diagram .


    The Sequence Diagram is one of the UML tools used for   represent interactions between objects in a scenario, carried out through   operations or methods (procedures or functions). This diagram is   built from the Uses Case Diagram. First, it is defined   the role of the system (Use Cases), then it is defined as the   software will perform its role (Sequence of operations).

    wikipedia source

    26.07.2015 / 17:32

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

    Status Diagram or state machine is for displaying transitions of objects, systems, or protocols.

    Activity diagram , serves to model workflows, process algorithms, much like a flowchart the difference is that the latter does not support parallel activities.

    26.07.2015 / 17:50