Sketch Canvas — Workspace

Getting Started

Sketch Canvas helps you turn ideas into clear diagrams without leaving the drawing surface.

Create your first diagram

1
Choose a shape. Select Rectangle, Diamond, Ellipse, Note, or a system node from the left toolbar.
2
Draw on the canvas. Drag to place the shape. Most drawing tools return to Select after one use.
3
Add a name. Double-click the shape, type its label, and press Enter.
4
Connect your ideas. Use Arrow or Line, then drag from one shape to another.

Common shortcuts

VSelect

RRectangle

AArrow

TText

Drawing Tools

Pick a tool from the left rail or use its keyboard shortcut. Shape tools are one-shot; Select and Hand stay active.

Basic shapes

Rectangle, Diamond, and Ellipse create general-purpose diagram nodes. Note creates a longer annotation, while Text places free-standing text.

System nodes

Use Service, Database, Queue, Cache, and External API for architecture diagrams. Open them from the System nodes menu.

Marks and references

Mark creates numbered callouts. Reference creates a numbered note linked to an existing node.

Lines and drawing

Arrow creates directional relationships, Line creates neutral relationships, Free draw adds ink, and Eraser removes elements you touch.

Images

Use Insert image to choose a local image, or paste an image from the system clipboard.

Hand tool

Drag with Hand to pan without moving elements. On touch screens, pinch with two fingers to zoom. You can also hold Space temporarily while another tool is active.

Selecting and Editing

Select elements

Click an element to select it, or drag on empty canvas for a marquee selection. Use Cmd/Ctrl+A for all visible elements. The command palette can select matching types, colors, or connected elements.

Edit and arrange

Drag selected elements to move them; alignment and spacing guides appear automatically.
Drag selection handles to resize. Use Arrow keys for 1px nudges or Shift+Arrow for 10px.
Double-click, press Enter, or press F2 to edit a selected element's name or text.
Use the Inspector to change shape, content, stroke, fill, width, dash, arrowheads, and name styling.
Group related elements, reorder layers, duplicate selections, or copy and paste their styles.

Clean up a diagram

Beautify arranges a selected diagram and refreshes its style. With nothing selected, it updates scene styling without moving nodes. More alignment, distribution, and layout actions are available in the command palette.

Connectors and Relationships

Draw an Arrow or Line from one node to another. Bound connectors follow their nodes when the diagram changes.

Fast relationship gestures

Option/Alt + drag: connect two existing nodes with an auto-routed arrow.
Cmd + drag a node: duplicate the node and create a live routed link to the copy.
Ctrl + drag a node: duplicate the node without a link.

Edit a connector

Select a connector to change arrowheads, stroke, width, or dash in the Inspector. Drag an endpoint to attach it to another side or node. Drag bend points to customize a routed path. Beautify or the command palette can reset routing.

Projects and Canvases

A project groups related canvases. Each canvas keeps its own elements, selection context, pan position, and zoom.

Use the Project and Canvas selectors in the top-left workspace bar to switch context.
Use the adjacent plus buttons to create a project or canvas.
Use the pencil buttons to rename the current project or canvas.
Search for a canvas by name in the command palette for quick switching.

AI Thinking 2.0

Open AI Workspace from the sparkle button. Use the left mode rail to move between Chat, Clarify, Perspectives, Review, Decision, and Memory while keeping one consistent context and action layout. Model-powered actions require the local Node bridge, while semantic editing, Decision Lab, Thinking Memory, checkpoints, and export remain available in static mode.

Give the canvas meaning

Select a shape and use the Inspector to classify it as a question, goal, fact, assumption, opinion, evidence, constraint, risk, option, criterion, conclusion, action, or unknown. Add confidence, source details, availability, and review conditions. Select a connector to classify its semantic relationship.

Choose a thinking mode

Clarify (Thinking Partner): answer one high-value question at a time and edit the problem tree.
Perspectives: compare independent frameworks without forcing disagreements into one answer.
Review: inspect a selection or the whole canvas through a separate logic-review layer.
Decision: confirm criteria, hard constraints, evidence-backed scores, scenarios, sensitivity, and the final record.
Memory: filter events, compare or restore checkpoints, branch earlier thinking, and assess changed evidence.

Control context and changes

Choose Manage in the compact Context scope bar before a request to inspect the exact objects and sources being sent. Uncheck anything sensitive or irrelevant. AI changes appear as suggestion cards; accept, edit, reject, or defer them, then apply selected changes as one undoable operation. Canceling or failing a request preserves your input and current preview.

Chat and generate a diagram

In Chat, type a question for a concise response based on canvas context. MCP servers can provide extra reference material when configured.

Describe the system or flow you want.
Choose Generate diagram to create a ghost preview.
Review, regenerate, or beautify the preview.
Choose Apply to insert it, or Discard to leave the canvas unchanged.

Edit a selection with AI

Select part of a diagram before opening AI Chat. Use Polish for focused improvements or Refactor for structural changes. Boundary connections are preserved when the preview is applied.

Import, Export, and Storage

Images

Insert local images with the image button or paste images from the system clipboard. Large images increase the size of the saved workspace.

Export

Choose Export to download the full scene as PNG. To export only selected elements, open the command palette and run Export selection as PNG. Choose Data to export the canvas and thinking structure as JSON or confirmed decision records as Markdown. Review findings are excluded unless you explicitly include them.

Where work is saved

Node bridge: projects and canvases are saved to the local SQLite workspace and backed up before overwrites.
Static or file mode: work is saved in this browser's localStorage.

Keyboard Shortcuts

Tools

V: Select
H: Hand
R: Rectangle
D: Diamond
O: Ellipse
M: Mark
A: Arrow
L: Line
P: Free draw
T: Text
E: Eraser

Edit

Cmd/Ctrl K: Command palette
Cmd/Ctrl A: Select visible elements
Cmd/Ctrl C: Copy selection
Cmd/Ctrl V: Paste elements or image
Cmd/Ctrl D: Duplicate selection
Cmd/Ctrl Z: Undo
Cmd/Ctrl Shift Z: Redo
Delete: Delete selection
Enter / F2: Edit content
Esc: Cancel or clear selection

Arrange and view

Cmd/Ctrl G: Group
Cmd/Ctrl Shift G: Ungroup
Cmd/Ctrl ]: Bring forward
Cmd/Ctrl [: Send backward
Arrow keys: Nudge 1px
Shift + Arrow: Nudge 10px
Cmd/Ctrl +: Zoom in
Cmd/Ctrl -: Zoom out
Cmd/Ctrl 0: Reset zoom
Space: Temporary hand tool

Troubleshooting

AI request buttons are unavailable

Start the local Node bridge with pnpm start, then open http://127.0.0.1:4173/app.html. In standalone static mode, model requests are disabled but local semantic editing, decisions, memory, checkpoints, drawing, saving, and export continue to work.

My work did not appear in another browser

Static mode uses browser-local storage, which is isolated by browser profile and origin. Use the same browser and URL, or run the Node bridge for a shared local SQLite workspace.

The browser says storage is full

Large inserted images can exceed browser storage limits. Export what you need, then remove or reduce large images. Running the Node bridge avoids the browser-local workspace limit.

A connector route looks wrong

Select the connector and use Beautify or the relevant reset action in the command palette. You can also drag endpoints and bend points manually.

I cannot find an action

Press Cmd/Ctrl+K and search the command palette. It contains drawing tools, selection actions, layout commands, exports, and canvas switching.