Planning board

Planning is the project's free-form canvas. Open a project in Flow and choose Planning in the sidebar. To add something, drag its icon from the insert palette, the strip of icons down the left edge, and drop it on the canvas. The new node lands where you drop it. Clicking an icon doesn't add anything.

These icons add a node:

• The sticky note adds a note, a card of text.
• The chain link adds a link node, which holds a web address.
• The speech bubble adds a comment.
• The calendar adds a calendar that shows today's date.
• The picture adds an image.
• The upload arrow adds a file node for an attachment.

The shapes icon at the top right (Toggle insert palette) hides and shows the palette.

Planning saves the canvas on its own a moment after each change, so there is no Save button. It also keeps where you've moved and zoomed to, and reopens on the planning file you last had open. If a save fails, Flow shows "Couldn't save the board." and tries again with your next change.

Planning belongs to the project, so everyone in the project works on the same planning files. It doesn't update live: a teammate's changes appear the next time you open Planning.

Two people editing at the same time can overwrite each other's work, because the later save replaces the earlier one.

Planning can hold several planning files, each a separate canvas. The Files panel lists them, with how many nodes and links (connections) each has and when it last changed. The header shows the file you're in, after Planning.

• Create file, the + in the panel's header, adds an empty file named Planning file and a number, and opens its name for editing.
• Click a file to open it. The view zooms to fit what's on it.
• Rename file, the pencil: type the new name, then press Enter or click away. Esc cancels. An empty name keeps the old one, and a name that's already taken gets a number, like Roadmap (2).
• Duplicate file, the copy icon, makes a copy with Copy added to its name and opens it.
• Delete file, the trash icon, removes the file straight away, without asking, and it can't be restored. You can't delete the last file.

A project's Planning starts with one empty file, Untitled Board. The panel icon at the top right (Toggle planning files) hides and shows the panel.

Drag an empty part of the canvas to move around it. To zoom, hold Ctrl (⌘ on Mac) and scroll, or pinch on a trackpad. Scrolling on its own doesn't move or zoom the canvas.

The controls at the bottom of the canvas zoom out (the minus) and in (the plus), and show the current zoom between them. Click the percentage to fit everything on the planning file into view. Zoom runs from 10% to 200%.

Click a node to select it, and drag it to move it. When you let go, it snaps to a grid so nodes line up. To resize a note, link node, image, file node or calendar, select it and drag its bottom-right corner. Each kind of node has a minimum size.

To select several nodes, hold Shift and click each one, or hold Shift and drag across the canvas: the box selects every node it touches. Click an empty part of the canvas to clear the selection.

Press Delete or Backspace to delete what's selected. Flow doesn't ask first, and Planning has no undo. Deleting a node also deletes its connections. While you're typing in a node, those keys edit the text instead.

Selecting a node swaps the insert palette for that node's settings. The back arrow at the top of the strip clears the selection and brings the palette back.

A note is a card of text. Select it and type: the text saves as you write, and line breaks are kept. With a note selected, the strip on the left formats the whole note:

• The B, I and U icons turn bold, italic and underline on and off.
• The alignment icon moves the text from left to center to right, one step per click.
• The color swatch sets the card's color. Pick one of 15 colors, or type a hex code under Custom Hex.

A link node holds a web address. Select it and type or paste the address in the box that reads Enter a link URL. The address is kept as text and doesn't open from the canvas. Link nodes take a card color too.

A comment holds one line of text. Type it, then press Enter or choose Send. Text you haven't sent isn't kept, and sending again replaces the comment.

To connect two nodes, select the first one, then drag from the small square at its top-right corner onto the other node. On a comment, hover over it and drag from the dot on its right edge. A connection is a curved line with an arrow at the end. It can start at a calendar but can't end on one.

Click a connection to select it, and drag the dot in its middle to bend the curve. With a connection selected, the strip on the left styles it:

• The color swatch sets the line's color.
• The right arrow turns the arrowhead at the end on and off.
• The T adds a label, typed in Label Text, that shows in the middle of the line.
• The line icon switches between a solid and a dashed line.
• The stacked lines set the thickness: Thin (the default), Medium or Thick.
• The pulse icon animates the line.

Each change saves as you make it. To remove a connection, select it and press Delete or Backspace.

An image node shows a placeholder until you add a picture. Select it, choose the picture icon at the top of the strip on the left, then click the drop area in Change Image or drag an image onto it. Set the Compression Quality (from 10% to 100%, 80% to start; lower makes a smaller file) and choose Replace Image. Images wider or taller than 2048 pixels are scaled down to fit.

Replacing an uploaded image deletes the old version, so the dialog offers a Download button to keep a copy first.

With an image selected, the strip on the left also has:

• The T, which opens Edit Caption: set the Caption Text, Background Opacity, Background Color and Text Color, then choose Save changes. New images show the caption Untitled Image. Clear the text to hide the caption.
• Two curved arrows, which turn the image 90 degrees left or right.
• Two flip icons, which mirror it horizontally or vertically.
• The crop icon, which opens the image full screen with a crop box. Drag the box's edges and corners, then choose the check mark (Apply Crop). The circular arrow (Reset Crop) starts over, and the × cancels.
• The pencil, which turns on drawing.

Replacing or cropping an image removes any drawing on it.

To draw on an image, select it and choose the pencil in the strip on the left. The image opens full screen with drawing turned on, and these tools down its left side:

• Pencil draws. Choose it again (Stop Drawing) to stop.
• Eraser rubs out parts of the drawing.
• Brush Size picks one of four brush sizes.
• Brush Color picks one of eight colors. The brush starts red.
• Clear All erases the whole drawing, without asking.

Each stroke saves when you finish it. The drawing sits on top of the image, so the picture underneath doesn't change.

Double-click any image to see it full screen, with the same tools. Download Image saves it as a PNG with the drawing on it. Close the view with the × or by clicking outside the image.

A file node holds one attachment of any type, and shows No file selected until you add one. Select it, choose the upload icon in the strip on the left, then click the drop area in Upload File or drag a file onto it, and choose Upload File.

The node then shows the file's name and size. Its download icon (Download) opens the file in a new browser tab, and so does the download icon in the strip. Uploading another file replaces the attachment and deletes the old version, so the dialog offers a Download button to keep a copy first.

The color swatch in the strip sets the node's color.

A calendar node shows today's date. To change how it looks, select it, choose the gear at the top of the strip on the left to open Calendar Style, pick a style and a theme, and choose Save Changes:

• Day shows today's weekday and date. New calendars use it.
• Month shows this month, with today marked.
• Events shows today's date beside the month.
• Light or Dark sets the theme. New calendars are Light.

The smiley face in the strip adds a reaction to the calendar: Like, Love, Laugh, Wow, Sad, Angry, Celebrate or Fire. Each reaction shows on the calendar with a count, and clicking it there adds one more.

• Delete or Backspace deletes what's selected
• Shift and click adds a node to the selection
• Shift and drag selects every node the box touches
• Ctrl and scroll (⌘ and scroll on Mac) zooms, and so does pinching on a trackpad
• Double-click an image to see it full screen
• Enter sends a comment
• Enter saves a planning file's new name, and Esc cancels it