Draw mode (the pencil toggle, or press D) turns the canvas into a sketch surface with pen, highlighter, and eraser tools, a color row, four stroke widths, and a Clear-all — strokes ride the canvas pan/zoom.
Where: canvas → pencil toggle in the top bar (or press D) — Enter draw mode
Key ideas
- Draw mode: Toggling the pencil (or pressing D) flips the canvas into ink mode: node dragging, connecting, and selection are disabled so left-button drags paint instead — hold Space to temporarily pan while drawing.
- Ink toolbar: A floating pill appears with three tools (Pen, Highlighter, Eraser), a 7-swatch color row, four stroke widths (2/4/8/14px), a Clear-all trash button (disabled when there are no strokes), and an X to exit.
- Strokes follow the viewport: Committed ink is rendered inside the React Flow viewport, so annotations stay anchored to the canvas and pan/zoom with your nodes rather than floating over the screen.
Steps
- Click the pencil icon in the top bar (or press D) to enter draw mode — the ink toolbar appears near the top-left.
- Pick Pen, Highlighter, or Eraser; choose a color swatch and a stroke width.
- Drag on the canvas to draw; hold Space to pan without leaving draw mode.
- Use the eraser tool to remove individual strokes, or the trash icon to Clear all ink.
- Press D again or click the X in the ink toolbar to exit draw mode and return to node editing.
FAQ
Why can't I move nodes while drawing?
Draw mode disables node drag/connect/select so your strokes don't accidentally grab a node. Exit draw mode (X or D) to manipulate nodes again, or hold Space to pan.
Does picking a color switch me off the eraser?
Yes — choosing any color swatch switches the eraser back to the pen so the color actually applies.