What it is

jQuery Arrows is a jQuery plugin that draws stylable SVG connector arrows between HTML elements — curved or straight, with optional text labels — and keeps them attached as elements move, resize, or scroll. It's ideal for relationship diagrams, graph editors, and interactive visualizations.

How it works

• SVG canvas per arrow — each connector is its own absolutely-positioned SVG, so arrows stay crisp at any zoom (no bitmap redraw).
• Precise boundary anchoring — a parametric ray-box intersection computes the exact point where each arrow meets a node border, so arrowheads never float or overshoot.
• Curved or straight — quadratic Bézier paths with a configurable curvature value (0 = straight line).
• Labels — names ride the path midpoint via <textPath>.
• Live tracking — a 60 FPS update loop plus a direct jQuery UI drag hook redraws geometry the instant nodes move.
• Multi-select — pass collections of sources and targets to connect every pair (cross product).
• UMD + TypeScript — works via script tag, AMD, or CommonJS, with jquery.arrows.d.ts included.

How to use this demo

• Drag any node — arrows follow in real time.
• 〰️ Toggle Curvature — switch all edges between straight lines and arched Béziers.
• + Add Node — spawns a new service linked to the first existing node.
• ✕ Clear All — wipes the canvas.
• 🌙/☀️ Theme — follows your system preference by default.

Quick API

$().arrows({
  within: "#graph-area",
  id: "e-1-2",
  class: "edge-blue",
  name: "HTTPS /api",
  from: "#node-a",
  to: "#node-b",
  curvature: 0.4
});