Whiteboard
A local canvas for architecture diagrams, flows and sketches — several boards per install, image export and a fullscreen presentation mode.
Boards
Entry point: the “Whiteboard” nav item (/whiteboard); the editor lives at /whiteboard/:id.
List cards show a vector thumbnail of each board that refreshes as you draw; empty boards show a placeholder. Create, rename and delete are all on the list page.
| Action | What it does |
|---|---|
| Create | Name a board and land straight in the editor |
| Rename / delete | Hover actions on each card; delete is a soft delete and cannot be undone |
| Autosave | Writes back about a second after you stop drawing; the toolbar shows Saved / Saving / Unsaved |
Drawing tools
| Tool | Key | How it works |
|---|---|---|
| Select | V | Click to select, drag to move, drag the edge/corner handles to resize, drag on empty space to marquee-select |
| Pan | H or hold Space | Drag the canvas to move the view |
| Rectangle | R | Drag out a rectangle node |
| Ellipse | O | Drag out an ellipse node |
| Diamond | D | Drag out a diamond (decision / branch) |
| Text | T | Click to place text and type immediately; double-click any element to edit its label |
| Pen | P | Freehand polyline for annotations and sketches |
| Connector | L | Drag from one element to another: endpoints snap even when you miss the shape (about 28px of tolerance towards the other end), land on the border on the side where you let go, and the target shape highlights while you drag. Elbow routing is on by default (outgoing stub → turn → incoming stub); switch to straight lines in the toolbar. Double-click to add a label |
| Eraser | E | Click an element to remove it |
The toolbar also carries stroke colour, fill colour, stroke width and font size: with nothing selected they apply to new elements, with a selection they restyle it in place.
Editing
| Action | Shortcut |
|---|---|
| Multi-select | Shift + click, or marquee on empty space |
| Delete selection | Delete / Backspace |
| Duplicate selection | Ctrl + D |
| Nudge | Arrow keys (Shift + arrows for a bigger step) |
| Z-order | Ctrl + ] bring to front / Ctrl + [ send to back |
| Undo / redo | Ctrl + Z / Ctrl + Shift + Z |
| Select all | Ctrl + A |
Text inside shapes wraps and centres automatically, and connectors follow their endpoints when you move the shapes — no need to redraw the arrows. Select a connector to get a round handle on each end: drag a handle onto a shape to re-attach it, or into empty space to make that end free again.
Elbow routing
In elbow mode a connector leaves its border perpendicular, turns, and enters the other border perpendicular, so it never cuts diagonally across shapes. Several connectors in the same direction fan out along the midline instead of stacking on top of each other. Switch to “Straight” for direct lines. The endpoint position comes from where you let go, and it stays on that side of the border while the shapes move.
View and export
| Action | What it does |
|---|---|
| Zoom | Wheel zooms towards the pointer; the toolbar shows the ratio and offers reset / fit |
| Horizontal scroll | Shift + wheel |
| Grid snapping | Toolbar toggle: new and moved elements align to a 20px grid (freehand pen never snaps, so it stays under your cursor) |
| Export PNG | 2x bitmap, ready to paste into docs or chat |
| Export SVG | Vector output you can edit further |
Presentation
Hit “Present” for a fullscreen read-only view: the board is fitted to the screen, ← → move between boards and Esc exits. Wheel zoom and Shift + wheel pan still work, but nothing can be changed.
Auto layout
The toolbar’s “Auto layout” rearranges shapes by their connections: pick a direction (horizontal LR / vertical TB) and press the button. Freehand annotations stay where they are, connector endpoints follow along, and undo brings your manual arrangement back. The button is disabled when the board has no connections.
Data and API
Each board is one row; the scene (elements plus viewport) is stored as JSON. Endpoints follow the shared response and paging conventions:
| Method | Path | Notes |
|---|---|---|
| GET | /api/whiteboards?page=1&pageSize=20 | Board list (newest first, without the scene payload) |
| GET | /api/whiteboards/{id} | Board detail including the scene JSON |
| POST | /api/whiteboards | Create a board; an empty scene falls back to a blank one |
| PUT | /api/whiteboards/{id} | Update the name and / or the scene (partial fields) |
| DELETE | /api/whiteboards/{id} | Soft delete |
The scene is validated on write: it must be a valid JSON object under 4 MB and the name at most 100 characters. Invalid requests fail with a business error and never corrupt an existing board.