feat: implement Story 2.8 — Flowchart diagram type renderer

Add the 6th and final core diagram type: flowcharts with standard
ISO 5807 shapes (process, decision, terminal, I/O, subprocess),
orthogonal edge routing with decision outcome labels, and ELK
layered auto-layout.

Code review fixes included: decision diamond ELK height corrected
(80→130px), icon rendering made conditional, data.color border
override added to all nodes, ELK sizing ternary refactored to
getNodeDimensions() helper, constants unified to lookup maps.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/modules/diagram/components/editor/DiagramCanvas.tsx

@@ -47,6 +47,12 @@ import { SeqFragmentNode } from "../../types/sequence/SeqFragmentNode";
 import { SeqSyncEdge } from "../../types/sequence/SeqSyncEdge";
 import { SeqAsyncEdge } from "../../types/sequence/SeqAsyncEdge";
 import { SeqReturnEdge } from "../../types/sequence/SeqReturnEdge";
+import { FlowProcessNode } from "../../types/flowchart/FlowProcessNode";
+import { FlowDecisionNode } from "../../types/flowchart/FlowDecisionNode";
+import { FlowTerminalNode } from "../../types/flowchart/FlowTerminalNode";
+import { FlowIoNode } from "../../types/flowchart/FlowIoNode";
+import { FlowSubprocessNode } from "../../types/flowchart/FlowSubprocessNode";
+import { FlowEdge } from "../../types/flowchart/FlowEdge";
 
 const nodeTypes = {
   bpmnActivity: BpmnActivityNode,
@@ -70,6 +76,11 @@ const nodeTypes = {
   archExternal: ArchExternalNode,
   seqParticipant: SeqParticipantNode,
   seqFragment: SeqFragmentNode,
+  flowProcess: FlowProcessNode,
+  flowDecision: FlowDecisionNode,
+  flowTerminal: FlowTerminalNode,
+  flowIo: FlowIoNode,
+  flowSubprocess: FlowSubprocessNode,
 };
 
 const edgeTypes = {
@@ -82,6 +93,7 @@ const edgeTypes = {
   seqSync: SeqSyncEdge,
   seqAsync: SeqAsyncEdge,
   seqReturn: SeqReturnEdge,
+  flowEdge: FlowEdge,
 };
 
 /** Container node types that should not participate in BFS highlighting */
@@ -183,6 +195,21 @@ function MarkerDefs() {
             strokeWidth={1.5}
           />
         </marker>
+        {/* Flowchart markers */}
+        <marker
+          id="flow-arrow"
+          viewBox="0 0 10 10"
+          refX={10}
+          refY={5}
+          markerWidth={8}
+          markerHeight={8}
+          orient="auto-start-reverse"
+        >
+          <path
+            d="M 0 0 L 10 5 L 0 10 Z"
+            fill="var(--diagram-flowchart, #e11d48)"
+          />
+        </marker>
       </defs>
     </svg>
   );