feat(flow): semantic node shapes — decision diamond, terminator, cylinder, document, parallelogram, hexagon

[ivanmkc]

Gap

The flow viewer ships exactly one node shape — change (a status-toned box). Every external flowchart tool (Mermaid, draw.io, Lucidchart, BPMN, Visio) relies on semantic shapes to convey meaning: decision diamond, terminator/start-end (stadium), database cylinder, document, manual-input parallelogram, hexagon/prep. Today these can only be faked as styled change boxes, which loses the semantics and the "this looks like a real flowchart" first impression. Mermaid alone added 30+ new shapes in 2024.

Proposal — "shape pack v1"

Add a small set of node types alongside change, selectable via type (or data.shape):
decision (rhombus), terminator (stadium), cylinder (DB), document, parallelogram (I/O), hexagon (prep).

Surface / effort

• Viewer: new node components in flow-nodes.tsx (SVG shape + the existing tone/icon/label treatment).
• Layout: both engines already size cells generically from measured node boxes — no engine change needed (the shape draws inside its box; SGCR/dagre treat it as a rect). Decision/terminator unlock native decision-trees (with #fork-join) and authentic flowcharts.
• Effort: S–M (one PR; each shape is a small SVG component).

Part of the external-flowchart parity audit (see tracking epic).