Tools
The tools sit on the left edge. Each has a one-letter shortcut.
Select something to get its bar: colour, fill (tint, solid or none), dashed outline, text size and alignment, layer order, duplicate and delete.
Rearrange in the header lays out the selection (or the whole canvas) vertically or horizontally. Undo from the “Rearranged” message.
Figures
A figure is a diagram written as code: architecture maps, flowcharts, data models (ERD), sequence diagrams and processes. Octonote lays it out, routes the arrows and keeps it tidy as it grows. The syntax is the same as Eraser’s diagram-as-code, so code you or an AI wrote for Eraser works here.- Add one from + (⌘K): pick a template.
- Turn a sketch into one: select boxes and arrows you drew and click To diagram.
- Have an agent write one: the CLI and the Claude/ChatGPT apps draw canvases from text (see below).
- Work inside it: double-click (or press Enter) to drill into groups, collapse them, and play flows. Esc leaves.
- Name it with a
titleline in its code. The title sits above the figure’s border.
Present
Every figure and device frame is a slide. Click Present (bottom right) to show them one at a time, full screen.- Arrows, Space or a click on the strip of slides under the slide moves between them. S hides the strip.
- L turns on a laser pointer; N shows your speaker notes.
- The presenter view button opens a second window with the current slide, the next one, your notes and a timer. Keep it on your own screen.
- Slides (next to Present) sets the order, hides slides and holds the speaker notes.
Export
Export (bottom right) downloads the canvas, or just the selection, as PNG, SVG or PDF, or copies it as an image. A selected figure’s bar has its own export with more formats.Comments
Comments live on the canvas: pins on shapes or spots, with replies, resolve and delete. Comments show the name of the person who wrote them. Resolved ones are hidden until you show them.Draw from text
Agents and the CLI can create a canvas from a mermaid flowchart or class diagram. Every box and arrow is a real, editable shape. See Writing content.The canvas follows your light or dark theme. Thumbnails and embedded figures always render on a light background.