FLOW DIAGRAMS

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.

FLOW WIDGETS

The Flow library is included with your download of Axure RP and includes common shapes used for flow diagramming. Additional flow diagramming libraries can be found for download on the Axure website.


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.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

CONNECTOR MODE

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.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE