It's a Flowchart of Wireframes. Animated.

Represent user interactions and workflows with wireflow diagram - flowchart of wireframes

Effortlessly create a wireframe-based flow chart

Wireframes is a widely adopted UX tool that allows designer and client to work together in identifying the content and functionality of screens. A wireflow makes UX even more effective by harnessing the power of wireframe and flowchart, creating a step-based UX diagram that illustrates the steps and decision points of particular scenarios and the possible navigation paths throughout these steps.

The wireflow flowchart editor of Visual Paradigm allows fast creation of wireframe-based flowchart. Create flowcharts of any complexity and show them to your clients in both animation and print form.

Wireflow Diagram
Construct wireflow with resource

Quick construction of wireflow

Use the resource tools to create wireflow scenes through simple drag-and-drop. It's simple, straight-forward and fast.

Associate point of trigger

Associate the point of trigger

Unambiguously indicate where the point of trigger taken place by connecting the triggering element with the forwarding scene

Using dependency in wireflow

Represent multiple paths

Establish multiple paths with the use of decisions.

Draw or compose wireframes, at your own choice

A wireflow is formed by a sequence of screens called 'scenes'. Depending on the level of detail required, you can embed a detailed wireframe as a scene, or to compose a scene by selecting a simple component from a pre-defined wireframe symbol library. It's simply flexible!

Android phone wireframe

Powerful wireframe editor

Our wireframe tool features over 100 configurable wireframe elements for you to create wireframes for different platforms and devices - Android apps (phone/tablet), iPhone/iPad apps, desktop applications and web pages. The editing features also make wireframe creation fast, smooth and intuitive.

Wireframe symbol library

400+ ready-to-use wireframe symbol library

Compose a scene with pre-defined screen components. We prepared 400 ready-to-use screen symbols for the development of web and mobile flowcharts.

Animate path in action!

As long as a user interaction involves alternate and exceptional cases, there are multiple paths of wireflow that can be navigated. To reduce the application complexity, the wireflow editor allows you to specify a particular path (or often called scenario) of wireflow to be animated, so that we can split a user feature to be in sync with the partition of a simple user story or testing scenario. By this way, we can focus on some normal scenario of a features and in turns, the alternatives, making your development agile and just-in-time.

Animating a wireflow
Flexible path creation

Flexible flow creation

You are free to select any scenes to be included in a wireflow, in any order you like.

Configuring wireflow animation

Highly configurable animation

Settings like the color of various animation effects can be configured to suit your preference.

Labelled wireflow scenes

Labelled scenes

You can easily identify the ordering of scenes by referring to the numbers.

Play the animation as a storyboard slideshow

Besides animating a path in the wireflow diagram, you can also play the wireframes one by one as a storyboard slideshow. You can stay at a slide, navigate around the wireflow back and forth as you like. This facilitates deeper discussions on UX, which is particularly useful when people want to spend a bit more time on one or more scenes, or skip through some of them in the wireflow path.

Wireflow slideshow

Turn every software project into a successful one.