AXURE RP FOR FLOW DIAGRAMS
You can use Axure RP to make flowcharts, user flows, business process models, and other flow diagrams. Add shape, image, and snapshot widgets to serve as flow elements, and then use the "connector" tool to draw smart lines between them. By creating flow diagrams in Axure RP, you can keep your analysis and documentation right next to your prototypes.
Shape, image, and snapshot widgets from the Default library, along with custom shape widgets (those drawn with the pen tool), can also be used for building flow diagrams.
To switch between libraries, click on the dropdown at the top of the Libraries pane. Locate the Flow library in the resulting list and add a few widgets from that library to the page so that you can try connecting them using connector widgets (next section).
CONTINUE WITH CORE TRAINING
© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
Change your cursor to the connector tool using the third option in the Tools toolbar item (top left area of the Axure RP interface) or via the keyboard shortcut. (Check the full list of Axure RP keyboard shortcuts in our Axure RP 8 Hotkeys PDF.)
With your cursor in connector mode, hover over any widget to see its connector points. To select a connector point, move your mouse cursor over it; notice that a red selection circle appears. Click and hold on the circle to begin the connector line, and then drag it to the target widget and release over one of its connector points to place the other end of the connector line.
CUSTOM CONNECTOR POINTS
Connector points can be added, deleted, and moved within a widget—along its border, or even to a location in the interior of the widget. To get into edit mode, select a widget on the canvas and then click the "Connect Pt" tool in the top toolbar (by default, it's in under the "More" dropdown.) Once in edit mode, circles on your widget will indicate current locations of connectors. Click and drag a circle to move that connector. Click an empty spot on the widget to add a new connector in that location. Right-click to delete. To leave edit mode, click elsewhere on the canvas to deselect the widget.
Moving an in-use connector or an already connected widget will cause the connector path to reroute, keeping the two widgets connected.
GENERATE FLOW DIAGRAM
You can generate a flow diagram based on the sitemap structure of your project. Open the page that should contain the flow diagram. In the Pages pane, right-click the parent page of the structure and choose "Generate Flow Diagram". A flow diagram will appear on the open page. The generated flow diagram will include the page itself along with all subordinate pages.
You can create a flow shape for a single page by dragging that page name from the Pages pane onto the canvas.
CREATING AND STYLING YOUR FLOW DIAGRAM
If you need to create a large number of similar flow widgets, feel free to copy-paste flow widgets already in your diagram as an alternative to dragging new ones from the Widgets pane. As with any widget, a flow shape or shapes can be quickly copied by dragging the selected shapes while holding [CTRL] (Windows) / [ALT] (Mac).
All of the widgets in the Flow library start out in the "Flow" widget style. If you’d like to update the style of every flow widget in your file at once, you can make your styling changes to just one of the flow widgets and then click the "Update" control in the Inspector's Style tab. (More on updating widget styles and creating new ones in the next article.)
Flow shapes created via a generated flow diagram or by dragging from the Pages pane will already be using the "reference page" feature. This feature automatically sets the text on a widget to the name of a referent page. If the name of the referent page is changed, the text on the widget will update accordingly. The reference page feature is available for any shape widget. To create or edit a reference page setting, select a widget and then click on the text reading "Reference Page" in the Properties tab of the Inspector.
By default, widgets that reference a page will open that page when the widget is clicked in the browser. Customize this behavior in the "Interactions" section of the HTML Generator.