Combine wireframe screens with flow arrows to create wireflow diagrams showing UI and navigation together.
A wireflow is a flowchart whose nodes are wireframes: each screen in a flow is drawn as a small, simplified mockup, and arrows between nodes show how a user moves from screen to screen. This tool combines those two representations into a single diagram so interface and navigation stay visible together. The mistake most people make is treating it as a plain flowchart and reducing each screen to a labeled box, which throws away exactly the UI detail that makes the format useful. Keep each node minimal - a few placeholder rectangles per screen - and let the arrows do the narrative work.
A concrete input and expected output from the current implementation.
Input
Three screens: 'Login' with email and password fields plus a Sign In button; 'Home' as a dashboard; 'Error' with a message and a Try Again button. Flows: Login leads to Home on valid credentials; Login leads to Error on invalid credentials.
Expected output
A wireflow diagram with three wireframe nodes and two labeled arrows. Login is drawn with two input bars and a button, Home with a grid placeholder, Error with a message bar and a button. Two arrows leave Login: 'valid credentials' points to Home, 'invalid credentials' points to Error. No arrows leave Home or Error, so both are terminal nodes.
Each screen in the input becomes one wireframe node and each flow entry becomes one arrow carrying its label, so the branching structure - one node with two labeled exits - appears exactly as specified, and screens with no flows become terminal nodes. The counts reconcile: three screens, two flows, three nodes, two arrows.
Every screen you add becomes a node drawn as a miniature wireframe - a device-shaped rectangle holding placeholder bars and boxes for the elements on that screen, with the screen name attached. The node keeps its identity as a real screen rather than an abstract step, which is what separates a wireflow from an ordinary flowchart and also why the diagram stays legible only if each node stays coarse.
You connect nodes with arrows in reading order, usually top to bottom or left to right. Each arrow can carry a short label stating the condition or action that moves the user to the next screen, such as 'valid login' or 'cancel'. When one node has several outgoing arrows the diagram branches, and the full set of branches becomes the navigation map of the product.
A flowchart uses abstract boxes and diamonds for steps and decisions, so it can represent anything. A wireflow uses wireframes as its nodes, so every step shows the interface elements involved. If each step in your process is a screen interaction, the wireflow's extra detail earns its keep; if logic happens off-screen, a plain flowchart is clearer.
For a single screen, or for flows where the interface barely changes between steps, a plain wireframe or flowchart communicates more with less work. Wireflows earn their cost from about three distinct screens upward, where the navigation between them is exactly what needs review. If the diagram gets too dense to scan, split it into two flows.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.