How to use FlowPop!

Quick start

Here is the whole idea in five steps. The rest of this page explains each one.

1. Open the editor and click Templates for a ready-made flowchart, or start on the blank canvas.
2. Add shapes. Click a shape in the left panel, or drag it onto the canvas.
3. Connect them. Hover a shape and drag from a dot on its edge to the next shape.
4. Type the text. Double-click any shape or connector and type, then press Enter.
5. Save it. Press Save JSON to keep it, or open Export for PNG, SVG, GIF or print.

Good to know: FlowPop! autosaves in the browser you are using, so your work is still there when you come back. It does not follow you to another browser or device. Save a JSON file to move it.

1. Add shapes

The left panel holds 20 shapes in two groups: the everyday Flowchart shapes and a set of More shapes for special cases.

• Click a shape to place it in the middle of your view, or drag it to exactly where you want it.
• Double-click empty canvas to drop in a Process shape right there.
• Not sure what a shape is for? Hover the small ? on it for a plain-English explanation.
• Change a shape later without redrawing: select it and pick another type under Shape type in the Properties panel.

2. Connect shapes

Connectors show the order things happen in. There are three quick ways to make them:

1. Drag between shapes. Hover a shape and four small dots appear on its sides. Drag from a dot to another shape.
2. Drop on empty space. Drag from a dot and let go on empty canvas to create the next shape and connect it in one move.
3. Press Tab. Select a shape and press Tab to add the next connected step, ready for you to type.

Branching with a decision

A Decision shape asks a question. Connect two arrows out of it. FlowPop! labels the first one Yes and the second No for you, and you can double-click any label to change it.

Adjusting a connector

Click a connector to select it. The Properties panel then lets you change its label, routing (curved, straight or elbow), line (solid, dashed or dotted), arrowheads, color, and reverse its direction. Drag either end handle to attach it to a different shape.

3. Edit text and style

Text

• Double-click a shape or connector (or select a shape and press Enter or F2) and type.
• Press Enter to finish, Shift+Enter for a new line, Esc to cancel.
• Shapes grow taller automatically if the text needs more room.

Style

Select one or more shapes and use the Properties panel on the right:

• Color theme swatches change fill and border together. Use the Fill and Border pickers for any exact color.
• Border width, Font size, Font style (sans serif, serif, monospace, rounded, handwritten), Emphasis (bold, italic) and Font color.
• Position and size boxes for exact numbers, plus To front / To back, Duplicate and Delete.

Images and animated GIFs

Select a shape and use Image or animated GIF in the Properties panel, then press Add image or GIF…. You can:

• pick from the built-in library of 90 animations in six groups (status, actions, data & tech, time, people & business, and fun), with search, from loading spinners and success checks to charts, rockets, hearts and confetti,
• paste a link to any GIF or image on the web, or
• upload a file from your computer (up to 1.5 MB, stored inside your saved file).

Choose whether the picture fills the shape or fits inside it, and use Dim behind text to keep labels readable. GIFs keep moving on the canvas, in SVG exports and in embeds. PNG, GIF and print exports use a still frame. Linked images need the other site to allow it; uploaded and library images always work.

The Image / GIF shape

For pictures that stand on their own, add an Image / GIF shape from the Images & GIFs group in the shapes panel. The picker opens straight away. Link to any image file (PNG, JPG, WebP, SVG, AVIF or GIF), upload one, or pick from the library. The shape then offers:

• Fit and position: fit, fill or stretch, a focus point for cropping, flips, and keeping proportions while you resize.
• Frame: square, rounded, circle, hexagon or diamond, plus border, shadow and opacity.
• Adjust: brightness, contrast, saturation, grayscale, sepia, hue and blur.
• Motion: float, pulse, spin, wobble or blink, and a still picture option to pause a GIF.
• Caption below or on the picture, and a description for screen readers.

Animated connectors

Select a connector and choose an Animation: Flow (marching dashes), Comet (a light that travels along the line), Dots, Pulse or Glow, then set the speed. Use for all connectors applies your choice everywhere. Animations also play in SVG exports and embedded charts, and switch off if the visitor prefers reduced motion. Turn them off while editing with Animate connectors in the Diagram panel.

4. Arrange and tidy

• Select by clicking, Shift+click to add more, or drag a box on empty canvas. Ctrl+A selects everything.
• Move by dragging, or nudge with the arrow keys (hold Shift for bigger steps).
• Smart guides show pink lines when shapes line up. Hold Alt while dragging to turn snapping off for a moment.
• Resize by dragging a corner handle of the selected shape.
• Align several selected shapes with the six align buttons in the Properties panel.
• Copy, cut, paste and duplicate with Ctrl+C / X / V / D, or right-click a shape, a connector or the empty canvas for a menu.
• Undo and redo with Ctrl+Z and Ctrl+Y. Almost everything can be undone, including loading a template.

One-click tidy-up

Press the wand button on the zoom bar, or choose Top to bottom or Left to right under Auto-layout in the Diagram panel (click empty canvas to see it). FlowPop! lines everything up in clean rows and columns and routes loops neatly.

Move around the canvas

Scroll to pan, Ctrl+scroll to zoom, or hold Space and drag. The hand button switches to pan mode, and F or the fit button shows the whole diagram.

5. Start from a template

Choose Templates in the top bar to open the gallery: Login flow, Approval process, Bug triage, Customer support, Order fulfillment and Data pipeline. Click one and it replaces the canvas with a laid-out chart you can edit. Changed your mind? Ctrl+Z brings your previous diagram back.

6. Themes, colors and your logo

• Themes. Open the theme menu in the top bar. Professional is the default; others include Indigo, Ocean, Forest, Sunset, Monochrome, Dark and Blueprint. Shapes that use theme colors switch with it.
• Custom theme. Choose Customize colors… to set the accent, background, grid, connector and text colors and the fill and border of every shape color. Changes apply live, and you can start from any existing theme.
• Your logo. Choose Upload logo…, then set a brand name, corner and size under Brand & logo in the Diagram panel. The logo appears on PNG, SVG, GIF and printed output and is stored in your saved file.

7. Save, open and export

Save and open

• Save JSON (or Ctrl+S) downloads your diagram. In Chrome and Edge you choose the folder and name; other browsers ask for a name and use their download folder.
• Open (or Ctrl+O) loads a saved file. You can also drag the file onto the canvas. Shapes, connectors, styles, theme and logo all come back.
• Your work also autosaves in this browser only. To move to another device, save a file and open it there.

Export

Open the Export menu:

• PNG image and SVG vector (SVG stays sharp at any size).
• PNG · white background when you need a plain white page.
• Include background and Include grid dots switches. Turn the background off for a transparent image. With it on, the image uses your theme's background color.
• Animated GIF… (see below).
• Print / save as PDF, also on Ctrl+P. Choose "Save as PDF" in the print dialog to get a PDF.

8. Animated GIF

An animated GIF walks a viewer through your flow one step at a time. It is ideal for slides, chat messages, and documentation.

1. Make sure your shapes are connected, then choose Export → Animated GIF….
2. A preview window opens and builds the real animation. Change any setting and the preview refreshes.
3. Press Replay to watch it again, then Export GIF to save it.

9. Embed on your website

Show an interactive copy of your flowchart on a blog, wiki, documentation page or intranet. Visitors can drag to pan, zoom, and step through the flow, and your chart stays as sharp as the original.

1. Choose Export → Embed on a website….
2. Pick the height and which controls to show. A live preview of the embedded chart updates as you go.
3. Press Copy code and paste it into an HTML or custom code block on your page.

Nothing to host. The diagram is stored inside the code, so it works without any server and nothing is uploaded. If you change the diagram later, copy the code again. Prefer a file? Press Download page, upload it to your site, and choose Link to a file I host for a shorter snippet.

Some website builders and email tools strip iframes. If yours does, use its HTML or custom-code block, or link to the downloaded page instead.

10. Phones and tablets

On a touch screen, FlowPop! rearranges itself so everything stays within reach:

• Shapes and Properties open as drawers from the bottom bar. + adds a Process shape.
• Connect: select a shape, tap Connect, then tap the shape to link to. Tap empty space instead to create a new connected shape.
• Pinch to zoom and drag with two fingers to pan.
• Long-press a shape, connector or empty space for the cut, copy and paste menu. Double-tap a shape to edit its text.
• The ☰ menu at the top holds New, Templates, Open, Export, Theme and Help.

11. Keyboard shortcuts

On a Mac, use Cmd in place of Ctrl.

Tips for clear flowcharts

• Keep each shape to one action, with a short verb phrase such as “Send email”.
• Give every flowchart one Start and at least one End.
• Label every arrow that leaves a Decision.
• Flow top-to-bottom or left-to-right, and let Auto-layout do the alignment.
• Use color sparingly: one color for normal steps and one to call out exceptions.

Troubleshooting