Drawing Tools

Drawing on the canvas

Press D to switch to the draw tool. Sketch, drop shapes, drop text labels, mark up your design — drawings live alongside the canvas model and ride along in save / export / share.

Shapes

The toolbar that floats above the canvas in draw mode offers five shape modes:

• Pen — freehand stroke. Click + drag.
• Rectangle — drag from corner to corner.
• Ellipse — drag from corner to corner.
• Arrow — drag from tail to head. The head sizes with stroke thickness. Either endpoint that lands inside (or within ~12px of) a canvas component auto-tethers to that component — drag the component later and the arrow follows.
• Text label — click to drop a text annotation anchored at the click point. The inline editor opens immediately; type the body and press Enter (or click away) to commit. If you drop it near a component, the label tethers and follows.

Object-tethered annotations

Arrows and text labels can be anchored to canvas components. When you draw an annotation near a component (within ~12px of its bounding box), the endpoint snaps to that component and stores the relative offset. From then on, dragging the component drags the annotation with it.

This means you can:

• Point an arrow from one component to another and rearrange the components freely — the arrow tracks both ends.
• Attach a text label as a callout — the label follows the component when you reorganize the canvas.

If the referenced component is deleted, the annotation falls back to its last absolute position so it doesn’t disappear silently.

Text labels: formatting + LaTeX

When the text shape is active (or when you’ve selected an existing text label), an Aa ▾ formatting button appears in the toolbar. The popover offers:

• Font — Default (Inter), Serif, Sans, Mono, or Display.
• Bold / Italic / Underline — three toggles. All apply to the whole label (no inline formatting v1).
• LaTeX (Σ TeX) — render the body as LaTeX via KaTeX. With the toggle on, write LaTeX directly: \sum_{i=1}^n x_i, \alpha + \beta, \frac{a}{b}, etc. Malformed LaTeX falls back to the source text (no crash).

The inline editor reflects font / B / I / U live as you type so you see the formatting immediately. LaTeX bodies edit in mono (so the source is legible) and render through KaTeX after commit.

Selecting, moving, and resizing drawings

Switch to the select tool (V) to manipulate existing drawings.

• Click a drawing to select it. Shift+click to add to the selection.
• Dashed selection box highlights every selected drawing.
• Drag a selected drawing to reposition it. Multi-selected drawings move together.
• Marquee select (drag a rect over empty canvas) includes drawings whose bounding box intersects the rect.
• Resize handles appear at the corners (rect, ellipse) or endpoints (arrow) of a single-selected drawing. Drag to resize.
• Delete key or the trash icon in the toolbar removes the selected drawing(s).

Tethered annotations refuse the drag — they’re meant to follow their anchored component, so move the component instead. Tethered endpoints on arrows also suppress their resize handle.

Context-aware editing toolbar

When you select a drawing in select mode, the floating toolbar adapts to what the drawing actually supports — no controls that wouldn’t do anything to your selection:

• Text labels / notes show the formatting popover (font, B/I/U, LaTeX), color, recent colors, and the layer chip. Shape picker, style picker, and eraser are hidden.
• Stroke shapes (pen, rectangle, ellipse, arrow) show thickness, stroke style, color, and layer. Formatting and shape picker are hidden.
• Nothing selected (pure draw mode) shows everything so you can pick any shape and start drawing.

This way the toolbar always reads as “what can I change about this thing?” instead of “every option that exists for any drawing.”

Editing text labels

Double-click any text label (in select or draw mode) to open the inline editor. Type the body, then:

• Press Enter or click away to commit
• Press Shift+Enter to add a newline
• Press Escape to discard changes

Stroke style

Pick solid, dashed, or dotted from the style picker (the line-sample icon between thickness and color). Style applies to all stroke-based shapes; arrowheads stay solid for direction legibility even on a dashed shaft.

Color

Four presets plus a custom-color popover (the rainbow swatch). The popover holds the last five colors you’ve used as a quick-access strip plus a “Pick custom color” link that opens the native picker — repeated colors don’t need to be re-opened from the picker each time.

Thickness

Three discrete weights (thin / medium / thick) behind a single icon-with-popover trigger.

Erasing + clear

Two ways to erase a single drawing:

1. Eraser toggle — click the eraser in the toolbar, then click near any drawing to remove it.
2. Right-click — right-click near a drawing while in draw mode to erase it directly.

The eraser is forgiving — it uses bounding-box hit-testing for shapes / text labels, polyline distance for freehand strokes. Drawings on locked layers are skipped (unlock the layer first).

The trash icon at the right of the toolbar is context-aware:

• When one or more drawings are selected, it deletes just those.
• When nothing is selected, it clears every drawing on the canvas.

Annotation layers

Drawings can be organized into named layers, each with its own visibility and lock state. Use this to separate “review notes” from “design rationale” from “TODO” — or to hide all annotations while screenshotting the clean canvas.

Quick layer switch

The toolbar shows the active layer chip (color dot + caret) to the right of the eraser. Click the chip to switch active layer (new drawings get stamped with the selected layer). The popover also offers a link to open the full layer manager.

Full layer management (Explorer → Layers)

Open the Explorer panel (E) and switch to the Layers tab. Each row shows:

• Visibility toggle — hide / show all drawings on this layer.
• Lock toggle — when locked, drawings on this layer can’t be erased or added to. Useful for protecting finalized annotations while continuing to mark up on a fresh layer.
• Color swatch — chip color shown in the layer list and in the toolbar’s layer chip. Purely a tag; doesn’t affect the stroke color of the drawings themselves.
• Name — double-click to rename.
• Drawing count — how many drawings currently live on this layer.
• Delete — moves the layer’s drawings to the default layer, then removes the layer. The default layer itself can’t be deleted (it’s the orphan-fallback target).

Click any row to make it the active layer. The active layer is highlighted; the layer chip in the floating toolbar mirrors the selection in real time.

Tips

• Draw mode turns off block + group selection so your strokes flow over existing stuff without grabbing things.
• Middle-click still pans the canvas in draw mode.
• Drawings save with your canvas and ride along in JSON exports.
• Drawings on hidden layers are filtered from PNG / SVG exports, so you can stage clean screenshots by hiding the markup layers temporarily.
• Locked layers stay visible by default — locking only blocks edits, not rendering.
• Text labels with LaTeX are great for adding equations, system-design notation, or formal callouts directly on the canvas.