Cytoscape.js — Graph Theory Visualization and Analysis Library

Introduction

Cytoscape.js is a graph theory library that combines visualization with analysis. It renders nodes and edges as an interactive network diagram and provides algorithms for traversal, pathfinding, clustering, and centrality calculations directly in the browser.

What Cytoscape.js Does

• Renders directed and undirected graphs with customizable node and edge styles
• Provides built-in layout algorithms (force-directed, hierarchical, circular, grid, concentric)
• Runs graph analysis algorithms (BFS, DFS, Dijkstra, A*, PageRank, betweenness centrality)
• Supports user interaction: panning, zooming, selecting, dragging nodes, and tooltips
• Handles compound (nested) nodes for representing hierarchical groupings

Architecture Overview

Cytoscape.js maintains a graph model as a collection of elements (nodes and edges) with associated data and style. A selector engine (CSS-like syntax) filters elements for styling and querying. The renderer draws to a Canvas element using a configurable layer stack. Layout algorithms run asynchronously and update element positions. An extension system allows third-party layouts, renderers, and analysis functions.

Self-Hosting & Configuration

• Install via npm or load from CDN as a UMD bundle
• Pass a container DOM element and initial elements array to cytoscape()
• Define visual styles using a CSS-inspired stylesheet syntax with selectors
• Register extensions (extra layouts, export plugins) with cytoscape.use()
• Runs headless (no container) for server-side graph computation in Node.js

Key Features

• CSS-like selector engine for querying and styling elements declaratively
• 20+ built-in graph algorithms available on any collection of elements
• Compound nodes enable hierarchical graph visualization with expand/collapse
• Extension ecosystem: elk layout, dagre, cola, cose-bilkent, and more
• Headless mode for pure graph computation without rendering overhead

Comparison with Similar Tools

• D3.js force layout — lower-level; requires manual SVG bindings and no built-in graph algorithms
• vis.js Network — similar scope but less active maintenance and fewer layout options
• Sigma.js — WebGL-based large graph rendering; fewer built-in analysis algorithms
• Neo4j Browser — database-specific visualization; Cytoscape.js is a general-purpose library
• Graphviz — static layout generation; Cytoscape.js is interactive and browser-native

FAQ

Q: How many nodes can Cytoscape.js handle? A: Thousands of elements render smoothly. For 100K+ nodes, consider WebGL renderers or server-side layout.

Q: Can I export the graph as an image? A: Yes. Use cy.png() or cy.jpg() to export the current view as a base64 data URL.

Q: Does it support directed edges with arrows? A: Yes. Style edges with target-arrow-shape and source-arrow-shape properties.

Q: Can I run it in Node.js? A: Yes. Create a headless instance without a container for programmatic graph operations.

Sources

• https://github.com/cytoscape/cytoscape.js
• https://js.cytoscape.org/