Flow Anchor Connection

/flow-anchor-connection

When to Use

• Build interactive workflow editor for yamtam agent pipeline configuration
• Render agent-to-agent connections with drag-and-drop in a web UI
• Visualize live data flow between skills in a browser-based dashboard
• Generate connection diagrams from agent state JSON

Do NOT use for

• Static diagrams without user interaction (use [[mermaid-diagram-generation]])
• Server-side rendering without DOM (jsPlumb requires browser environment)

jsPlumb setup (vanilla JS)

import { newInstance, AnchorLocations, ArrowOverlay } from '@jsplumb/browser-ui'

const instance = newInstance({
  container: document.getElementById('canvas'),
})

// Add nodes
const nodeA = document.getElementById('skill-proxy')
const nodeB = document.getElementById('skill-sandbox')

// Connect with an arrow
instance.connect({
  source: nodeA,
  target: nodeB,
  anchors:    [AnchorLocations.Bottom, AnchorLocations.Top],
  connector:  'Flowchart',
  overlays:   [{ type: 'Arrow', options: { width: 10, length: 10 } }],
  paintStyle: { stroke: '#2563eb', strokeWidth: 2 },
})

// Make node draggable
instance.manage(nodeA)
instance.manage(nodeB)

Dynamic pipeline from JSON state

function renderPipeline(stages: { id: string; label: string }[]) {
  const canvas = document.getElementById('pipeline-canvas')!

  // Create DOM nodes
  stages.forEach(({ id, label }, i) => {
    const el = document.createElement('div')
    el.id          = id
    el.textContent = label
    el.className   = 'pipeline-node'
    el.style.left  = `${50 + i * 200}px`
    el.style.top   = '100px'
    canvas.appendChild(el)
    instance.manage(el)
  })

  // Connect sequentially
  stages.forEach(({ id }, i) => {
    if (i === 0) return
    instance.connect({
      source: stages[i - 1].id,
      target: id,
      connector: 'Straight',
    })
  })
}

renderPipeline([
  { id: 'proxy',   label: 'tool-proxy.sh' },
  { id: 'sandbox', label: 'sandbox-exec.sh' },
  { id: 'audit',   label: 'audit-log' },
])

Export connections as JSON

function exportConnections(): object[] {
  return instance.getConnections().map(conn => ({
    source: conn.source.id,
    target: conn.target.id,
    type:   conn.connector?.type,
  }))
}

Anti-Fake-Pass Checklist

❌ jsPlumb requires browser DOM — no Node.js/server-side rendering
❌ manage() not called → nodes not draggable even if connect() works
❌ Container element not positioned (relative/absolute) → connections render at (0,0)
❌ repaintEverything() not called after layout change → connectors don't follow nodes
❌ jsPlumb Community vs Toolkit: very different APIs — don't confuse
❌ SSR frameworks (Next.js) → import jsPlumb only in useEffect, not at module level