← Back to blog

jQuery Arrows & Graph Sparrow: drawing graphs in the browser

· Web Projects · Open Source

During my MSc at KTH/UPM (a double degree, with the thesis carried out at Ericsson Research), I spent a lot of time thinking about graphs — knowledge graphs, IoT data flows, digital-twin architectures. And every time I wanted to show one, I hit the same wall: browser diagramming libraries were either heavy all-in-one solutions or canvas-based, which turned into pixel soup when zoomed in.

So I built my own pair of tools: jQuery Arrows, a tiny reusable plugin that draws stylable, curved SVG connectors between HTML elements, and Graph Sparrow, a full interactive graph editor built on top of it. Both are open source (MIT), and both have live demos on GitHub Pages — no setup, just open the page and drag a node.

📑 jQuery Arrows — SVG connectors that follow your nodes

jQuery Arrows is a jQuery plugin for adding stylable, curved SVG connector arrows with text tags between HTML elements. It started as the missing piece for visualizing relationships between elements and plotting graphs — without pulling in a full diagramming framework.

  • SVG-based, not canvas: crisp, resolution-independent connectors — zoom in as much as you like.
  • Curved or straight: quadratic Bézier arches with a configurable curvature (0 = straight line).
  • Text labels: names rendered along the path midpoint with SVG <textPath>.
  • Live tracking: arrows follow elements on drag, resize, and scroll — a 60 FPS loop plus an instant jQuery UI drag hook.
  • Precise boundary anchoring: parametric ray-box intersection places arrowheads exactly on node borders — no gaps, no overshoot, robust to vertical/horizontal alignment.
  • Multi-select: connect collections of sources to collections of targets (cross product).
  • Fully stylable: color, dash, and width via plain CSS classes.
  • Lifecycle management: update/remove commands plus automatic teardown when a node is removed. UMD build with TypeScript definitions.
jQuery Arrows demo in light theme showing a microservices architecture drawn with labeled SVG connectors

Quick start:

$("#node-1").arrows({
  within: "#svg-arrows",   // container (default: body)
  id: "arrow-1-2",         // unique id
  class: "blue-dashed-edge", // arrow CSS class for styling
  name: "i am arrow-1-2",  // optional text label
  from: "#node-1",         // source (selector, node, or jQuery object)
  to: "#node-2",           // target
  curvature: 0.5,          // 0 = straight, >0 = arched Bézier
});

📜 Graph Sparrow — an interactive graph editor on top

Graph Sparrow takes the plugin one step further: a full interactive graph visualization tool with built-in force-directed layout (via Springy), draggable nodes, category-based hide/show toggles, and JSON graph import/export — with jQuery Arrows drawing the live-following SVG connectors.

  • Force-directed physics: spring stiffness, repulsion, and damping controls with deterministic synchronous layout ticks.
  • Live SVG arrows: colored, labeled, dashed connectors that follow nodes while dragging (50 ms global update loop).
  • Category toggles: hide/show entire node and edge categories with one click.
  • Graph serialization: export/import graphs as JSON, round-trip safe.
  • Dynamic editing: add nodes and edges through the sidebar forms with duplicate guards; removing a node cascades to its incident edges; hide/show moves nodes to a hidden pool.
  • Cockpit UI: 100 vh locked layout, dark/light themes, no page scrollbars.

Out of the box it ships with six node categories (green, blue, red, cyan, amber, purple) and five edge styles (blue-dashed, purple, orange, green, rose), all overridable in plain CSS — and a public API (addNode, addEdge, exportGraph, importGraph, reloadGraphLayout) for embedding it anywhere.

Graph Sparrow in light theme showing an IoT digital-twin graph with force-directed layout and sidebar controls

The screenshots above show the default IoT / digital-twin graph that loads on startup — sensor nodes feeding an edge gateway, a cloud broker, and a digital twin — and, after some editing, a drone-and-gateway graph with the sidebar forms, category toggles, and physics sliders in action.

Graph Sparrow with an edited drone and IoT graph, category toggles, and physics sliders

🎉 What's new

The v2.1.0 release and the updates since keep adding polish to both projects:

  • System theme by default: no more hardcoded dark theme — a tiny script reads localStorage first and otherwise follows prefers-color-scheme, so the page matches the OS instantly with no flash. If the OS theme changes live, the page follows — until you manually override, which persists.
  • Smarter Clear All: it now wipes the whole canvas — nodes, arrows, and bookkeeping — and Add Node correctly links to the first existing node (or creates a standalone one on an empty canvas).
  • 📖 Guide button + modal: both demos now ship a built-in guide — what it is, how it works, how to use — right in the navbar, so visitors can drive the tools without reading the README first.
  • jQuery Arrows — labels always readable: arrow labels are placed at the path midpoint with clamped rotation, so they never render upside down on leftward arrows.
  • Graph Sparrow — per-node controls: every node gets a visible ✕ remove button and an SVG eye/eye-slash hide toggle (no emojis, no icon fonts), wired via event delegation.
  • Live demos on GitHub Pages with badges in both READMEs — zero-setup interactive playgrounds.
  • Test suites green: 17/17 (jQuery Arrows) and 13/13 (Graph Sparrow) unit tests.

GitHub · jquery-arrows GitHub · graph-sparrow Live Demo · jquery-arrows Live Demo · graph-sparrow jQuery · SVG · Open Source