The Studio editor

The Studio is flowss's universal, diagram-as-code canvas: you write a diagram in the language of one of more than a hundred engines (Mermaid, PlantUML, Graphviz, D2, Vega-Lite, FlowScript and the rest), and the canvas draws it live as you type. This page is the complete reference for the editor itself — the figures you keep in it, the code sheet, the canvas and how to move around it, editing a diagram by clicking it, what happens when a render fails, the file menu, undo, saving and every keyboard shortcut the Studio answers. Getting things into the editor is covered in Importing and converting, templates in Starting from a template, and the look of a diagram in Styling, themes and layout.

At a glance

Opening the editor

Every studio needs an account; the Studio is open to every plan, Free included (see Plans and what they include). Go to /studio. With no other instructions in the address, you first see the Studio launchpad, How would you like to begin?, which is described in full in Importing and converting. Selecting Skip to the editor there opens the editor (on your existing figures, or on a starter diagram the very first time) and skips the launchpad on later visits; ⋮ → New from the launchpad… brings it back.

Links that already say what you want skip the launchpad and open the editor directly:

When the editor opens it remembers the figure in the address (?figure=), so a reload brings you back to the same figure rather than to the launchpad.

First-run help

How you arrived decides which hint you see. Arriving from the launchpad, a share link or any of the links above, a one-line banner appears once: Click any label on the diagram to rename, recolour or delete it. Select Got it to dismiss it for good. If you skipped the launchpad, the Welcome tour opens instead. Both can be brought back: the tour from the account menu's Welcome tour or ⌘K Open onboarding tour, and the banner from ⌘K Edit a diagram element by clicking it.

Figures: the documents in the Studio

A figure is one diagram: an engine, its source and a title. The Studio keeps several figures in one workspace and shows one at a time. Each figure keeps its own engine, so a Mermaid flowchart, a Vega-Lite chart and a DBML schema can sit side by side.

The title and the figure switcher

The title in the identity island names the open figure. It reads Untitled diagram until you name it.

1. To rename, double-click the title (or choose the pencil, Rename "…", on the open figure's row in the switcher), type a new name of up to 120 characters, and press Enter (clicking away also keeps the new name). Escape puts the old name back.
2. To switch figures, select the title's ▾ to open the switcher. Every figure is listed with a dot in its engine's colour; the open one is checked. Select a row to open it.
3. Each row carries its own Duplicate "…" and Delete "…" actions at its trailing edge. Delete asks first: "Delete "…"? This cannot be undone." — after you confirm, the figure is removed and a toast offers Undo.
4. The last row, New figure, adds a figure on the current engine, seeded with that engine's starter snippet where it has one (otherwise empty), and named Figure 2, Figure 3 and so on.
5. Drag rows to reorder them, or move the focused row with ⌥↑ and ⌥↓.
6. Once you have more than seven figures, a Find a figure box heads the list.

A dot with a green ring means someone in your shared project is looking at that figure right now.

Keyboard: ⌥⌘N makes a new figure, and ⌥⌘← / ⌥⌘→ step to the previous or next figure without opening the switcher.

Note: ⌥⌘N is used instead of ⌘N because browsers reserve ⌘N (and ⇧⌘N) for new windows and never pass them to the page. On Windows and Linux, ⌥⌘N is Ctrl+Alt+N.

Deleting and restoring figures

You can delete the open figure from the switcher (with a confirmation) or from ⋮ → Delete this figure (no confirmation, but undoable). Either way a toast reads Deleted "…" with an Undo button. The Studio holds your four most recent deletions; restoring an older one says "… can no longer be restored here." Deleting a figure also discards its local version history once it can no longer be restored, so storage does not fill up with history for figures that no longer exist.

The Free plan's figure limit

A Free account keeps 3 figures in the Studio (and 3 in each other studio's document list). On a Free plan the switcher is headed by a meter, such as 2 of 3 figures, with a See plans link to /pricing. When the Studio is full, the switcher's New figure row and every row's Duplicate action are greyed out with the reason "You have 3 of 3 — see plans for more", and every other way of creating a figure — ⌥⌘N, a dropped file, an import, a template or engine link — is refused with this message:

Free accounts keep 3 figures in a studio, and this one is full. Every figure here stays open and fully editable — nothing has been archived or deleted. Delete one to make room, or upgrade to Starter for unlimited figures.

If you already held more than three figures when the limit applied, the message instead says how many figures the Studio holds and how many you need to delete to make room ("This studio holds 5 figures, and free accounts keep 3. Nothing has been deleted and every one of them stays open and fully editable — the cap only pauses new ones. Delete 3 to make room, or upgrade to Starter for unlimited figures.").

Nothing you already have is touched, and loading a template or converting into a figure you already have is never refused, because neither creates a new figure.

A shared diagram that arrives while you are full still opens so you can read and edit it, but it is not saved: the title shows (not saved) after its name, and the switcher's last row becomes Keep this shared diagram, which saves it as soon as you have made room. Templates and engine links (?template=, ?engine=) are refused with "That template wasn't added, because it would be a new figure." or "A new … figure wasn't added, because it would be a new figure.", followed by the limit message.

The code sheet

The code sheet is a panel beside the tool rail that holds the open figure's source. The canvas stays visible beside it, and Fit frames the diagram in the part of the canvas the sheet does not cover.

Showing, hiding and resizing it

Your width and open/closed choice are remembered in this browser. On a phone the sheet spans the screen width. When you open the Library, Style or Convert flyout, the sheet steps out of sight so the two panels never stack, and comes back as soon as the flyout closes; pressing ⌘\ or Show code while a flyout covers it brings the code back rather than hiding it.

The sheet's header

For PlantUML and the engines drawn by the Kroki render service, a line under the header says so: "Drawn by a PlantUML server (the public plantuml.com unless self-hosted): this source is sent to it." or "Drawn by Kroki, a third-party render service: this source is sent to it." Every other engine draws in your browser or on flowss's own servers.

Editing source

The editor is a full code editor (the same Monaco editor that powers Visual Studio Code), set up for diagrams:

• Syntax highlighting for most engines. Mermaid, PlantUML, Graphviz, D2, DBML, Wardley Maps and Structurizr have their own colouring; FlowScript and the native flowss engines share one; JSON, XML, YAML and Markdown sources use the standard languages. A few engines whose source is free-form text (for example Pikchr, KaTeX, Nomnoml, Newick, Ditaa, SVGBob and ERD) are shown as plain text without colouring.
• Keyword completions for Mermaid, PlantUML, Graphviz and DBML as you type.
• Word wrap is on, tabs are two spaces, and the font is a monospace face at 13 pixels.
• Problems found in the source are marked in the gutter and underlined, with the message on hover.
• Moving the caret onto a line highlights, on the canvas, the element that line draws.
• Standard editor keys work as they do in VS Code, for example find (⌘F) and toggle comment (⌘/).

The comment toggle inserts the marker the engine's grammar actually accepts:

Each figure has its own editor history, so switching figures never mixes one figure's typing into another's.

Tip: While the cursor is in the code editor, most Studio shortcuts (such as ⌘D or ⌘I) are left to the editor. Click the canvas first, or use ⌘K, to reach them. ⌘\ and ⇧⌥F work from inside the editor.

Formatting source

Press ⇧⌥F, select Format source in the sheet header, or run ⌘K Format source. The result is announced as Formatted or Already formatted.

Formatting refuses rather than guesses in a few cases, and says why:

Diagnostics

A slim strip under the editor holds two expanders. Diagnostics appears for Mermaid, DBML and BPMN sources, which have built-in checks, and for any engine the moment a render fails. Its badge reads checking… while the checks run (they wait for about 0.4 seconds of quiet), No issues when all is well, or a count such as 2 errors · 1 warning. Expand it to list each finding with its severity; a finding with a line number ends in :12 and jumps the editor to that line. When everything passes it reads "All clear — every Mermaid check passes on this source."

Examples of what the checks find:

The same findings drive the gutter markers and the count on the status glyph, so the three never disagree. The glyph counts only errors and warnings; informational notes are listed but not counted.

History (automatic versions)

The History expander lists automatic versions of the open figure. A version is recorded about three seconds after your edits settle, and again whenever you switch away from the figure. Up to 100 versions are kept per figure, in this browser.

1. Expand History. Each row shows how long ago it was recorded and its line count, for example 5m ago · 24 lines. The version matching the current source is marked current, and a restored one carries a Restored label.
2. Select a row to see what has changed since that version: a one-sentence summary (such as "Added the table posts") followed by the changed lines, with long unchanged stretches folded to "⋯ 40 unchanged lines".
3. Select Restore to put that version back. The current source is recorded first, so nothing is lost; the toast reads "Version restored — the replaced state was recorded first". The current version has no Restore button; restoring a version identical to the current source says "Already at this version".

With no versions yet the panel says "No versions yet — one is recorded ~3s after edits settle, and on every figure switch." This automatic history is separate from the Diagram timeline (⇧⌘H), which holds named revisions you can browse and compare; see Version history and undo.

The canvas

The canvas fills the window behind every island. The diagram is drawn in the part of the canvas no island covers, centred there at 100%.

Live rendering

The diagram re-renders shortly after you stop typing: after 250 milliseconds for engines that draw in the browser, and 700 milliseconds for PlantUML and the Kroki engines, which call a render service. The previous frame stays on screen meanwhile; if a render takes longer than 0.3 seconds a Rendering… pill appears at the top right. While an AI edit to a single element is running, the pill reads AI is editing this element… instead. In dark mode diagrams are drawn with light ink on a transparent ground so the dotted canvas shows through (see Styling, themes and layout).

The empty canvas

A figure with no source shows a card, This Mermaid figure is empty (with the current engine's name), and four ways out:

Moving around

The zoom range is 20% to 600%. Select the percentage in the view island to open the zoom menu: Zoom to fit, Zoom to 100%, Hand tool (H, a tick shows when it is on), Present (P), Full screen and Hide interface (⌥Z). The same island also holds the light/dark theme button, the Modern/Classic layout button and the Help menu (Keyboard shortcuts, Help centre).

The canvas zoom keys are bare keys here (0, 1, +, −) rather than ⌘0 and ⌘1, because those belong to the browser's page zoom and tab switching. Weave and Sketch use ⌘0 and ⌘1 for the same commands.

A few engines manage their own pan and zoom inside their box: BPMN, Cytoscape networks, 3D molecules, the live 3D floor plan and Markmap mind maps. Inside those, the mouse wheel moves the diagram itself, not the canvas.

Presentation mode

Press P, choose Present from the zoom menu, or run ⌘K Presentation. The canvas goes full screen with a bar at the bottom showing the figure's title, its position (for example 2 / 5) with ‹ and › buttons when you have several figures, and Exit. Press → or ← to step between figures, and Escape (or Exit) to leave.

Editing on the canvas

The diagram itself is editable. Click any text label on the rendered diagram:

1. An Edit label popover opens next to the click, with the label selected. At the same time the code editor jumps to the line that declares that element, when it can find one.
2. Type the new text and press Enter (or select Save). Escape or × closes it without changing anything.
3. To ask for something other than a rename, select Ask the flowss Studio Agent…. The popover becomes Ask the flowss Studio Agent about this element; type an instruction such as "add a validation step before this" and select Send to the flowss Studio Agent. Just rename switches back.

A rename is applied directly to your source when the Studio can find the label safely; if it cannot, the rename is passed to AI instead. Labels shorter than two characters and labels made only of digits and number punctuation (such as 42, 3.5% or 1/2) are not clickable. BPMN figures use the BPMN modeller's own editing, and 3D molecules have no editable text. On a Cytoscape network, tap a node to edit it.

Diagram tools

Clicking a label also selects that element, and a Diagram tools panel appears at the top right of the canvas with the selected label under its heading. × (Clear selection) dismisses it.

The direct tools edit your source without AI, but only on the engines that support them:

On an engine without a direct tool the Studio says so — for example "Duplicate isn't a direct edit on plantuml yet — try asking the flowss Studio Agent below." — and leaves your source alone; Ask the flowss Studio Agent… is the way to make that change. Direct edits keep the element selected so you can chain them (recolour, then duplicate, then add after). Every direct edit is a single undo step.

Note: Ask the flowss Studio Agent…, the popover's ask mode and AI renames need AI on your plan: Starter with your own key, or Plus and above with hosted AI points. See AI points and limits.

When a render fails

If the source cannot be drawn, a Render error box appears at the top of the canvas with the engine's message. The last diagram that did render stays on screen, dimmed, labelled Last good render — not the current source, so you never mistake it for the current source (export also refuses it).

The failure also becomes a finding in Diagnostics, in the gutter and on the status glyph.

Automatic repair

By default, when a render fails the Studio asks AI to repair it automatically. It waits until the source has settled (so a half-typed line is never sent), then shows Auto-fix attempt 1/2… and applies the answer if it renders. It makes at most two attempts per failure; after that the error box says "Auto-fix tried 2 times and stopped, so it is not still working on this. Edit the source, or use "Explain & fix" to try once more."

Automatic repair never runs for BPMN figures, and never for failures that no edit to your source could fix: a render service being down, a network error, a timeout, a size limit, or Mermaid's connection limit. It uses AI, so it needs AI on your plan; every repair is one undo step.

To turn it off, open Settings (⌘,) → Personalization & privacy → Repair broken diagrams automatically and select Turn auto-repair off. With it off, a failing diagram stays exactly as you wrote it and the error is reported instead.

Size budgets

To keep the page responsive, each engine has a largest source it will render. Sizes are measured in bytes of text (UTF-8), so accented letters and emoji count for more than one:

Past the budget the error reads "Source is … — past the … safe-rendering budget for …. Rendering this in the browser would freeze the page." and lists the options: split it into smaller figures, render it on the server through the render API (see Embedding and the render API), or trim the source. Mermaid additionally draws at most 500 connections: "Mermaid draws at most 500 connections, and this diagram has more. Nothing in it is wrong — it is larger than Mermaid will lay out. Split it into smaller figures, or draw it with Graphviz or Weave."

The status glyph

The small glyph beside the title says how the figure stands: a spinner while an edit is Saving, a check mark when Saved with no problems, a number coloured by the worst problem when there are errors or warnings, and a red Not saved pill if the browser refused the last save. Select it, or press ⇧⌘M, to open a popover with the save line (Saved with "just now" or "5 min ago", and "Shared project" in front of the time for a cloud project), Problems (select one to open the code at its line), the figure's readiness, and an AI section when the platform's AI is unavailable. See A tour of the workspace and Core concepts and glossary for readiness levels.

The tool rail

The rail holds the Studio's tools in three groups. At most six show on the rail (fewer on a short window); the rest fold into More tools at the end of the rail, whose label says how many it holds.

Selecting a rail button a second time puts its panel away. Below 768 pixels, flyouts open as bottom sheets.

The right drawer

The flowss Studio Agent, Collaborate, Comments, Diagram Intelligence and the Diagram timeline share one drawer on the right; opening one puts away whichever was there. While the flowss Studio Agent, Collaborate or Comments is open, a Side panel switcher at the top of the drawer moves between those three, and Collaborate shows a live badge while the workspace is a shared project. The drawer remembers which pane was open and reopens it after a reload. Pressing Escape closes the topmost panel (or, with focus on the island button that opened a panel, that panel). See The flowss Studio Agent and its modes, Live collaboration and Comments and review.

The ⋮ file menu

Every document command lives in ⋮, in the same order as in every other studio. Each row is also a ⌘K command.

Import and conversion are covered in Importing and converting, exports in Exporting your work, embedding in Embedding and the render API, and sending to other studios in Moving work between studios.

Explain — prose & alt text opens Explain this diagram, a plain-language description written directly from your source (no AI): In words — deterministic, every name from your source with Copy prose, and Alt text — one sentence for screen readers with Copy alt text. It is offered for Mermaid and DBML figures.

The AI prompt

The prompt island at the bottom centre reads Describe a diagram or a change…. In Quick mode it makes one direct edit to the open figure; in Agent mode it hands your request to the flowss Studio Agent's multi-step pane in the right drawer. While the canvas is blank it offers suggestions — Make the layout left-to-right, Bigger boxes and Colourblind-safe — and its settings menu holds Dictate a change. When the platform's AI service is unavailable, the prompt says AI is off here instead of accepting a request that would fail. See The flowss Studio Agent: prompt and quick help and The flowss Studio Agent and its modes.

Undo and redo

• Up to 50 steps are kept for the open figure.
• Typing is grouped: a pause of about 0.6 seconds starts a new step, so one undo removes a burst of typing rather than one character.
• Loading a template, a style preset, a conversion, a direct canvas edit, an import into the open figure and every AI answer are each one step. Switching engine from the Library can be two, because the engine's starter arrives in two stages.
• Undo history belongs to the figure: it is cleared when you switch figures or create one, so an undo can never write one figure's content into another.
• When an AI answer lands on a figure that is no longer the open one (because you switched while it worked), it is applied to the figure it was meant for and a toast offers Undo for it.

For anything older than the undo stack, use History under the code or the Diagram timeline.

Saving

There is no save button. Every edit is written to this browser about 0.3 seconds after you stop typing, and the status glyph shows Saving until it lands. While you are signed in, your workspace is also backed up to flowss automatically — a little over a second after your edits settle, and again when you leave the page — which is what brings your work back on another device. Cloud sync works on every plan, Free included. If you have the Studio open in two tabs, each tab folds in the other's changes rather than overwriting them. See Cloud sync, offline work and devices.

Settings

Settings (⌘,, or the account menu's Settings, or ⋮ → Settings…) holds Daily AI usage, Bring your own API key, and Personalization & privacy, which includes your name and role, the Accent vibe, the auto-repair switch, what ⌘K has learned, and What stays here, and what we store with Export my data and Erase personalization. See Account settings and your data and Bring your own AI key.

Keyboard shortcuts

Shortcuts are written the Mac way; on Windows and Linux read ⌘ as Ctrl and ⌥ as Alt. Press ? for the live cheat sheet.

See Keyboard shortcuts for every studio's keys.

Tips

• Keep the code sheet open on a wide screen and let Fit (1) frame the diagram beside it; the Studio remembers the width you like.
• Click a label to find its line in a long source: the editor jumps to the declaration, which is faster than searching.
• Before loading a template or switching engine on a figure you care about, make a new figure (⌥⌘N) — both replace the open figure's content. ⌘Z brings it back if you forget.
• Use Diagnostics on Mermaid flowcharts and DBML schemas as a free reviewer: unreachable nodes, missing primary keys and type mismatches are caught without AI.
• If automatic repair keeps rewriting something you meant, turn it off in Settings and use Explain & fix only when you want it.
• Present (P) steps through every figure in the switcher's order, so reorder the switcher to set the running order of a talk.

Limits and known constraints

• The Free plan keeps 3 figures in the Studio, and has no AI: the canvas editing tools that use AI, Explain & fix, automatic repair and the AI prompt need Starter (your own key) or Plus and above.
• Direct canvas tools work only on Mermaid, Nomnoml and Graphviz, and not every tool on the latter two.
• Format source in the header is offered only for engines with a dedicated formatter; others get a whitespace clean-up only.
• Diagnostics checks exist for Mermaid flowcharts, DBML and BPMN only; other engines show findings only when a render fails.
• Automatic versions under History live in this browser and keep the latest 100 per figure.
• PlantUML and Kroki engines send your source to an outside render service and re-render more slowly.
• Weave boards do not open on the Studio canvas: a figure on the Weave engine shows Weave has its own studio with Open Weave →, which carries the board to Weave (a Starter workstation).
• ⇧⌘P cannot export in Firefox, which reserves the keys.

Troubleshooting

Related pages

• Importing and converting
• Starting from a template
• Styling, themes and layout
• Choosing an engine
• Data, timeline, TikZ and the diagram tools
• The icon library
• The flowss Studio Agent: prompt and quick help
• The flowss Studio Agent and its modes
• Exporting your work
• Version history and undo
• A tour of the workspace
• Keyboard shortcuts
• Engine reference