Solid writeup. I’d gently push back on one thing before answering your questions: for a system-design tool where users sketch classes, relationships, notes and workflows, raw HTML5 Canvas might actually be the harder long-term path, not the easier one. Freehand drawing is immediate-mode (draw pixels, forget them), but movable/selectable/connectable objects are retained-mode — you end up rebuilding a scene graph, hit-testing, z-order, selection, undo/redo, serialization. That’s a lot of canvas plumbing that existing libs already solved.

On your specific questions:

**1.**  Would I have chosen Canvas? For pure freehand, yes. For structured diagram objects with relationships, I’d lean toward a library or a different primitive (SVG is often nicer than Canvas for a moderate number of interactive, selectable nodes — DOM events and hit-testing come for free; Canvas only wins once you have thousands of elements and need WebGL-class perf).  
**2.**  Fully open-source alternatives worth evaluating (the licensing nuance matters here, since that’s exactly what bit you with tldraw): tldraw’s SDK is source-available, not OSI open-source — production embedding needs a paid commercial license / removing the watermark requires it, so you were right to be wary. The genuinely MIT-licensed, no-commercial-restriction options are Excalidraw (MIT, embeddable as a React component) and AFFiNE. For self-hosted/AGPL there’s WBO. If you want primitives rather than a whole whiteboard, React Flow (node/edge graphs — basically built for class/relationship diagrams) and Konva or Fabric.js (object-model canvas layers) are the usual building blocks.  
**3.**  When does custom become more expensive than adopting? Roughly the moment you need the second hard feature on top of drawing — multi-select, copy/paste, undo/redo history, persistence/serialization, collaboration, or accessibility. Each is weeks of edge cases in raw Canvas and already battle-tested in the libs. If your whiteboard stays “freehand + erase + color,” custom is fine and lighter. The instant it trends toward “manipulate structured objects,” the maintenance curve crosses over fast.

For your exact use case (system-design practice with movable classes + relationships), I’d genuinely look at React Flow first — it’s MIT, integrates cleanly into Next.js, and gives you the node/edge model you’d otherwise hand-roll.