Whiteboard on the Canvas

Sketch freehand, draw annotation lines, and add shapes, text, sections, images, and comments alongside real components.

Whiteboarding in Kanvas (3:41) follows one late-night incident from page to postmortem on a single live design. Its page has chapters and a transcript.

Whiteboarding lets you diagram freely on the same canvas as your infrastructure. You draw shapes, text, freehand strokes, and lines to explain intent, and they sit beside real components in one design. It is on by default and available on every plan.

Drawn objects are saved with the design and shared live with collaborators. They are components marked as annotations, so they count toward your plan’s components-per-design limit. See Designs and Components.

This guide covers the drawing tools. For per-object operations such as copying, locking, and resizing, see Working with Canvas Objects.

The dock sits at the bottom of the canvas in Designer mode. Its tools, left to right:

ToolShortcutWhat it does
SelectVSelect, move, and configure objects.
HandH, or hold SpacePan the canvas.
Components-Open the component palette.
Kubernetes-Open every Kubernetes component.
Shapes-Browse shape categories.
CommentMDrop a comment thread.
ImageIPick an image file and place it.
TextBoxTAdd a text box.
SectionSAdd a labeled, dashed region that holds other objects.
PenCtrl/Cmd+EDraw annotation lines.
PencilCtrl/Cmd+PDraw freehand.
Help CenterCtrl/Cmd+Shift+/Open help.

The Pen and Pencil icons turn green while their mode is active. Press Esc to leave a mode. Pinned models appear after a divider at the right end. See Pin Models to the Dock.

The Kanvas Designer dock

The dock scrolls horizontally when it overflows, and it is greyed out while the app is in an error state, for example after a failed save. In Operator mode only the Select and Hand tools, Help Center, and minimized panels remain.

The canvas right-click menu opens an Options dialog with these toggles, all on by default:

  • Enable Dock hides or shows the entire dock, including component pickers, not only the drawing tools.
  • Enable Pencil and Enable Pen hide or show those two icons.

Each change saves to your user preferences, so it applies to all your designs and devices. The toggles hide icons only. The keyboard shortcuts for Pen, Pencil, M, T, S, and I keep working.

The Options dialog with Enable Dock, Enable Pencil, and Enable Pen turned on

No permission key gates drawing. Tier listings show Pencil, Pen, and 500 built-in shapes on Free, Team Designer, Team Operator, and Enterprise.

Each stroke becomes one filled shape. Defaults are caribbean green, thickness 1, and opacity 1. There is no color or thickness control before you draw. Afterward, select the stroke and use its style toolbar to change fill color, opacity, and border.

The Pen is Connector mode. Click empty canvas to place a small terminal point, then click elsewhere to place another and join them with a line. Repeated clicks draw a connected polyline. Starting from a component’s edge handle also works. Cancelling mid-draw removes the dangling point.

Pen lines are annotation edges. They explain flow and do not change any component’s configuration. Style them like any edge: color, line style, arrow and curve style, label, and animation.

Pan and box selection are off while you draw with the Pen or Pencil.

  • Shapes. Choose from the shape categories. A shape carries no configuration and is never deployed. You can swap any object’s outline for one of 24 shapes while keeping its content, position, and size.
  • Text boxes. Double-click to edit text inline. Text options include color, weight (regular, medium, semi bold, bold, black), underline or strikethrough, alignment, and font size.
  • Sections. A section groups the objects dropped inside it, and they move with it.
  • Images. Images up to 512,000 bytes are embedded in the design. Larger files are rejected.
  • Comments. A comment opens a discussion thread on the canvas. Resolved threads disappear from the canvas until reopened. See Reviewing Designs.

Shapes customization on the canvas

Select an object to open its toolbar. Controls appear only when the object supports them.

The style tooltip for a text box

ControlOptions
Fill13 swatches including transparent, with opacity from 0 to 1
BorderColor, style (solid, dotted, dashed, double), thickness from 0 to 25
Layer orderMove to front, forward, backward, to back
AnimationNone, blink, ripple, bounce, pulse
Line styleSolid, dashed, or dotted; ten curve styles; eleven arrow heads
Line animationMarching ants, which shows the direction of flow

Editing a line’s style

The marching ants animation on a line

Every change, including drawn objects, syncs live between everyone in the design through a shared document over a peer-to-peer session. Each collaborator appears as an avatar in the toolbar, and live cursors and selections are shared. Undo and redo cover the shared document: components, configuration, styles, relationships, drawn objects, and layer toggles.

  • Drawn objects are saved with the design. Kanvas never deploys annotations.
  • Images and text files over about 500 KB are rejected, whatever your plan.

Related Reading