graphers.dev

                    const graph = new ForceGraph();
                    
graph.addNode({ id: 'vertex-1', label: 'Data' });
                    
graph.addEdge({ source: 'vertex-1', target: 'vertex-2' });
                    
graph.render();

Hierarchical Structures

Tree graphs for organizational hierarchies, file systems, and taxonomies. Perfect for exploring parent-child relationships and nested data.

Network Analysis

Force-directed networks for social graphs, knowledge bases, and complex relationships. Watch nodes cluster and organize in real-time.

Flow & Connectivity

Directed graphs for workflows, data pipelines, and state machines. Visualize the movement of data through your systems.

Interactive Playground

Edit code on the left to see live visualization on the right

graph-definition.js

// Define a simple network
const nodes = [
  { id: 'a', x: 100, y: 100 },
  { id: 'b', x: 300, y: 100 },
  { id: 'c', x: 200, y: 250 }
];

const edges = [
  { source: 'a', target: 'b' },
  { source: 'b', target: 'c' },
  { source: 'c', target: 'a' }
];

module.exports = { nodes, edges };