1. Getting started

Opening it#

Go to editor.plota.live. There is nothing to install, no account to create and no sign-in step — the page loads and you are in the editor.

It works offline once loaded, and it keeps working on a plane: the whole thing runs in your browser. Nothing you draw is uploaded anywhere. Diagrams you save live in that browser's own storage, and the Export menu writes real files to your disk whenever you want a copy somewhere else.

Any current browser will do. Chrome, Edge, Firefox and Safari are all fine; the only features that ask for anything unusual are the optional in-browser AI models, which want WebGPU.

Because everything is local, clearing your browser's site data for editor.plota.live clears your saved diagrams with it. Export anything you want to keep — see Import and export.

The window#

The editor with the AWS three-tier web app template open: the Shapes library on the left, the canvas in the middle, the Inspector on the right

Region	What is in it
Toolbar	Document title · New · Page · tools (Select / Pan / Connect / Text / Shape) · undo/redo · group · zoom · grid, snap, Smart Route, Crossovers, connectors in front, layout direction · view controls (zoom presets, rulers, guide snap, canvas background, minimap, find, presentation, appearance) · Save · Import Diagram · Export · ? (help)
Page strip	One tab per page of the document, plus add, duplicate, rename and delete
Left panel	`Shapes`, `Icons`, `Images`, `Figures`, `Assets`, `AI`, `Stencils`, `Branding`, `Legend`, `Workspace`, `Templates`, `Layers`, `Data` — press `[` to collapse it
Canvas	The document. Hover a shape for ports, right-click anything for a menu built for that target. `</> Code` shows the diagram as source; the overview map sits bottom right (`M`)
Right rail	`Inspector`, `Copilot`, `Colour` and `Layout` — press `]` to open or collapse it
Status bar	Node/edge counts, the current selection, the pointer position in document coordinates, the active tool, zoom, the page selector, the undo state, and a `⌘K` reminder

On a narrow window the toolbar's last buttons can run past the edge; every one of them is also in the command palette (Ctrl/⌘ K).

The first five minutes#

Put a shape down. The left panel opens on Shapes. Drag one onto the canvas, or click it to arm the shape tool (S) and then click the canvas.
Connect it. Hover a shape: eight ports appear on its outline (n ne e se s sw w nw). Drag from one onto another shape. Drag into empty space instead and a new shape is created, connected, and put straight into text editing.
Type into it. Double-click a shape, or select it and press Enter. The first block is the label, the block under it is the description; Tab moves between them. Labels understand **bold**, *italic*, _underline_, ~~strike~~, `code` and [text](url).
Let it tidy itself. R toggles Smart Route (connectors go around shapes instead of through them), J toggles crossover hops. Select several shapes and right-click → Arrange to align, distribute and match sizes.
Get it out. Export ▸ Export… (or Ctrl/⌘ ⇧ E) opens the dialog with padding, PNG scale, transparency, header/footer, page scope and a live preview.

Start from Mermaid or a template#

Already have the diagram as text? Copy Mermaid source and press Ctrl/⌘ V on the canvas: it arrives as an editable drawing. Thirteen Mermaid types are supported — flowcharts, sequence, class, state, ER, C4, architecture, block, gitGraph, mind maps, timelines, user journeys and requirements; see Mermaid diagrams.

The Templates tab has ready-made starting points — cloud architectures, a CI/CD pipeline, an OAuth sequence, an e-commerce data model and more. Click one to insert it.

When the drawing is done, the copilot's Explain this layout tells you how readable it is and what would improve it — see the AI copilot.

Two things worth learning early#

The command palette — Ctrl/⌘ K. Every command in the app, fuzzy-searched: tools, the 25 palette shapes as Insert … entries, the 31 figures, arrange and tidy actions, stencil and ERD helpers, export formats, view toggles, style and theme commands, and every AI action. If you cannot find a control, type what you want here.

The context menu — right-click. It is not one menu: it is built for what you clicked (empty canvas, one shape, several shapes, a connector, several connectors, a mixed selection, a container, an image, an ERD entity, a table, or a page tab), so the entries you see are the ones that apply.

Help inside the app#

F1, ?, the ? button at the right of the toolbar, or Ctrl/⌘ K → “Help” opens the Help panel.

The Help panel: a search box, the first five minutes, and the “How do I…” list

It has the walkthrough above, a “how do I…” list where clicking an entry actually runs the command (and tells you why when it cannot — “select a shape first”), and a searchable keyboard reference generated from the app's own shortcut table. The search box filters both lists at once.

Where things are saved#

Ctrl/⌘ S — Save writes the whole multi-page document into browser storage; it then appears under Figures ▸ My diagrams. This is not a file.
Export ▸ Plota JSON writes a real .json file that round-trips back in with every page, layer and style intact.
The dot next to the document title is filled while there are unsaved changes.