Create Flow Diagrams
Video
Flow Diagrams Video (3:18 min)
Flow Diagrams Overview
Flow diagrams are used to communicate a variety of processes including use cases, page flows, and business processes. They are frequently used in Axure RP to provide a higher level view of the tasks that can be accomplished through the pages in the design. Flow diagrams are managed in the Sitemap pane.
To designate a page as a flow diagram, right-click on the page in the sitemap and select Diagram Type->Flow. This changes the icon in the sitemap in Axure RP as well as the prototype. You don't need to designate a page as a flow diagram in order to create a flow diagram, but it helps to distinguish one item in the sitemap from another.
Add Flow Widgets
To create a flow diagram, use the flow shapes available in the Flow widget library. Flow widgets are different from wireframe widgets because they have connection points for attaching connectors. A variety of shapes are available to represent steps in a process. Some conventions exist for the meaning of each shape, but Axure RP does not restrict their use. In general, it is best to use them in a way that your audience will understand.
Select “Flow” from the dropdown menu in the Widgets pane toolbar (or click “Flow” in the toolbar if you are using Version 5.1 or earlier). Similar to wireframe widgets, drag and drop the flow widgets from the Widgets pane to the wireframe.
Use the editor toolbar and context menu to edit the styles and properties. To change the shape of a widget, right-click and choose a shape from the “Edit Flow Shape” submenu. If you cannot find a shape, you can import an image using the Image widget.
Connect Flow Shapes
To add a connector, first change the selection mode to Connector Mode by clicking on the Connector Mode button (F11) in the editor toolbar. To switch back to a selection mode, click one of the selection mode buttons in the toolbar (F9 and Ctrl+F9).
To connect two flow widgets, mouse over a connection point on a flow widget, click and drag, and mouse up on a connection point on the target flow widget. To connect existing connectors to a flow widget, mouse over the connector endpoint, click and drag, and mouse up on a connection point of the target flow widget.
To apply line ends like arrows and line patterns like dashes to connectors, select a connector and use the Line Pattern and Line Ends buttons in the editor toolbar.
Add Reference Pages to Flow Shapes
To assign a reference page to a flow shape, right-click the flow widget and select Edit Flow Shape->Edit Reference Page and choose a page. This creates a link to the page and the text on the flow widget reflects the name of the page.
You can also drag and drop a page directly from the Sitemap pane on to the wireframe. This automatically creates a flow widget that references the page.
Generate Flow Diagrams from Sitemap
To generate a diagram based on the page hierarchy in the sitemap, first open or create the page where the diagram will be generated. Then, select the root page of the sitemap branch to generate, right-click and select “Generate Flow Diagram” from the context menu. Choose to generate a Standard or Right Hanging diagram.
This creates a flow diagram with references to the pages in the branch. You can then edit the generated diagram like any other flow diagram.
Summary
Got the hang of it? You should now be able to create your own flow diagrams. If you have any additional questions, let us know at support@axure.com.
