Wireflow is a free, open-source tool for sketching user flows. Drag wireframe screens onto a canvas, connect them, and export the result as an image or save it to a file you can open again. The editor runs in the browser: no account, and your diagram never leaves your machine unless you use the optional AI assistant.
This repository is the app behind wireflow.co: a landing page at / and the editor at /app, built with Next.js and React Flow. It is a Next.js project bootstrapped with create-next-app (the starter notes are at the end).
Made by The Vanila Team and Automatio AI.
Features
- 125 screen templates in twelve categories (Article, Blog, E-Commerce, Features, Gallery, Header, Misc, Multimedia, Sign in, Socials, Flow, Mobile), with category chips and a search that looks in every category. Drag the panel's right edge (or use the arrow keys on it) to make it wider or narrower; the thumbnails fill the columns that fit.
- Mobile: 15 portrait phone screens (onboarding, sign in and up, home feed, list, detail, search, tab bar, menu, profile, chat, settings, cart, checkout, empty state). Their cards are 124 px wide instead of 220, so a phone screen is drawn at the same scale as a desktop one.
- Flow: steps found in most flows: a yes / no choice, a three-way choice, email sent, email code and email confirmed, and wizard steps 1, 2 and 3.
- Your own images: "Your image" at the top of the templates (or an image file dropped on the canvas) adds any picture as a card, a phone screenshot or a sketch, at its own shape. It is scaled down in the browser and kept with the diagram, in the file too; Wireflow warns when the browser's storage (about 5 MB) is getting full.
- Notes: "Note" at the top of the templates adds a box of free text. Double-click it to write (several lines), drag its corners to resize it, and connect or group it like a card.
- Estimates: give a card its hours in the Card panel. Groups show their total, and the header shows the project's; it opens a breakdown per group where an hourly rate turns hours into cost. Project stages add work that isn't a screen (design, QA, project management): fixed hours, or a percentage of the cards' hours. The rate and the stages are saved with the diagram, and Download CSV saves the table (cards, groups, stages, totals, rate and cost) as
wireflow-estimate.csv.
- Drag and drop templates onto a zoomable canvas, or tap one on a touch screen (a sideways swipe drags it).
- Connect screens from a card's bottom dot to another card. Each connection has its own label, line shape (smooth, polyline, rounded polyline), width (1 to 10 px) and colour.
- Edit cards: rename the header (double-click it, or in the Card panel), and hide or show it (H, Ctrl+H / Ctrl+K, or the panel).
- Groups: group a selection, nest groups, rename them, drag a card onto a group to add it or out of it to take it out. Ungroup keeps the cards; Delete removes the group with its cards.
- Organize: multi-select (a box), select all, bring to front and send to back. While two or more items are selected, a small "N selected · Clear" chip above the toolbar drops the selection in one click (so does Esc, or a click on empty canvas).
- Edit history: undo, redo, copy, paste (connections between copied cards come along) and delete. Undo survives a reload of the tab.
- Navigate: zoom in and out, fit to screen, actual size (1:1) and a minimap.
- Export the whole diagram as a JPG or PNG at twice the screen's pixel density, however large it is and whatever part of it is on screen.
- Save and open files: download the diagram as
wireflow.json and open it again later, here or in another browser. Files from the earlier gg-editor app open too, with their groups.
- Autosave: every change is saved in your browser's
localStorage.
- AI assistant (optional, bring your own Anthropic API key): describe a flow or a change in plain language and Claude edits the diagram, groups and notes included. It reads estimates, and changes them only when asked. Each change is one undo step. If you want, it remembers the key (encrypted) and keeps the chat after a reload.
- Works offline and installs as an app (PWA), once you have opened the editor online.
How it works
- Drag a screen. Pick a template from the left sidebar and drop it on the canvas (or click it to add it).
- Connect the flow. Hover a card, grab its bottom dot and drop it on another card. Select a card, connection or group to edit it in the panel on the right.
- Export. Use the image button in the toolbar for a JPG or PNG of the whole diagram. You don't need to save; the diagram is stored in your browser as you work. To keep an editable copy or move it to another browser, use Export JSON, and Open file to load it back.
On screens narrower than 1400 px, the toolbar's less common commands (copy, paste, delete, actual size, arrange, multi-select, group, export image) are under More tools. On a phone, AI, Open file and the estimate are under the More button in the header, the toolbar scrolls sideways, and the panel for a selected card, note, group or connection is a sheet above the toolbar. The Keyboard shortcuts panel collapses from its heading and remembers that choice; in windows shorter than 941 px, where it would cover the minimap, it starts collapsed.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
