Whiteboard

An infinite canvas for visual thinking, brainstorming, and spatial organization

Whiteboard (Edgeless Mode)

AFFiNE’s Whiteboard (also known as Edgeless mode) transforms your pages into an infinite canvas for visual thinking. Create diagrams, flowcharts, mind maps, and spatial layouts with unlimited creative freedom.

Switch between Page mode (linear documents) and Edgeless mode (infinite canvas) using the toggle in the top-right corner or with ⌘/Ctrl + Alt + E.

Overview

The Whiteboard is built on BlockSuite’s Edgeless architecture, providing:

• Infinite canvas with pan and zoom
• Freeform positioning of any element
• Vector graphics (shapes, connectors, text)
• Embedded blocks (notes, images, databases)
• Multi-user collaboration in real-time
• Presentation mode for sharing ideas

Canvas Elements

Shapes

Draw and customize geometric shapes:

• Rectangle: Basic shapes and containers
• Ellipse: Circles and ovals
• Triangle: Directional indicators
• Diamond: Decision points
• Rounded Rectangle: Modern UI elements

Shape Properties:

• Fill color and opacity
• Stroke color and width
• Corner radius (for rectangles)
• Shadow effects

Connectors

Link elements with smart connectors:

• Straight lines: Direct connections
• Curved lines: Organic flow
• Orthogonal: Right-angle connections
• Arrows: Directional indicators

Connector Features:

• Auto-attach to shapes
• Route around obstacles
• Label text on paths
• Multiple arrow styles

Text & Notes

Add text and rich content:

• Edgeless Text: Floating text labels
• Note Blocks: Rich document containers
• Sticky Notes: Quick annotations

Text Features:

• Rich formatting (bold, italic, color)
• Multiple font sizes
• Text alignment
• Background colors

Media & Embeds

Embed rich content:

• Images: PNG, JPG, SVG, GIF
• Attachments: PDFs, documents
• Web embeds: Figma, YouTube, etc.
• Database views: Tables and kanban
• Linked pages: Other AFFiNE docs

Tools & Toolbar

Access whiteboard tools from the left toolbar:

Selection Tool (V)

• Click to select elements
• Drag to move selected items
• Shift + Click to multi-select
• Click + Drag for area selection
• Resize handles to scale elements

Shape Tool (R, E, T)

• Press R for rectangle
• Press E for ellipse
• Press T for triangle
• Click + Drag to draw shapes
• Shift + Drag to constrain proportions

Pen Tool (P)

• Freehand drawing with pen input
• Pressure sensitivity (on supported devices)
• Smooth curves with automatic stabilization
• Multiple brush sizes and colors

Connector Tool (C)

• Click start and end points
• Auto-attach to shape boundaries
• Double-click to add waypoints
• Supports arrow heads and labels

Text Tool (T)

• Click to place text
• Drag to create text boxes
• Rich formatting options
• Auto-resize or fixed width

Hand Tool (Spacebar)

• Pan around the canvas
• Scroll to pan vertically
• Shift + Scroll to pan horizontally
• Pinch to zoom (trackpad)

Hold Spacebar to temporarily activate the Hand tool while using any other tool.

Keyboard Shortcuts

Navigation

Action	macOS	Windows/Linux
Pan canvas	Spacebar + Drag	Spacebar + Drag
Zoom in	⌘ + +	Ctrl + +
Zoom out	⌘ + -	Ctrl + -
Fit to screen	⌘ + 1	Ctrl + 1
Zoom to 100%	⌘ + 0	Ctrl + 0
Zoom to selection	⌘ + 2	Ctrl + 2

Tools

Tool	Shortcut
Selection	V or Esc
Hand (pan)	H or Space
Pen/Draw	P
Text	T
Shape	R, E, D
Connector	C
Note	N
Frame	F

Element Operations

Action	macOS	Windows/Linux
Delete selected	Delete/Backspace	Delete/Backspace
Duplicate	⌘ + D	Ctrl + D
Group	⌘ + G	Ctrl + G
Ungroup	⌘ + Shift + G	Ctrl + Shift + G
Bring to front	⌘ + ]	Ctrl + ]
Send to back	⌘ + [	Ctrl + [
Align left	⌘ + Shift + L	Ctrl + Shift + L
Align center	⌘ + Shift + C	Ctrl + Shift + C
Align right	⌘ + Shift + R	Ctrl + Shift + R

Selection

Action	Shortcut
Select all	⌘/Ctrl + A
Clear selection	Esc
Multi-select	Shift + Click
Add to selection	⌘/Ctrl + Click

Frames

Frames organize canvas content into sections:

• Define areas on the infinite canvas
• Create presentation slides
• Group related elements
• Navigate between sections
• Export specific areas

Frame Features

• Custom names and titles
• Background colors
• Resize and reposition
• Navigator panel for quick access
• Presentation mode to present frames as slides

Using Frames for Presentations

1. Press F or click the Frame tool
2. Draw frames around content sections
3. Name each frame in the Navigator panel
4. Click “Present” to enter presentation mode
5. Use arrow keys to navigate between frames
6. Press Esc to exit presentation mode

Layers and Ordering

Manage element stacking:

• Bring to Front (⌘/Ctrl + ]): Move to top layer
• Send to Back (⌘/Ctrl + [): Move to bottom layer
• Bring Forward: Move up one layer
• Send Backward: Move down one layer
• Right-click context menu for layer options

Alignment and Distribution

Align multiple elements:

Alignment

• Align left edges
• Align horizontal center
• Align right edges
• Align top edges
• Align vertical center
• Align bottom edges

Distribution

• Distribute horizontally
• Distribute vertically
• Even spacing
• Smart guides appear when dragging

Grouping

Group elements to move and transform together:

1. Select multiple elements (Shift + Click)
2. Press ⌘/Ctrl + G to group
3. Move the group as one unit
4. Press ⌘/Ctrl + Shift + G to ungroup

Double-click a group to edit individual elements without ungrouping.

Grid and Guides

Align elements precisely:

• Grid: Toggle background grid (⌘/Ctrl + ')
• Snap to Grid: Align elements to grid points
• Smart Guides: Appear when aligning with other elements
• Rulers: Show canvas coordinates (optional)

Canvas Navigation

Viewport Controls

• Pan: Drag with hand tool or Spacebar
• Zoom: Scroll wheel or pinch gesture
• Fit View: ⌘/Ctrl + 1 to fit all content
• Minimap: Overview of entire canvas (toggle in settings)

Navigator Panel

Quickly jump between sections:

• View all frames in your canvas
• Click to jump to specific frame
• Rename frames for organization
• See thumbnail previews

Embedding Page Content

Embed rich page blocks in the whiteboard:

• Note blocks: Full-featured documents
• Database blocks: Tables, kanban, gallery views
• Code blocks: Syntax-highlighted code
• Images and media: Visual assets
• Linked pages: References to other docs

All embedded blocks are fully interactive and support rich editing.

Use Cases

Brainstorming

Capture ideas visually with shapes, connectors, and sticky notes

Flowcharts

Design process flows and decision trees

Mind Maps

Organize thoughts in hierarchical structures

Wireframes

Sketch UI designs and user flows

Presentations

Create slide decks with frames and present inline

Project Planning

Map timelines, dependencies, and milestones

Presentation Mode

Present your whiteboard as a slideshow:

1. Create frames for each slide section
2. Click “Present” in the toolbar
3. Navigate with arrow keys or click
4. Zoom and pan during presentation
5. Press Esc to exit

Frames are presented in the order they appear in the Navigator panel. Drag to reorder.

Export Options

• PNG: Export entire canvas or selected frames
• SVG: Vector export for scaling
• PDF: Multi-page export of frames
• Copy as Image: Quick clipboard export

Performance Tips

• Use frames to organize large canvases
• Group related elements to reduce complexity
• Minimize embedded databases for better performance
• Use images instead of embedding large documents

Next Steps

Editor

Learn about page mode and document editing

Database

Add structured data to your whiteboard

Collaboration

Collaborate on whiteboards in real-time

AI Assistant

Use AI to generate diagrams and content