JavaScript library for interactive network diagrams

Other Questions JavaScript
1

Hey everyone,

I’m working on a project where I need to show small network diagrams on a webpage. These diagrams have arrows pointing between the nodes. I’m looking for a JavaScript library that can help me create these diagrams dynamically.

My requirements:

  • Works with directed graphs (with arrows)
  • Can handle about 5-10 nodes max
  • Lets users move nodes around by clicking and dragging
  • Easy to use with jQuery

I’ve tried looking for charting libraries, but they’re not quite what I need. Any suggestions for a good library that fits these needs? Thanks in advance for your help!

// Example of what I'm trying to do
const graph = {
  nodes: ['A', 'B', 'C', 'D'],
  edges: [
    { from: 'A', to: 'B' },
    { from: 'B', to: 'C' },
    { from: 'C', to: 'D' },
    { from: 'D', to: 'A' }
  ]
};

// Looking for a library with an API like this:
renderGraph(graph, '#graph-container');

Let me know if you need any more info!

2

I’ve been using vis.js Network for similar projects, and it’s been a great fit. It handles directed graphs beautifully and works well with small networks like you’re describing.

One thing I really appreciate about vis.js is how intuitive it is to set up. You can easily create nodes and edges from your existing data structure. The library also supports dragging nodes out of the box, which saves a lot of time.

While it doesn’t require jQuery, I’ve found it plays nicely with it when needed. Here’s a quick example of how you might set it up:

const nodes = new vis.DataSet([
  {id: 'A', label: 'A'},
  {id: 'B', label: 'B'},
  {id: 'C', label: 'C'},
  {id: 'D', label: 'D'}
]);

const edges = new vis.DataSet([
  {from: 'A', to: 'B', arrows: 'to'},
  {from: 'B', to: 'C', arrows: 'to'},
  {from: 'C', to: 'D', arrows: 'to'},
  {from: 'D', to: 'A', arrows: 'to'}
]);

const container = document.getElementById('graph-container');
const data = { nodes: nodes, edges: edges };
const options = {};
const network = new vis.Network(container, data, options);

The documentation is solid, and there’s a good community around it if you run into any issues. Hope this helps!

3

hey check out d3.js! its awesome for network diagrams n stuff. i used it for a project last month and it was super easy to set up. you can make arrows between nodes and drag em around. heres a quick example:

const svg = d3.select('#graph-container').append('svg')
const simulation = d3.forceSimulation(nodes)
  .force('link', d3.forceLink(links).id(d => d.id))
  .force('charge', d3.forceManyBody())
  .force('center', d3.forceCenter())

its pretty flexible too. lmk if u need help!

4

I’ve had success using Cytoscape.js for similar network diagram projects. It’s a powerful library that checks all your boxes - it handles directed graphs, works well with small to medium-sized networks, and supports interactive features like drag-and-drop node positioning.

While it doesn’t require jQuery, Cytoscape.js integrates smoothly with it if needed. The API is intuitive, allowing you to create graphs from JSON data structures similar to your example.

Here’s a basic setup to get you started:

const cy = cytoscape({
  container: document.getElementById('graph-container'),
  elements: [
    { data: { id: 'A' } },
    { data: { id: 'B' } },
    { data: { id: 'C' } },
    { data: { id: 'D' } },
    { data: { source: 'A', target: 'B' } },
    { data: { source: 'B', target: 'C' } },
    { data: { source: 'C', target: 'D' } },
    { data: { source: 'D', target: 'A' } }
  ],
  style: [
    {
      selector: 'node',
      style: { 'label': 'data(id)' }
    },
    {
      selector: 'edge',
      style: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' }
    }
  ]
});

This creates a basic circular graph with arrows. Cytoscape.js offers extensive customization options for layout, styling, and interactions. The documentation is comprehensive, making it easy to adapt to your specific needs.