Canvas

A canvas is the owner’s design tool: a whiteboard of pages, on the conventions FigJam and Whimsical share, where a node is a sketch (an idea that is not a blueprint yet) or a blueprint, drawn live from its file. The canvas holds only what a blueprint cannot: the flows between nodes, the frames around regions, a hand-placed position. Nothing on it is a second copy of what a blueprint says. On by default.

In the browser

Canvas is an activity of its own in the Activity Bar: every canvas with its pages under it, a + for New canvas in its head, and Canvas settings at its foot. A canvas answers at /p/canvas/<id>[/<page>], opening on its first page when none is named, and New canvas is also a command, which shows the activity and asks there. A canvas is shared (the default: in the plugin’s workspace, committed with the root) or private (under its local/, one person’s, never committed); the New canvas form asks which, and the menu beside the canvas’s title flips it, moving the file. A private canvas wears a struck eye beside that menu, in the activity, and in the list. A sketch is promoted into a blueprint from its details, through the same scaffold as eidos new, and keeps its place; from then on the node is that blueprint. Nodes take their default look from the framework’s own properties: the On node and Default style controls on a property row under Framework Settings → Properties are the plugin’s, editing only its key on the row. A page exports as PNG, SVG, or JSON Canvas for Obsidian.

Comment threads on a page are Comments’: the canvas draws a pin where each thread is anchored (a pin on a node rides with it) and opens the thread in the pin’s popover.

On disk

.eidos/plugins/canvas/<id>.yaml: one canvas, the id its file name. The file →
.eidos/plugins/canvas/local/<id>.yaml: a private canvas, the same file, kept out of git by the plugins/*/local/ line.
.eidos/plugins/canvas/local.yaml: one person’s preferences (wheel zoom, the right button, control-click, Enter, the context menu, resizing), edited from the canvas’s gear or the plugin’s page, never committed.
On a property row in Framework.yaml, canvas: { show, styles } is the plugin’s key: show prints the value on a node, styles gives each value a look (shape, color, fill, fill color, size). Properties are read in the custom block’s order and the top-most that styles a value wins. Properties →

From the shell

eidos canvas list                   # every canvas, with its pages
eidos canvas new "Product Map"      # .eidos/plugins/canvas/product-map.yaml; --private for local/product-map.yaml
eidos canvas move product-map private   # or shared: the file moved between the two
eidos canvas show product-map       # one canvas; --page <id> for one page; --json
eidos canvas schema                 # the JSON Schema a canvas must satisfy

An agent edits the file directly against the schema and the browser reflects it. Read a canvas before changing it, keep node ids stable (flows and threads name them), and never promote a sketch for the owner: which collection a blueprint goes in is asked every time, on the page. A blueprint’s properties are edited on the blueprint, not on the node.

What the check reports

canvas/invalid (a file the schema refuses; a stray key is enough), canvas/node-missing (a blueprint node whose blueprint is gone), canvas/link-missing, canvas/edge-missing, canvas/frame-missing, canvas/annotation-unpointed, and canvas/comments-legacy (threads still kept in the canvas file from before Comments was a plugin; eidos migrate moves them). A thread whose page or node is gone is Comments’ anchor-missing.

The rest of this page is the manual: every tool, gesture, and shortcut.

Tools

A floating toolbar at the foot holds the tools. Each has a key.

Tool	Key	What it does
Select	`V`	Click to select, drag on empty space for a marquee, `⇧` or `⌘` click to add, drag to move, arrows to nudge
Hand	`H`	Drag to pan. Right button, middle button, and `Space` pan in every tool
Sketch	`R`	Place a sketch: a node that is not a blueprint yet
Sticky	`S`	Place a sticky note
Text	`T`	Place free text: a heading over a region, a note in the margin
Annotation	`A`	Place a note, then click what it points at; it lives only while it points at something
Blueprint	`B`	Click where it goes, then pick the blueprint
Frame	`F`	Drag to draw a frame around a region; with a selection, `F` wraps it
Connect	`X`	Click a node, then the node it flows to, or drag from a dot on a node’s side
Comment	`C`	Click anywhere, or on an object, to start a thread

A tool hands back to Select after placing one thing. Hold ⌥ while placing, or double-click the tool, to keep it until Esc.

Working the page

Selecting and moving. Click, marquee, ⌘A. Drag to move (a frame moves what is attached to it). ⌘D duplicates, ⌫ deletes (a blueprint node leaves the canvas; the file stays). ⌘C and ⌘V copy and paste under the pointer, flows included. ⌘Z and ⇧⌘Z undo and redo anything.

Editing in place. Click a selected node’s title or description to edit it where it is. ⏎ opens its details: a sketch’s label, description, and properties; a blueprint’s title, summary, and the properties shown on the node, written straight to the file; a frame’s title and what is attached. Every field writes when it loses focus. A blueprint’s details offer Open blueprint, which opens the reader over the canvas.

Styling. ⇧⏎ opens the style popover: shape, fill, colors, size. Two layers meet here. The framework gives a node its default look from a property’s value (set under Framework Settings → Properties, with a priority when two properties both set a field). A node styled by hand keeps its own look; Reset puts the properties back in charge. ⌥⌘C and ⌥⌘V copy and paste a style.

Flows. Drawn with elbows along the grid, never curves, meeting a node at one of eight anchors. Drag the dot on a flow’s middle segment to move the bend; drag either end to another anchor. Double-click a flow to label it. The style popover sets color, solid or dashed, and the caps at each end.

Frames. Moving a frame moves what is attached; anything dragged in joins it. A flow dropped inside a frame attaches the node to it. Deleting one offers to keep or delete its contents.

Comments. A pin on an object rides with it; a pin on empty space stays put. Threads have replies and Resolve. A message is signed by the user this machine acts as; @alias mentions a listed user. ⇧C opens the comments sidebar.

Pages and export. Pages live in a panel at the top left: rename, add, delete. Export at the top right saves the page or selection as PNG or SVG, or the page as JSON Canvas for Obsidian. The cog at the bottom right holds the canvas preferences (wheel zoom, right-drag pan, whether Enter finishes an edit).

Shortcuts

Keys	What
`V` `H` `R` `S` `T` `A` `B` `F` `X` `C`	The tools
`Space` drag · right drag · middle drag	Pan in any tool
Scroll · `⌘` scroll · pinch	Pan · zoom
`⇧1` · `⇧2` · `⇧0`	Fit the page · zoom to selection · 100%
Arrows · `⇧` arrows	Move the selection to the next node that way · follow a flow
`⌥` arrows · `⌥⇧` arrows	Nudge by one · by ten
`⌘A` · `⌘D` · `⌫`	Select all · duplicate · delete
`⌘C` · `⌘V` · `⌥⌘C` · `⌥⌘V`	Copy · paste · copy style · paste style
`⌘Z` · `⇧⌘Z`	Undo · redo
`L` · `⇧⌘L`	Lock or unlock
`⏎` · `⇧⏎`	Details · style
`⇧C`	Comments sidebar
`Esc`	Close what is open; back to Select
`?`	The essentials

Shortcuts are written with Mac keys and read as Ctrl, Alt, and Shift elsewhere.

The file

A canvas is one YAML file, .eidos/plugins/canvas/<id>.yaml, and the file is the whole truth of it. The browser draws it and writes it back; a change made by hand is picked up. An agent edits the file directly and leaves the browser to a person.

title: Product Map
pages:
  - id: overview
    title: Overview
    frames:
      - { id: frame-1, title: Onboarding, x: -320, y: -288, w: 1032, h: 544, color: sand }
    nodes:
      - id: n1
        blueprint: sign-up            # a blueprint by id; title and summary come from the file
        frame: frame-1                # attached: moves with the frame
      - id: n2
        sketch: { label: Invite a teammate, note: Not a spec yet }
        style: { shape: pill, color: "#5f80cf", fill: tint }
        styled: true                  # styled by hand; the property default no longer applies
      - id: n3
        sticky: { text: Ask sales about the trial, color: yellow }
    edges:
      - { from: n1, to: n2, label: then, end: triangle }
    layout:
      n1: { x: 40, y: 40 }
      n2: { x: 320, y: 40 }

A node is exactly one of blueprint, sketch, sticky, text, or annotation, may be attached to a frame, locked, given a box, and styled. An edge joins two nodes (or a node to frame:<id>), with an optional label, bend, anchors, color, dash, and caps. The schema allows nothing else, so a stray key is a finding, not a silent drop. Threads on a page are not in the file; they are Comments’, anchored by { page, x, y, node? }.