What it is

Graph Sparrow is an interactive graph editor and visualizer: build networks of nodes and edges, let a force-directed physics simulation lay them out, group them by category, and share them as JSON. Connectors are drawn by the jQuery Arrows plugin and follow the nodes as you drag them.

How it works

• Force-directed layout — the Springy physics engine simulates springs (edges) and repulsion (nodes); Stiffness, Repulsion, and Damping sliders tune the feel, and 🎯 Re-layout runs 400 deterministic ticks.
• Live SVG arrows — colored, labeled connectors updated at 60 FPS and instantly during drags.
• Category system — nodes and edges carry color classes; the right panel toggles entire categories with one click (live count badges).
• JSON serialization — export/import the whole graph for sharing or backup.
• Node lifecycle — hide/show moves nodes to a hidden pool; removing a node cascades to its incident edges.
• Cockpit UI — 100vh locked layout with system-aware theme, no page scrollbars.

How to use this demo

• Drag nodes — arrows follow in real time.
• 🎯 Re-layout — re-run the physics simulation; tune the sliders first for different spreads.
• ➕ Add Node / 🔗 Add Edge — extend the graph through the left sidebar forms.
• 👁️ Node / Edge Categories — the right panel hides or shows whole categories.
• ⬇ Export / ⬆ Import — save the graph as JSON and reload it later.
• 🌙/☀️ Theme — follows your system preference by default.