Drawing and Editing
The website combines a drawing toolbar, a canvas, a selection toolbar, and view controls. Embedded hosts can provide their own controls; see the VS Code and Confluence guides for their workflows.
Drawing tools
| Website tool | Use it for | Shortcut |
|---|---|---|
| Arrow | Relationships and directed connections | A |
| Rectangle | Components, steps, and cards | R |
| Ellipse | Rounded nodes and endpoints | O |
| Diamond | Decisions | D |
| Text | Labels and notes | T |
Choose a tool, then draw on the canvas. Press Escape to cancel an interaction. Tool shortcuts apply while working in the canvas; typing into a text field enters text.
Select and move
Click an object to select it. Drag a selected object to reposition it, or use its handles to resize and reshape it. Drag on an empty part of the canvas to make a selection rectangle.
Use the selection toolbar to change the properties available for the selected objects. A text selection exposes different controls from an arrow or a filled shape.
Text and appearance
Use Text for a label or note. Select existing text and choose Edit text, or use Enter to begin editing the selected text. Available controls include text size, bold, italic, and alignment.
For shapes, adjust border and fill colors. For arrows, use the available line style, endpoint, and connector-type controls. Keep a small, consistent set of styles so readers can recognize the meaning of each element.
Copy, paste, and delete
Use Ctrl/Cmd+C to copy a selection and Ctrl/Cmd+V to paste. Where the browser supports image clipboard access, copying also provides a PNG representation for other applications. Clipboard permissions and destination support affect what can be pasted.
Press Delete to remove selected objects.
Undo and redo
Use Ctrl/Cmd+Z to undo and Ctrl/Cmd+Shift+Z to redo, or use the toolbar buttons. Finish a drawing gesture or text edit before starting another operation.
Pan and zoom
Hold Space and drag to pan. Use Zoom in, Zoom out, and the percentage Reset zoom control to change the view. Panning and zooming do not rearrange the drawing.
See Customization for view and drawing settings, and Export and Sharing for saving outside the website.