Flow diagrams help to visually communicate processes such as use cases, page flows, and business processes. Learn how to create flow diagrams using flow shapes and connectors.

Document processes with

Flow Diagrams

Hope you got the hang of creating Flow Diagrams using flow shapes and connectors.

To generate a diagram based on the page hierarchy in the sitemap, first open or create a page where you want to create the diagram. Then, select the root page of the sitemap branch you want to generate; right-click and choose “Generate Flow Diagram” from the context menu. You have the choice of generating a Standard or Right Hanging diagram.

This automatically creates a flow diagram with references to the pages in the branch. You can then edit the generated diagram like any other flow diagram.

Adding a reference page to a flow shape lets you link the shape to a page in the Sitemap. If you rename a page in the Sitemap, the text on the flow shape will reflect the change. This can be useful in page flow diagram. Clicking the flow shape in the prototype will automatically link to its referenced page without having to create an interaction.

To assign a reference page to a flow shape, right-click the flow shape in the wireframe, select Edit Flow Shape -> Edit Reference Page in the context menu and choose a page. You can also drag and drop pages directly from the Sitemap pane on to the wireframe to create a flow widget that references the page.

Flow diagrams are managed in the Sitemap pane with pages. 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 from the other. To mark 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 from a page to a flow diagram.

Use the flow shapes in the Flow widget library to create your flow diagram. Flow shapes differ from wireframe widgets because they have connection points on each side for attaching connectors.

To view the available flow shapes, select “Flow” from the dropdown menu in the Widgets pane. Similar to wireframe widgets, you can add shapes to the wireframe by dragging and dropping from the Widgets pane.

Use the editor toolbar and context menu to edit the styles and properties of the flow shapes. To change the shape of a widget after you’ve added it to the wireframe, right-click and choose a shape from the “Edit Flow Shape” submenu. If you can’t find the shape you’re looking for, you can import one using the Image widget in the Flow library so it has connection points.

Use Flow diagrams to communicate a variety of processes including use cases, page flows, and business processes. A lot of folks use them in Axure RP to provide a high level view of the tasks you can accomplish through the pages in the design. A variety of shapes are available to represent the different 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.

To connect two flow widgets while in Connector Mode, 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 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.

By default, the connectors will automatically reroute to avoid other widgets. Right click on a connector and choose Editor Connector->Do Not AutoReflow to manually route the connector.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

The Round Up

Flow Diagrams Overview

Create Flow Diagrams

Flow Shapes

Connector Lines

Add Reference Pages

Generate Flow Diagram

Marking Pages as Flow Diagrams

Before you can add connector lines you must change the selection mode to Connector Mode by clicking on the Connector Mode button in the editor toolbar.

It should be towards the top with the other selection mode buttons.

Connector Mode