@dilipod/ui 0.4.34 → 0.4.36

package/src/components/flowchart-diagram.tsx

@@ -18,255 +18,478 @@ interface FlowEdge {
   label?: string
 }
 
+interface LayoutNode {
+  id: string
+  x: number
+  y: number
+  width: number
+  height: number
+  layer: number
+  node: FlowNode
+}
+
+// ============================================
+// Layout Constants
+// ============================================
+
+const NODE_WIDTH = 180
+const NODE_HEIGHT = 44
+const DIAMOND_SIZE = 72
+const X_GAP = 50
+const Y_GAP = 64
+const PADDING = 40
+const FONT_SIZE = 11
+const CHAR_WIDTH = 6.2
+const LINE_HEIGHT = 14
+
 // ============================================
 // Parser
 // ============================================
 
+function stripQuotes(s: string): string {
+  const t = s.trim()
+  if ((t.startsWith('"') && t.endsWith('"')) || (t.startsWith("'") && t.endsWith("'"))) {
+    return t.slice(1, -1)
+  }
+  return t
+}
+
+function parseNodeRef(raw: string): { id: string; label?: string; type?: FlowNode['type'] } {
+  const s = raw.trim()
+
+  // Decision: ID{Label} or ID{"Label"}
+  const decision = s.match(/^([A-Za-z0-9_]+)\{(.+)\}$/)
+  if (decision) return { id: decision[1], label: stripQuotes(decision[2]), type: 'decision' }
+
+  // Stadium/terminal: ID([Label])
+  const stadium = s.match(/^([A-Za-z0-9_]+)\(\[(.+)\]\)$/)
+  if (stadium) return { id: stadium[1], label: stripQuotes(stadium[2]), type: 'terminal' }
+
+  // Circle: ID((Label))
+  const circle = s.match(/^([A-Za-z0-9_]+)\(\((.+)\)\)$/)
+  if (circle) return { id: circle[1], label: stripQuotes(circle[2]), type: 'terminal' }
+
+  // Rounded rect: ID(Label) — but not ID([...]) or ID((...))
+  const rounded = s.match(/^([A-Za-z0-9_]+)\(([^[(].+?)\)$/)
+  if (rounded) return { id: rounded[1], label: stripQuotes(rounded[2]), type: 'action' }
+
+  // Rectangle: ID[Label] or ID["Label"] — but not ID([...])
+  const rect = s.match(/^([A-Za-z0-9_]+)\[([^(].+?)\]$/)
+  if (rect) {
+    const label = stripQuotes(rect[2])
+    const isTerminal = /^(start|end|begin|finish|done|stop)$/i.test(label)
+    return { id: rect[1], label, type: isTerminal ? 'terminal' : 'action' }
+  }
+
+  // Bare ID reference
+  const bareId = s.match(/^([A-Za-z0-9_]+)$/)
+  if (bareId) return { id: bareId[1] }
+
+  return { id: s }
+}
+
+function registerNode(
+  map: Map<string, FlowNode>,
+  ref: { id: string; label?: string; type?: FlowNode['type'] },
+) {
+  if (!ref.id) return
+  const existing = map.get(ref.id)
+  if (existing) {
+    // Upgrade label/type if current entry only has ID as label
+    if (ref.label && existing.label === existing.id) {
+      existing.label = ref.label
+    }
+    if (ref.type && ref.type !== 'action' && existing.type === 'action') {
+      existing.type = ref.type
+    }
+    return
+  }
+  map.set(ref.id, {
+    id: ref.id,
+    label: ref.label || ref.id,
+    type: ref.type || 'action',
+  })
+}
+
 function parseMermaidFlowchart(mermaid: string): { nodes: FlowNode[]; edges: FlowEdge[] } {
-  const nodes = new Map<string, FlowNode>()
+  const nodeMap = new Map<string, FlowNode>()
   const edges: FlowEdge[] = []
 
   const lines = mermaid
     .split(/\\n|\n/)
     .map(l => l.trim())
-    .filter(l => l && !l.startsWith('flowchart') && !l.startsWith('graph'))
-
-  function parseNodeDef(str: string): { id: string; label?: string; type?: FlowNode['type'] } {
-    // Decision: D{Certificate Found?}
-    const decisionMatch = str.match(/^([A-Za-z0-9_]+)\{(.+?)\}$/)
-    if (decisionMatch) return { id: decisionMatch[1], label: decisionMatch[2], type: 'decision' }
-    // Action / terminal: A[Start] or A(Start) or A([Start])
-    const bracketMatch = str.match(/^([A-Za-z0-9_]+)\[?\(?\[?(.+?)\]?\)?\]?$/)
-    if (bracketMatch) {
-      const label = bracketMatch[2]
-      const isTerminal = /^(start|end|begin|finish|done)$/i.test(label)
-      return { id: bracketMatch[1], label, type: isTerminal ? 'terminal' : 'action' }
-    }
-    // Just an ID reference
-    return { id: str.trim() }
-  }
+    .filter(l => l && !l.startsWith('%%'))
 
   for (const line of lines) {
-    const edgeMatch = line.match(/^(.+?)\s*-->(?:\|(.+?)\|)?\s*(.+)$/)
-    if (!edgeMatch) continue
+    // Skip directives
+    if (/^(flowchart|graph|subgraph|end|style|classDef|class|click|linkStyle)\b/i.test(line)) continue
 
-    const leftRaw = edgeMatch[1].trim()
-    const edgeLabel = edgeMatch[2]?.trim()
-    const rightRaw = edgeMatch[3].trim()
+    // Try edge: A -->|label| B  or  A --> B  or  A ==> B  or  A -.-> B  or  A --- B
+    const edgeMatch = line.match(
+      /^(.+?)\s*(?:-->|==>|-\.->|---)\s*(?:\|([^|]*)\|)?\s*(.+)$/,
+    )
 
-    const left = parseNodeDef(leftRaw)
-    const right = parseNodeDef(rightRaw)
+    if (edgeMatch) {
+      const leftNode = parseNodeRef(edgeMatch[1].trim())
+      const edgeLabel = edgeMatch[2]?.trim() || undefined
+      const rightNode = parseNodeRef(edgeMatch[3].trim())
 
-    if (left.label && !nodes.has(left.id)) {
-      nodes.set(left.id, { id: left.id, label: left.label, type: left.type || 'action' })
-    }
-    if (right.label && !nodes.has(right.id)) {
-      nodes.set(right.id, { id: right.id, label: right.label, type: right.type || 'action' })
-    }
-    if (!nodes.has(left.id)) {
-      nodes.set(left.id, { id: left.id, label: left.id, type: 'action' })
-    }
-    if (!nodes.has(right.id)) {
-      nodes.set(right.id, { id: right.id, label: right.id, type: 'action' })
+      registerNode(nodeMap, leftNode)
+      registerNode(nodeMap, rightNode)
+      edges.push({ from: leftNode.id, to: rightNode.id, label: edgeLabel })
+      continue
     }
 
-    edges.push({ from: left.id, to: right.id, label: edgeLabel })
+    // Standalone node definition
+    const nodeDef = parseNodeRef(line)
+    if (nodeDef.label) {
+      registerNode(nodeMap, nodeDef)
+    }
   }
 
-  return { nodes: Array.from(nodes.values()), edges }
+  return { nodes: Array.from(nodeMap.values()), edges }
 }
 
 // ============================================
-// Layout Builder
+// Layout (BFS Layered / Sugiyama-lite)
 // ============================================
 
-function findMergePoint(
-  branchStarts: string[],
-  outgoing: Map<string, FlowEdge[]>,
-): string | null {
-  const reachable = new Map<string, Set<string>>()
-
-  for (const start of branchStarts) {
-    const q = [start]
-    const seen = new Set<string>()
-    while (q.length > 0) {
-      const id = q.shift()!
-      if (seen.has(id)) continue
-      seen.add(id)
-      if (!reachable.has(id)) reachable.set(id, new Set())
-      reachable.get(id)!.add(start)
-      const outs = outgoing.get(id) || []
-      for (const e of outs) q.push(e.to)
+function computeLayout(
+  nodes: FlowNode[],
+  edges: FlowEdge[],
+): { layoutNodes: LayoutNode[]; svgWidth: number; svgHeight: number } {
+  if (nodes.length === 0) return { layoutNodes: [], svgWidth: 0, svgHeight: 0 }
+
+  // Build adjacency
+  const forward = new Map<string, string[]>()
+  const backward = new Map<string, string[]>()
+  for (const e of edges) {
+    if (!forward.has(e.from)) forward.set(e.from, [])
+    forward.get(e.from)!.push(e.to)
+    if (!backward.has(e.to)) backward.set(e.to, [])
+    backward.get(e.to)!.push(e.from)
+  }
+
+  // Find roots
+  const roots = nodes.filter(n => !backward.has(n.id) || backward.get(n.id)!.length === 0)
+  if (roots.length === 0) roots.push(nodes[0])
+
+  // BFS layering (longest-path for better aesthetics)
+  const layers = new Map<string, number>()
+  const queue: string[] = []
+  for (const r of roots) {
+    layers.set(r.id, 0)
+    queue.push(r.id)
+  }
+  const visited = new Set<string>()
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    if (visited.has(id)) continue
+    visited.add(id)
+    const myLayer = layers.get(id) || 0
+    for (const child of forward.get(id) || []) {
+      const childLayer = layers.get(child)
+      if (childLayer === undefined || myLayer + 1 > childLayer) {
+        layers.set(child, myLayer + 1)
+      }
+      if (!visited.has(child)) queue.push(child)
     }
   }
+  // Handle disconnected nodes
+  const maxLayer = Math.max(0, ...Array.from(layers.values()))
+  for (const n of nodes) {
+    if (!layers.has(n.id)) layers.set(n.id, maxLayer + 1)
+  }
 
-  const allBranches = new Set(branchStarts)
-  const q = [branchStarts[0]]
-  const seen = new Set<string>()
-  while (q.length > 0) {
-    const id = q.shift()!
-    if (seen.has(id)) continue
-    seen.add(id)
-    if (!allBranches.has(id) && reachable.get(id)?.size === branchStarts.length) {
-      return id
+  // Group by layer
+  const nodesByLayer = new Map<number, FlowNode[]>()
+  for (const n of nodes) {
+    const layer = layers.get(n.id)!
+    if (!nodesByLayer.has(layer)) nodesByLayer.set(layer, [])
+    nodesByLayer.get(layer)!.push(n)
+  }
+
+  // Barycenter sort within layers
+  const sortedLayers = Array.from(nodesByLayer.keys()).sort((a, b) => a - b)
+  const posInLayer = new Map<string, number>()
+
+  for (let li = 0; li < sortedLayers.length; li++) {
+    const layer = sortedLayers[li]
+    const nodesInLayer = nodesByLayer.get(layer)!
+
+    if (li > 0) {
+      nodesInLayer.sort((a, b) => {
+        const parentsA = backward.get(a.id) || []
+        const parentsB = backward.get(b.id) || []
+        const avgA = parentsA.length > 0
+          ? parentsA.reduce((s, p) => s + (posInLayer.get(p) ?? 0), 0) / parentsA.length
+          : 0
+        const avgB = parentsB.length > 0
+          ? parentsB.reduce((s, p) => s + (posInLayer.get(p) ?? 0), 0) / parentsB.length
+          : 0
+        return avgA - avgB
+      })
     }
-    const outs = outgoing.get(id) || []
-    for (const e of outs) q.push(e.to)
+    nodesInLayer.forEach((n, i) => posInLayer.set(n.id, i))
+  }
+
+  // Compute pixel positions
+  const layoutNodes: LayoutNode[] = []
+
+  for (const layer of sortedLayers) {
+    const nodesInLayer = nodesByLayer.get(layer)!
+    const widths = nodesInLayer.map(n => nodeWidth(n))
+    const heights = nodesInLayer.map(n => nodeHeight(n))
+    const totalWidth = widths.reduce((s, w) => s + w, 0) + (nodesInLayer.length - 1) * X_GAP
+    let startX = -totalWidth / 2
+
+    nodesInLayer.forEach((n, i) => {
+      layoutNodes.push({
+        id: n.id,
+        x: startX + widths[i] / 2,
+        y: layer * (NODE_HEIGHT + Y_GAP),
+        width: widths[i],
+        height: heights[i],
+        layer,
+        node: n,
+      })
+      startX += widths[i] + X_GAP
+    })
+  }
+
+  // Normalize so min x/y = PADDING
+  const minX = Math.min(...layoutNodes.map(n => n.x - n.width / 2))
+  const minY = Math.min(...layoutNodes.map(n => n.y - n.height / 2))
+  const offsetX = PADDING - minX
+  const offsetY = PADDING - minY
+  for (const n of layoutNodes) {
+    n.x += offsetX
+    n.y += offsetY
   }
-  return null
+
+  const svgWidth = Math.max(...layoutNodes.map(n => n.x + n.width / 2)) + PADDING
+  const svgHeight = Math.max(...layoutNodes.map(n => n.y + n.height / 2)) + PADDING
+
+  return { layoutNodes, svgWidth, svgHeight }
 }
 
-type LayoutItem =
-  | { type: 'node'; nodeId: string }
-  | { type: 'arrow'; label?: string }
-  | { type: 'branch'; decision: string; branches: { label?: string; items: LayoutItem[] }[]; mergeId: string | null }
-
-function buildLayout(
-  startId: string,
-  outgoing: Map<string, FlowEdge[]>,
-  incoming: Map<string, FlowEdge[]>,
-  nodeMap: Map<string, FlowNode>,
-  visited: Set<string>
-): LayoutItem[] {
-  const items: LayoutItem[] = []
-  let currentId: string | null = startId
-
-  while (currentId) {
-    if (visited.has(currentId)) break
-
-    const node = nodeMap.get(currentId)
-    if (!node) break
-
-    const outs: FlowEdge[] = outgoing.get(currentId) || []
-
-    if (outs.length <= 1) {
-      visited.add(currentId)
-      items.push({ type: 'node', nodeId: currentId })
-      if (outs.length === 1) {
-        const nextId: string = outs[0].to
-        if (visited.has(nextId)) break
-        items.push({ type: 'arrow', label: outs[0].label })
-        currentId = nextId
-      } else {
-        currentId = null
-      }
+function nodeWidth(n: FlowNode): number {
+  if (n.type === 'decision') return Math.max(DIAMOND_SIZE * 1.4, 100)
+  // Scale width to label length, clamped
+  const textWidth = n.label.length * CHAR_WIDTH + 32
+  return Math.max(100, Math.min(NODE_WIDTH, textWidth))
+}
+
+function nodeHeight(n: FlowNode): number {
+  if (n.type === 'decision') return DIAMOND_SIZE
+  const w = nodeWidth(n)
+  const lines = wrapText(n.label, w - 24)
+  return Math.max(NODE_HEIGHT, lines.length * LINE_HEIGHT + 16)
+}
+
+// ============================================
+// Text Wrapping
+// ============================================
+
+function wrapText(text: string, maxPixelWidth: number): string[] {
+  const charsPerLine = Math.max(8, Math.floor(maxPixelWidth / CHAR_WIDTH))
+  if (text.length <= charsPerLine) return [text]
+
+  const words = text.split(' ')
+  const lines: string[] = []
+  let cur = ''
+
+  for (const word of words) {
+    const test = cur ? `${cur} ${word}` : word
+    if (test.length > charsPerLine && cur) {
+      lines.push(cur)
+      cur = word
     } else {
-      visited.add(currentId)
-      items.push({ type: 'node', nodeId: currentId })
-
-      const branchStarts: string[] = outs.map((e: FlowEdge) => e.to)
-      const mergeId = findMergePoint(branchStarts, outgoing)
-
-      const branches: { label?: string; items: LayoutItem[] }[] = []
-      for (const edge of outs) {
-        if (visited.has(edge.to) && edge.to !== mergeId) {
-          branches.push({ label: edge.label, items: [] })
-          continue
-        }
-        const branchItems = buildLayout(edge.to, outgoing, incoming, nodeMap, visited)
-        branches.push({ label: edge.label, items: branchItems })
-      }
+      cur = test
+    }
+  }
+  if (cur) lines.push(cur)
 
-      items.push({ type: 'branch', decision: currentId, branches, mergeId })
+  // Max 3 lines
+  if (lines.length > 3) {
+    lines.length = 3
+    lines[2] = lines[2].slice(0, -1) + '\u2026'
+  }
+  return lines
+}
 
-      if (mergeId && !visited.has(mergeId)) {
-        items.push({ type: 'arrow' })
-        currentId = mergeId
-      } else {
-        currentId = null
-      }
+// ============================================
+// SVG Edge Path
+// ============================================
+
+function computeEdgePath(
+  from: LayoutNode,
+  to: LayoutNode,
+): string {
+  let startX = from.x
+  let startY = from.y + from.height / 2
+
+  // For decisions, exit from side vertex when target is horizontally offset
+  if (from.node.type === 'decision') {
+    const dx = to.x - from.x
+    const halfDiamond = DIAMOND_SIZE / 2
+    if (Math.abs(dx) > halfDiamond) {
+      startX = from.x + (dx > 0 ? halfDiamond : -halfDiamond)
+      startY = from.y
     }
   }
 
-  return items
+  const endX = to.x
+  const endY = to.y - to.height / 2
+
+  // Cubic bezier with vertical control points
+  const midY = (startY + endY) / 2
+  return `M ${startX} ${startY} C ${startX} ${midY}, ${endX} ${midY}, ${endX} ${endY}`
 }
 
 // ============================================
-// Render Components
+// SVG Components
 // ============================================
 
-function FlowArrow({ label }: { label?: string }) {
+function SvgDefs() {
   return (
-    <div className="flex flex-col items-center">
-      {label && (
-        <span className="text-[10px] font-medium text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mb-0.5">
-          {label}
-        </span>
-      )}
-      <div className="w-px h-4 bg-gray-300" />
-      <div className="w-0 h-0 border-l-[4px] border-r-[4px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-300" />
-    </div>
+    <defs>
+      <marker
+        id="fc-arrowhead"
+        viewBox="0 0 10 7"
+        refX="10"
+        refY="3.5"
+        markerWidth="8"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <polygon points="0 0, 10 3.5, 0 7" fill="#D1D5DB" />
+      </marker>
+      <filter id="fc-shadow" x="-4%" y="-4%" width="108%" height="116%">
+        <feDropShadow dx="0" dy="1" stdDeviation="1.5" floodOpacity="0.07" />
+      </filter>
+    </defs>
   )
 }
 
-function FlowNodeBox({ node }: { node: FlowNode }) {
-  if (node.type === 'decision') {
-    return (
-      <div
-        className="bg-amber-50 border-2 border-amber-300 rounded-lg px-4 py-2.5 text-xs font-medium text-amber-800 text-center my-1"
-        style={{ minWidth: '120px' }}
-      >
-        <span className="text-amber-400 mr-1">&#x25C7;</span>
-        {node.label}
-      </div>
-    )
-  }
-  if (node.type === 'terminal') {
-    return (
-      <div className="bg-gray-100 border border-gray-200 rounded-full px-5 py-1.5 text-xs font-medium text-gray-500 text-center my-1">
-        {node.label}
-      </div>
-    )
-  }
+function TextBlock({ lines, x, y, fill, fontSize }: {
+  lines: string[]
+  x: number
+  y: number
+  fill: string
+  fontSize: number
+}) {
+  const startY = y - ((lines.length - 1) * LINE_HEIGHT) / 2
   return (
-    <div className="bg-white border border-gray-200 rounded-sm px-4 py-2 text-xs font-medium text-[var(--black)] text-center shadow-sm my-1 max-w-[220px]">
-      {node.label}
-    </div>
+    <text
+      x={x}
+      textAnchor="middle"
+      fill={fill}
+      style={{ fontSize: `${fontSize}px`, fontFamily: 'var(--font-outfit, system-ui, sans-serif)', fontWeight: 500 }}
+    >
+      {lines.map((line, i) => (
+        <tspan key={i} x={x} y={startY + i * LINE_HEIGHT}>
+          {line}
+        </tspan>
+      ))}
+    </text>
   )
 }
 
-function RenderLayoutItems({ items, nodeMap }: { items: LayoutItem[]; nodeMap: Map<string, FlowNode> }) {
+function ActionNodeSvg({ n }: { n: LayoutNode }) {
+  const lines = wrapText(n.node.label, n.width - 24)
   return (
-    <>
-      {items.map((item, i) => {
-        if (item.type === 'node') {
-          const node = nodeMap.get(item.nodeId)
-          if (!node) return null
-          return <FlowNodeBox key={`node-${item.nodeId}`} node={node} />
-        }
-        if (item.type === 'arrow') {
-          return <FlowArrow key={`arrow-${i}`} label={item.label} />
-        }
-        if (item.type === 'branch') {
-          return (
-            <div key={`branch-${item.decision}-${i}`} className="flex flex-col items-center w-full">
-              <div className="w-px h-3 bg-gray-300" />
-              <div className="flex items-start justify-center gap-6 w-full">
-                {item.branches.map((branch, j) => (
-                  <div key={j} className="flex flex-col items-center min-w-[100px]">
-                    <div className="flex flex-col items-center">
-                      {branch.label && (
-                        <span className="text-[10px] font-medium text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mb-1">
-                          {branch.label}
-                        </span>
-                      )}
-                      <div className="w-0 h-0 border-l-[4px] border-r-[4px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-300" />
-                    </div>
-                    <div className="flex flex-col items-center">
-                      <RenderLayoutItems items={branch.items} nodeMap={nodeMap} />
-                    </div>
-                  </div>
-                ))}
-              </div>
-              {item.mergeId && (
-                <div className="w-px h-3 bg-gray-300" />
-              )}
-            </div>
-          )
-        }
-        return null
-      })}
-    </>
+    <g>
+      <rect
+        x={n.x - n.width / 2}
+        y={n.y - n.height / 2}
+        width={n.width}
+        height={n.height}
+        rx={3}
+        fill="white"
+        stroke="#E5E7EB"
+        strokeWidth={1}
+        filter="url(#fc-shadow)"
+      />
+      <TextBlock lines={lines} x={n.x} y={n.y} fill="#0A0A0A" fontSize={FONT_SIZE} />
+    </g>
+  )
+}
+
+function DecisionNodeSvg({ n }: { n: LayoutNode }) {
+  const half = DIAMOND_SIZE / 2
+  const points = `${n.x},${n.y - half} ${n.x + half},${n.y} ${n.x},${n.y + half} ${n.x - half},${n.y}`
+  const lines = wrapText(n.node.label, DIAMOND_SIZE - 16)
+  return (
+    <g>
+      <polygon
+        points={points}
+        fill="#FFFBEB"
+        stroke="#FCD34D"
+        strokeWidth={2}
+      />
+      <TextBlock lines={lines} x={n.x} y={n.y} fill="#92400E" fontSize={10} />
+    </g>
+  )
+}
+
+function TerminalNodeSvg({ n }: { n: LayoutNode }) {
+  return (
+    <g>
+      <rect
+        x={n.x - n.width / 2}
+        y={n.y - n.height / 2}
+        width={n.width}
+        height={n.height}
+        rx={n.height / 2}
+        fill="#F3F4F6"
+        stroke="#E5E7EB"
+        strokeWidth={1}
+      />
+      <TextBlock lines={[n.node.label]} x={n.x} y={n.y} fill="#6B7280" fontSize={FONT_SIZE} />
+    </g>
+  )
+}
+
+function EdgeSvg({ from, to, label }: { from: LayoutNode; to: LayoutNode; label?: string }) {
+  const path = computeEdgePath(from, to)
+
+  // Label position at midpoint of the bezier
+  const midX = (from.x + to.x) / 2
+  const midY = (from.y + from.height / 2 + to.y - to.height / 2) / 2
+
+  return (
+    <g>
+      <path
+        d={path}
+        fill="none"
+        stroke="#D1D5DB"
+        strokeWidth={1.5}
+        markerEnd="url(#fc-arrowhead)"
+      />
+      {label && (
+        <g>
+          <rect
+            x={midX - (label.length * CHAR_WIDTH) / 2 - 6}
+            y={midY - 9}
+            width={label.length * CHAR_WIDTH + 12}
+            height={18}
+            rx={9}
+            fill="#F5F3FF"
+          />
+          <text
+            x={midX}
+            y={midY + 1}
+            textAnchor="middle"
+            dominantBaseline="central"
+            fill="#7C3AED"
+            style={{ fontSize: '10px', fontFamily: 'var(--font-outfit, system-ui, sans-serif)', fontWeight: 500 }}
+          >
+            {label}
+          </text>
+        </g>
+      )}
+    </g>
   )
 }
 
@@ -292,27 +515,34 @@ export function FlowchartDiagram({ mermaid, className }: FlowchartDiagramProps)
     )
   }
 
-  const outgoing = new Map<string, FlowEdge[]>()
-  const incoming = new Map<string, FlowEdge[]>()
-  for (const edge of edges) {
-    if (!outgoing.has(edge.from)) outgoing.set(edge.from, [])
-    outgoing.get(edge.from)!.push(edge)
-    if (!incoming.has(edge.to)) incoming.set(edge.to, [])
-    incoming.get(edge.to)!.push(edge)
-  }
-
-  const nodeMap = new Map(nodes.map(n => [n.id, n]))
-
-  const roots = nodes.filter(n => !incoming.has(n.id) || incoming.get(n.id)!.length === 0)
-  const startId = roots.length > 0 ? roots[0].id : nodes[0].id
-
-  const visited = new Set<string>()
-  const layout = buildLayout(startId, outgoing, incoming, nodeMap, visited)
+  const { layoutNodes, svgWidth, svgHeight } = computeLayout(nodes, edges)
+  const nodeById = new Map(layoutNodes.map(n => [n.id, n]))
 
   return (
     <div className={className}>
-      <div className="flex flex-col items-center py-2">
-        <RenderLayoutItems items={layout} nodeMap={nodeMap} />
+      <div className="overflow-x-auto">
+        <svg
+          width={svgWidth}
+          height={svgHeight}
+          viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+          xmlns="http://www.w3.org/2000/svg"
+          className="block"
+        >
+          <SvgDefs />
+          {/* Edges behind nodes */}
+          {edges.map((e, i) => {
+            const fromNode = nodeById.get(e.from)
+            const toNode = nodeById.get(e.to)
+            if (!fromNode || !toNode) return null
+            return <EdgeSvg key={`e-${i}`} from={fromNode} to={toNode} label={e.label} />
+          })}
+          {/* Nodes on top */}
+          {layoutNodes.map(n => {
+            if (n.node.type === 'decision') return <DecisionNodeSvg key={n.id} n={n} />
+            if (n.node.type === 'terminal') return <TerminalNodeSvg key={n.id} n={n} />
+            return <ActionNodeSvg key={n.id} n={n} />
+          })}
+        </svg>
       </div>
     </div>
   )