ClipSpacesClipSpaces Docs
Back to app

All releases

Diagramming: shapes, smart connectors, and a draw layer

ClipSpaces can now build diagrams — flow charts, data pipelines, and software architecture — natively on the React Flow canvas. Three additions, all persisted and (shapes) cloud-synced like existing cards.

Added

  • Diagram shapes (components/cards/ShapeCard.tsx, FrameCard.tsx). A new shape card kind with seven SVG variants (process, decision, start/end, input/output, database, service, queue) plus a titled frame container. Each has a double-click-to-edit label and is resizable via React Flow NodeResizer. Added from the toolbar Shapes flyout or the canvas right-click menu; new kinds round-trip through the existing jsonb card store with no schema change.
  • Smart connectors (components/Canvas.tsx DeletableEdge). Connections now carry styling in data: a line/animated variant (a flowing dashed animation for pipelines), an editable mid-edge label, an arrowhead, and color. A hover toolbar toggles animation/arrow, edits the label, or deletes; new connections default to a labeled arrow line. StoredEdge gained optional variant/label/color/arrow (backward-compatible — legacy edges stay plain). One storedToFlowEdge/flowToStoredEdge pair keeps load/save/getBoard/ receiveEdges in sync.
  • Freehand draw layer (components/DrawLayer.tsx). A pen (via perfect-freehand), highlighter, line, arrow, rectangle, ellipse, and eraser, drawn over the canvas in flow coordinates so strokes pan/zoom with everything else. A floating tool/color/size palette; Esc or Done exits. Strokes persist per space in localStorage (Stroke + loadDrawings/saveDrawings).

Changed

  • components/Toolbar.tsx — added a Shapes flyout and a Draw toggle; toggle buttons opt out of the shared sliding indicator so they can be active alongside Select.
  • components/Canvas.tsx — registered shape/frame node types, added addShape/addFrame to CanvasHandle, a live-resize path, and a drawMode prop that suspends pan/drag/connect while drawing.
  • app/api/ai/route.ts + lib/notion.ts — the AI assistant describes shapes/frames, and Notion export emits their labels/titles.
  • lib/canvas-store.ts — ShapeCard/FrameCard/Stroke types; StoredEdge styling fields; drawing persistence (tests/canvas-store.test.ts extended).
  • perfect-freehand dependency.