Screen Flow Diagram (Wireframing)
The screen flow diagram supports the following elements:
- Start - defines the beginning of the screen flow.
- Flow - connects two elements.
- Screen - shows a wireframe of a user interface screen
- Decision - creates a branch in the screen flow.
- End - defines the end of the modeled screen flow.
Except for general (undefined) interaction, various specific kinds of user interactions are supported:
- keyboard + mouse
and also non-user interaction: timer
Each flow may be limited by a condition. The condition is displayed in the brackets - e. g. [the text box is active]
The Referenced Element property allows you to choose an element from the screen diagram (e.g. button) for which you want to model the interaction represented by the flow (e.g. click on the button).
You can further specify which buttons are used during the mouse interaction:
- Left Button
- Right Button
- Middle Button
The flow also includes Referenced Element field that allows you to specify which element is used in user interaction - e.g. which button in the window was clicked.
You can further specify which key or combination of keys is used in this user interaction. The shortcut key can be set using the Shortcut Key Definition parameter. Examples of possible values: X, Enter, Ctrl + V.
Key and Mouse Combination Interactions
The screen-flow diagram allows you to specify interactions that include key and mouse combinations - e.g. CTRL key pressed and left mouse button clicked. The shortcut key can be set in the same way as simple key interactions using the Shortcut Key Definition parameter. Alternatively, you can also click into the key field in the diagram editor and enter the desired key name there.
The Screen element represents a single view in your application. You can set an user interface diagram to the Screen element. The diagram will be rendered inside the element. You can change the appearance and the meaning of the Screen element using the Screen Type property. You can change it either using the Properties sidebar (or dialog) or the context menu (right-click on the screen element). You can choose from the following screen types:
- Window - suitable especially for desktop application views.
- Browser - represents a view inside a web browser. You can use it to show that your app navigates to the web browser or for any web app views.
- Full-Screen - represents a full-screen mode of your app.
- Smartphone - suitable for mobile app views.
How to Set Specific View to Screen Element
If you want to set a specific view diagram (user interface diagram, web page diagram, or mobile app diagram) to a screen element, you have several options:
- Drag&drop a diagram from the project tree in the Project sidebar
- Click on the Set View Diagram button in the context bar for the screen element and then choose the desired diagram from the picker dialog
- Right-click on the Screen element and choose the Diagrams submenu and choose the Associate New Diagram item, if you want to create a new view from scratch or the Associate Existing Diagram item, if you want to show an existing diagram inside the Screen element.
Screen Flow Diagram Example
Download Screen Flow Diagram Tool
Are you new here? You may be interested in downloading our screen flow diagram tool Software Ideas Modeler and start to design your screen flow diagrams: