Diagram - Workshop Board
Turn observations into ideas with a drawing board, editable notes and selection arrangement controls.
#Plan a better first day
This fictional onboarding workshop starts with two observations, two ideas and a small experiment. Draw another possibility, edit a note, or reorganize the board. All changes stay in this mounted example.
- Use Observations, Ideas and Next step to move around the board at a readable scale. Fit drawing shows the complete scene.
- Choose the note or text tool and drag on the canvas. The new object opens for editing immediately. Double-click an existing object to edit its text.
- Use the Style controls to change the selected object's color or text size. Shapes also support fill and stroke settings. With nothing selected, these controls set the style of the next object you draw; Add inserts it without dragging.
- Choose Select notes in the arrangement toolbar, or Shift-click objects yourself. Try Align row, Align column and Space evenly, then Undo.
- Choose Group to move selected objects together. Select that group and choose Ungroup to keep its objects while removing the group.
To front and To back change the selection's stacking order. Arrangement buttons follow Diagram's availability checks: alignment needs at least two independent nodes, and spacing needs at least three. Groups use real container ownership, so moving a group also moves its children.
#Drawing and editing
The toolbar offers rectangles, ellipses, diamonds, text, notes, selection, Pan and Connect. Corner grips resize a selection; the separate rotation control turns it. These controls also accept keyboard input. Snap & guides defaults to On, and the grid is optional.
Click outside a text field to save. Escape cancels the text edit or an unfinished drawing gesture. Undo and Redo share the model's history, including drawing, text, styling, arrangement and grouping. Clear and Reset are also undoable.
Style controls sit beside the canvas and arrangement tools stay in the toolbar. On narrow screens the style controls form a horizontal strip above the canvas; scroll the strip to reach all settings. On narrow screens the board starts near the first observation; section links, Pan, zoom and Fit remain available.
#Adapt the example
WorkshopBoardDemo.vue configures the shared drawing example with the local fixture.ts, a workshop title and section links. Copy the shared drawing components included in its dependencies too. Replace that synthetic fixture with your scenario. Each mounted board owns a separate store and disposes it on unmount.
Drawing uses session.drawing, text and styling use session.content, and
arrangement buttons use Diagram.CommandButton. Group and Ungroup call
session.structure, which preserves world positions while changing ownership.
The example adds no alternative geometry, history or selection engine.
Notes are rectangular nodes with custom content and a paper treatment. Their color does not imply a saved workflow state. The board has no collaboration, network storage, freehand pen or application execution.