Canvas

A built-in whiteboard for wireframes, diagrams, sketches, and visual thinking, right inside your workspace.

Overview

The canvas is a built-in drawing panel that lives alongside your editor, terminal, and preview. Open it with Ctrl+4 or from the Command Bar. Everything you draw is saved per project and persists across restarts.

Use it to sketch UI layouts, map out architecture, draw flowcharts, or let your AI agent generate diagrams for you.

Drawing Tools

The canvas toolbar includes:

Shapes - Rectangle, ellipse, diamond, arrow, line
Text - Click anywhere to add text labels
Freehand - Draw with a pencil tool
Eraser - Remove elements
Selection - Move, resize, and group elements

Properties Bar

When you select an element or activate a drawing tool, a properties bar appears with context-aware options:

Fill color - Solid, hatch, cross-hatch, or transparent fills
Stroke color - Border and line colors including black
Stroke width - Thin, regular, bold
Stroke style - Solid, dashed, dotted
Font size - Small, medium, large, extra-large (for text)
Arrow style - Arrowhead types and curve style
Opacity - Element transparency

Mermaid Diagrams

Render Mermaid syntax (flowcharts, sequence diagrams, class diagrams, ER diagrams) directly onto the canvas. Diagrams are converted to native canvas elements that you can rearrange and style.

From the terminal:


blueberry canvas:mermaid /path/to/diagram.md

AI agents can create Mermaid diagrams by writing a temp file and running the command. New diagrams are automatically positioned to avoid overlapping existing content.

PNG Export

Export your canvas as a PNG image:

Select the elements you want to export (or export everything)
Use the download button in the toolbar
Choose dark or light mode for the export background

Exported images include 20px padding and use a subtle background color.

AI Agent Integration

AI agents can interact with the canvas through CLI commands available in any Blueberry terminal:

Command	Description
`blueberry canvas:data`	Get all canvas elements as JSON
`blueberry canvas:draw <file.json>`	Draw elements on the canvas from a JSON file
`blueberry canvas:mermaid <file>`	Render a Mermaid diagram onto the canvas
`blueberry canvas:remove <id> [id2 ...]`	Remove elements by ID
`blueberry canvas:update <id> <props.json>`	Update properties of an existing element
`blueberry capture:canvas`	Screenshot the canvas

Agents should run blueberry canvas:draw-guide before their first canvas:draw to get the style guide for element positioning and formatting.

New content added via canvas:draw and canvas:mermaid is automatically positioned next to existing elements to avoid overlap.

Per-Project & Per-Worktree

Canvas state is isolated per project. When using worktrees, each worktree has its own independent canvas. You can optionally copy the canvas to a new worktree using the “Copy workspace setup” checkbox in the Create Worktree dialog.

Keyboard Shortcuts

Action	Shortcut
Focus Canvas	`Ctrl+4`