A tour of the workspace

Every flowss studio is built on the same frame, so once you know your way around one you know your way around all nine. The work itself — the canvas — fills the screen, and every control floats over it in a small "island" that sits in the same place in every studio: where you are and your file menu at the top left, people and sharing at the top right, tools down the left, properties on the right when you ask for them, the AI prompt at the bottom centre and the view controls at the bottom right. This page tours each of those regions control by control, then covers the command palette, the keyboard cheat sheet, themes, the two layouts, the header bar used by a few pages, and how everything rearranges itself on tablets and phones.

At a glance

Which pages use which frame

Eight studios use the island layout described on this page: Studio, Weave, Lab, BPMN, Science, Figure, Sketch and Evidence. Study, the Library, the Flow console and Scholar use a slimmer 48-pixel header bar instead, described in "The header bar" below. Both frames share the same platform controls — the studio switcher, the command palette, the AI points reading, the cheat sheet and your account — so nothing you learn in one is lost in the other.

Modern and Classic layouts

The island frame comes in two arrangements, and the choice applies to the whole product.

To switch, use any of these:

• the app menu (top-left button) → Layout → Modern or Classic;
• the layout button in the view island, labelled Switch to classic layout or Switch to modern layout;
• the command palette action Switch layout (Modern ↔ Classic).

Your choice is remembered in this browser and applied before the page first paints, so a Classic user never sees the floating layout flash first. On a tablet-width window the layout button is disabled and explains: "The classic layout needs a window at least 1024px wide". In Classic, the rail's panels stay open until you close them (with their ×, their rail button, or by opening another), and the studio remembers which panel was open across reloads.

The identity island (top left)

The identity island answers "where am I and what is this?" with exactly four controls.

The app button and app menu

The first control shows the flowss mark and the current studio's name with a ▾. It combines the old home link and studio switcher, and its menu holds the rest of the platform:

A small dot on the mark shows the Flow Dock's phase at a glance. When you are signed out, the app menu's footer shows your AI points reading.

The document title and switcher

The second control is the name of the document on screen. What clicking it does depends on the studio:

• In studios that keep several documents open — the Studio's figures, Figure's figures, the Lab's documents, BPMN's diagrams, Sketch's boards and Evidence's reviews — clicking the title opens the document switcher, with ▾ beside the name.
• Where a studio holds one document, clicking the title starts renaming it.

To rename, double-click the title or focus it and press F2. Type the new name, press Enter to keep it or Escape to put the old one back.

The document switcher lists your documents as a radio list, the open one checked. Each row has its own Duplicate and Delete buttons at the right edge — faint until you hover the row, and reachable with the arrow keys — so you can act on a document without opening it. Delete always asks first, for example: "Delete “Figure 2”? This cannot be undone." When the list is longer than seven documents, a Find a document search field heads it. If your plan caps how many documents a studio can hold, a live meter heads the list, and any action the cap blocks says why. The last row is New document (for example "New figure").

Where a studio keeps its documents in an order (for example the Studio's and Figure's figures), you can drag rows to reorder them, or move the focused row with ⌥↑ and ⌥↓ (Alt+↑ and Alt+↓). ⌥⌘← and ⌥⌘→ step to the previous and next document without opening the list (in the Studio the same keys step between figures).

The status glyph

The third control is a single glyph that says where your document stands. It is quiet most of the time and loud only when it matters.

Select the glyph, press Enter on it, or press ⇧⌘M (Shift+Ctrl+M) to open the status popover. It gathers every checker the studio runs in one place: a Problems list with a Fix N safe button first (N is the number of fixes that are safe to apply automatically), then compliance, readiness and any check report the studio produces, and the save line ("Saved 2 min ago", for example). Because every checker feeds the same popover, you never see two counts that disagree. In the Studio the popover also shows the figure's line and character counts and a readiness chip.

The ⋮ file menu

The fourth control, ⋮ (labelled File), holds the studio's document verbs in the same eight sections, in the same order, in every studio: new, templates, import, export, send (to another studio), history, document (information and settings about this document) and danger (deletions). Every row in it is also a command in the command palette, so the menu and the palette always agree. A row that does not apply on the current screen stays in the menu, disabled, with its reason shown — for example "Not available here".

The people island (top right)

The people island answers "who is here, and what do I do next?"

Share and live sessions

Share opens a popover with everything to do with letting someone else in:

• Copy link — copies a link that opens this document. It only appears when a link can actually open your document: a document that lives only in your browser shows Save to share a link instead (which runs the studio's save where it has one), or a disabled row explaining "Save it to share a link".
• Start live session — "Copies a link that edits with you in real time". If your plan does not include live sessions, the row is locked and shows the plan's own explanation.
• While a session is live: the connection state, Copy live link, and Leave session ("Your document stays as it is").
• While live, voice: Join voice (peer-to-peer, marked beta), and once joined Mute microphone / Unmute microphone, Share your screen / Stop sharing your screen, and Leave voice.
• How live sessions work — a link to the explanation.
• Send to studio ▸ — the studio's hand-off menu, where it has one. See Moving work between studios.

While a session runs, Share wears a small red dot so you can always see you are live. In the Studio the popover also carries embedding, collaboration and project-invite rows. See Sharing and permissions and Live collaboration.

The account button and menu

Signed in, the account button is a 28-pixel avatar — your picture, or your initial on a colour of your own. A ring appears around it when your AI points are running low (amber) or exhausted (red), so you notice without opening anything. Its menu holds:

Signed out, the account button is a quiet Sign in text button. When your work on screen lives only in this browser, its tooltip says so — the reason to sign in, next to the button that does it.

The tool rail (left)

The rail is one vertical island of the studio's tools, divided into groups by thin lines. Each button's tooltip gives its name and shortcut. A rail holds three kinds of item:

• Tools — select, pen, shape and so on. Most tools hand back to Select after one use; a few ("sticky" tools, such as the Hand) stay on until you change them.
• Screens — the studio's modes or views. These are the same list as the command palette's "Go to" rows, so you can also reach any of them by typing its name after ⌘K.
• Flyouts — buttons that open a panel beside the rail: a shape library, a source list, a tool's options.

Only one flyout is open at a time. Clicking its button again closes it; Escape, a click outside it or using a tool from it also closes it, and focus returns to the button. A flyout keeps its state while closed, so a half-typed search or a scroll position is still there when you reopen it. Some flyouts can be pinned to stay open while you work: a pinned flyout ignores clicks outside it, and Escape from inside it hands focus back to its button instead of closing it.

The rail never scrolls and never runs off the bottom of the screen. When the tools do not fit, the last ones fold into a More menu at the end.

As an example, the Studio's rail holds Engines & templates (/), Show code / Hide code (⌘\), Style, Icon library, Data → Chart, Diagram Intelligence, Diagram timeline, TikZ / LaTeX, and — when the markmap engine is active — Mind map outliner. Each studio's own rail is described on its studio page; see The Studio editor for the Studio.

The work sheet

Two studios have a working pane that sits beside the rail: the Studio's code sheet (show or hide it with ⌘\) and the Lab's workbench and code pane (also ⌘\). In Modern the sheet floats beside the rail; in Classic it is docked and pushes the canvas over.

The inspector drawer and side panels (right)

The inspector drawer

Properties belong to a selection, and a pane that is empty most of the time wastes a third of the screen, so the inspector is closed until you ask for it. Open it by:

• double-clicking an element;
• pressing ⌘. (Ctrl+.), which also closes it again;
• choosing a "Go to" screen for one of its tabs in the command palette (for example "Go to Variables" in BPMN), which opens the drawer on that tab.

In Modern it floats over the right of the canvas, between the top and bottom islands, so it never covers Share or the view controls, and the studio's Zoom to fit keeps your content clear of it. It never opens on an empty tab: if the tab you last used has nothing to show, it opens on the first tab that does. Its tabs are a proper tab list you can move through with the arrow keys. Drag its left edge to resize it, or focus the edge and use ← and →, with Home and End to jump to the limits. Escape closes it while focus is inside it; × closes it from anywhere; either way focus returns to whatever opened it.

Some studios let you pin the drawer with the Keep open button in its header. A pinned drawer stays open, and Escape hands focus back rather than closing it; the pin is remembered per studio. On a tablet the drawer takes about 40% of the screen and pinning is remembered but not applied; on a phone it becomes a bottom sheet covering about 70% of the screen. In Classic the drawer is the right-hand pane, flush with the window edge, pushes the canvas rather than covering it, and behaves as pinned.

The Studio's side panel

The Studio uses a resizable side panel on the right for its larger panes: the flowss Studio Agent, Collaborate, Comments, Diagram Intelligence and the Diagram timeline, one at a time. A small switcher above the panel moves between the flowss Studio Agent, Collaborate and Comments. These panes are being refined, so their exact layout may differ from what you see here; what they do is described in The flowss Studio Agent and its modes and Comments and review.

The width you choose is remembered across studios and visits, and is reduced automatically if your window becomes too narrow to leave a usable canvas. On small screens the panel becomes a drawer over the right edge.

The prompt island (bottom centre)

The prompt is the single place to ask the studio's agent for something, in every studio that offers AI. Each studio's prompt names its own agent: Ask flowss Studio Agent in the Studio, Ask flowss Lab Agent in the Lab, Ask flowss Weave Agent in Weave, and so on. At rest it is a slim pill: an attach button (where the studio accepts files), the text field (for example "Describe a diagram or a change…" in the Studio, or "Describe or change the process…" in BPMN), a Quick | Agent switch where the studio offers both, an AI settings button where the studio has request settings, and Send.

When you send, a result sheet opens upward from the pill — the studio's refine history, its agent's panel or advice list lives there — and Close <agent name> results (for example Close flowss Studio Agent results) (or Escape) closes it. Up to three suggestion chips float above the pill on an empty canvas and whenever the field has focus; selecting one either runs it or fills the field. Hide suggestions dismisses them, and the studio remembers that you did.

When there is less than 300 pixels of room — a tablet with a wide rail, or any phone — the pill becomes a single sparkle button, named for the studio's agent (for example Ask flowss Studio Agent), that opens the same form and results as a panel (a bottom sheet on a phone), with Quick | Agent on its own row. When AI is not available, the field says why instead of inviting a request (for example "AI is off here"), and where there is something you can do about it a Set up link appears beside the field. When your AI points run low, a small amber chip such as "12 left" appears on the prompt; selecting it opens your account page. If a request fails, the error appears in a red line above the prompt with a Dismiss button. See AI points and limits.

The view island (bottom right)

The zoom menu holds Zoom to fit, Zoom to 100% and Zoom to selection (where the studio supports it), each with the studio's own key printed beside it; then the studio's own view toggles — for example a minimap, column guides, millimetre rulers, a colour-vision proof, or Lock canvas; then Full screen and Hide interface (⌥Z).

The help menu holds Keyboard shortcuts (?) and Help centre (this documentation). In a studio with no zoom, it also holds Hide interface.

The canvas

The canvas is a plain dotted ground that runs under every island. The gaps between islands are live canvas, so you can draw or select right up to their edges.

Empty state. A new, empty document shows one short "start here" card in the middle of the canvas, with at most three outline buttons — for example browsing templates. It disappears the moment your first content lands, and only the card itself takes clicks, so you can start drawing around it without dismissing it.

Selection toolbar. In the studios that have one (Lab, BPMN, Science, Figure and Evidence), when you select something a small toolbar appears 8 pixels above the selection (or below it, if above would run under an island), centred on it, with the formatting and actions that apply — fill, stroke, font, alignment, or an automatic fix for a flagged element — and a ⋯ for more. It keeps clear of the islands and of an open drawer, follows the canvas as it scrolls or zooms, and vanishes instantly while you drag, pan or zoom, reappearing 120 milliseconds after you stop. It also hides while you hold Shift on the canvas, so a shift-click to add to the selection is never caught by the toolbar. Press ⌥F10 (Alt+F10) to jump to it from the keyboard and Escape to return to the canvas. Nothing appears when nothing is selected.

Hide interface

To look at your work with nothing in the way, press ⌥Z (Alt+Z), choose Hide interface from the zoom or help menu, or — on a touch screen — hold two fingers still on the canvas for a little over half a second (moving either finger cancels the hold, so pinching and two-finger panning work as normal). Every island except the view controls disappears. Bring them back with ⌥Z, Escape, the same two-finger hold, or the Show interface button. Hidden islands are still there underneath, so your keyboard shortcuts, the cheat sheet and a half-typed prompt all survive the round trip.

Presenting

When Sketch presents its frames as slides, or Weave runs a walkthrough, the islands step away and only an exit and the slide navigation remain. The Studio's own Presentation mode (P) takes the figure full screen and steps through your figures with the arrow keys. The keys for each studio's presentation are listed in Keyboard shortcuts.

The command palette

Press ⌘K (Ctrl+K on Windows and Linux) on any page — including the marketing site and this documentation — or select the search affordance in the header, or choose Search & commands in the app menu. The palette is where every verb in flowss lives.

What it searches

With nothing typed, the palette shows Continue (your latest work in other studios), For you (template picks based on what you use and the role you chose, labelled with your role, for example "For you · Researcher / academic"), your recent documents, the last eight things you picked from the palette, and then this studio's screens, navigation and actions.

Palette keys

If nothing matches, the palette says "No matches — Try a different engine, template, surface, or action name." While your cursor is in a text field, ⌘K belongs to that field, so click outside it first if the palette does not open.

The Flow Dock and the Flow console

Press ⌘J (Ctrl+J) in any studio, in the Library or in the Flow console (not while typing in a field), or choose Flow in the app menu, to open the Flow Dock. Press it again to close it. It has three parts:

• Continue — your latest work in the other studios, one click away;
• Vault — save the current studio's live document as a named snapshot, and restore any saved snapshot;
• Journey — your last few hand-offs between studios.

The dock's actions are also commands in the palette. The Flow console is the full-page version: where your work is, what it is part of, and the next move worth making. The console works from records kept on your device, and nothing it computes leaves it. See Moving work between studios and /docs/flow.

The keyboard cheat sheet

Press ? (when you are not typing in a field), choose Keyboard shortcuts in the app menu or the help menu, or run it from the command palette, to open the cheat sheet. It is built from the keys the current screen actually has bound, so it is always accurate for where you are. A Platform group heads it with the two keys that work everywhere — ⌘K for the command palette and ? for this sheet — followed by the studio's own groups such as Edit, AI, Panels, Figures, Export, Canvas and View. Where a studio's key differs from other studios, a note under the row says so. Weave and BPMN have their own fuller cheat sheets that also list their mouse gestures and built-in canvas keys. The complete reference is Keyboard shortcuts.

Theme

flowss has three theme settings: Light, Dark and System. System follows your operating system and changes live when it does. Your choice is saved in this browser and applied before the page paints, so there is no flash of the wrong theme.

The sign-in page and your account page always use a dark design whatever the setting.

The header bar

Study, the Library, the Flow console and Scholar use a 48-pixel header bar instead of islands. From left to right:

On phones, pages with dense headers split the bar into separate rows so nothing scrolls sideways.

The AI points reading

The same reading appears in the header bar's badge, the account menu and, when low, on the prompt.

See AI points and limits and Bring your own AI key.

Where your work lives: the local-only notice

When you are signed out, work is saved in your browser only, and the header says so: "Saved in this browser only — sign in to back up" (shortened to "Not backed up" on narrower screens). If the browser has refused to promise to keep that storage, the notice turns amber: "Saved in this browser only, which may delete it — sign in to back up" ("May be deleted"). Its tooltip explains the risk — browsers can delete site storage to free space, and Safari can clear it after seven days without a visit. You can hide the notice for the session with Hide for this session. In the island studios the same information appears in the status popover and on the Sign in button's tooltip. In studios whose work is not backed up even when signed in, the notice says "Signing in does not back up work in this studio." See Cloud sync, offline work and devices.

Notifications and warnings

• Toasts — short confirmations and errors appear at the bottom centre, above the prompt and any open bottom sheet.
• Sync health banner — if saving to your account fails, or your browser stops accepting saves, a banner appears and stays until the problem is resolved. Dismissing it hides it for now; it returns if the problem recurs.
• Storage warning — if your browser's storage fills up or refuses a write, you are told wherever it happens, with a one-time toast and the sticky banner.
• Not saved — the red pill in the identity island (see "The status glyph"). In the Studio, the status popover explains: "This browser refused the last write — it is full, or site data is blocked. Your work is still in this tab; export it before reloading."

On tablets and phones

The frame adapts to the width of the studio area, not just the device.

On a phone the top row holds the identity island (the studio's name gives way to the mark, and the title takes the remaining room) and the people island (the primary button becomes an icon, and the account stays). The bottom row, the phone dock, holds, from left to right, the AI sparkle button, the tool rail lying on its side (up to six tools plus More, scrolling sideways), and Undo and Redo. Pinch to zoom.

Everything that no longer fits moves into the identity island's ⋮, under a View section at the top: the document status (unless it is the red Not saved, which keeps its pill), Comments, the studio's Present or Play, a Zoom ▸ submenu, and Hide interface. The theme and the cheat sheet are in the app menu. When the on-screen keyboard opens, the bottom row steps out of its way.

Your account page and Library

Two pages sit outside the studios and are worth knowing from day one. Your account page shows your plan, AI points and history, a launchpad back into each studio, today's usage, your recent agent runs, your keys, and your data controls — see Account settings and your data. Your Library is the one home for everything you have made in every studio — see Your library.

Tips

• Learn three keys first: ⌘K for anything, ? for the keys on this screen, and ⌘/ to ask the studio's agent.
• Type the name of a screen after ⌘K to jump straight to it — useful in studios with many screens, such as Study.
• Keep the inspector closed and open it with a double-click or ⌘. only when you need it; your canvas stays larger.
• Use ⌥Z before taking a screenshot or showing your work to someone over your shoulder.
• Prefer docked panels? Switch to Classic from the app menu's Layout ▸ on a window at least 1024 pixels wide.
• Drag the Studio's side panel to the width you like; it remembers it everywhere.

Limits and known constraints

• Classic needs a studio area at least 1024 pixels wide; below that you always get Modern, whatever you chose.
• Study, the Library, the Flow console and Scholar use the header bar, not the island layout.
• The theme and layout choices are saved per browser, not per account, so set them on each device.
• The command palette's "Do this" proposals need at least three characters, and "The whole job" needs at least six.
• ⌘K does not open the palette while your cursor is in a text field and the palette is closed.
• Only one rail flyout is open at a time.
• On phones, some controls move into the ⋮ menu rather than disappearing; nothing is removed, but it is one tap further away.

Troubleshooting

Related pages

• Quickstart: your first diagram in ten minutes
• Core concepts and glossary
• Keyboard shortcuts
• Creating an account and signing in
• The Studio editor
• AI in flowss
• Your library
• Moving work between studios
• Sharing and permissions
• Live collaboration
• The Flow layer
• The Continuum