5. Text and styling

Editing text#

Double-click a shape, or select it and press Enter. Two blocks:

• the label (bold, the shape's title),
• the description underneath (smaller, muted).

Tab moves between them, Escape finishes. Connector labels are edited the same way — double-click the line.

Inline markup#

Labels and descriptions understand a small markup subset:

Rules worth knowing: \ escapes the next character; nothing inside a backtick pair is parsed; _ only opens and closes at a word boundary, so snake_case_names survive untouched; an unmatched delimiter is literal text, never an error; emphasis nests and links may contain emphasis, but links do not nest. Text with no markup characters round-trips byte for byte.

Auto-fit#

Inspector ▸ Text fitting decides how a label is sized against its shape:

The solve runs on a quantised ladder (0.25 px steps, clamped to 6–48 px), which makes it terminate exactly and makes the canvas and the SVG exporter agree bit-for-bit; the Inspector shows the solved size next to the authored one. Typing a font size by hand switches the shape to off, because you have just said what you want.

The document default is written onto the theme's node styles, so Inspector ▸ Text fitting at document level changes everything that has not been overridden.

Label placement#

Inspector ▸ Label placement, or the palette (Label inside the shape, Label on the border, Label outside the shape):

border and outside also take a side (n s e w) and an offset (pixels from the outline; negative pulls inwards).

Both renderers — the canvas and the SVG exporter — call one shared layout pass (src/style/labelGeometry.ts), so a label lands on the same pixel in both: same wrap, same line heights, same baseline, same chip.

Typography#

Inspector ▸ Typography covers font family (a short list that either ships with every OS or degrades sanely, so an exported SVG looks right elsewhere), size, weight, colour, body colour, horizontal and vertical alignment, line height, letter spacing, text case (as typed / UPPER / lower / Title / Sentence) and padding. Reset drops every typography override and follows the theme again.

Every control shows mixed when a multi-selection disagrees, and writing to it sets all of them.

Fill, border and the format painter#

Colours, border style (solid / dashed / dotted), border width (thin / regular / bold), transparent fill and no border are on the right-click Appearance menu and in the Inspector.

• Ctrl/⌘ Alt C copies the resolved style of the selected shape or connector.
• Ctrl/⌘ Alt V pastes it onto the selection.

Themes#

Inspector ▸ Theme (or the palette, Theme: …) swaps the whole palette. Four are built in: Plota A9 (the default), High contrast, Neutral grey and Midnight. Reset theme to Plota A9 puts it back. Named styles are carried across a theme change.

A theme maps style keys (process, decision, pass, fail, retry, …) to concrete styles. Nodes reference a key, so restyling a whole class of shapes is one edit; per-node overrides sit on top.

Named styles#

Inspector ▸ Named styles captures the selection's look as a reusable entry. The style itself is written into doc.theme.node / doc.theme.edge — exactly where the built-in keys live — and nodes reference it through the same styleKey mechanism, so every renderer already understands it. All the registry adds is a display name.

Four buttons per entry: apply to the selection, redefine from the selection (everything using it restyles), rename, delete. Named styles also show up in the Assets search and on the right-click Appearance ▸ Named styles submenu.