← All libraries

Cytoscape.js

JavaScript
↗ Official site

Drawing & diagram tools

Graph theory library for visualizing networks and relationships.

What it does

Cytoscape.js renders network graphs — think org charts, knowledge graphs, social networks. It handles layout algorithms automatically.

When to use it

Use this when you need to visualize complex networks or relationship data.

Real example

You want to show a knowledge graph of how topics in your course relate to each other. Prompt: 'Use Cytoscape.js to render a graph where each node is a course topic and edges represent prerequisite relationships. Use the cose layout algorithm and color nodes by their category.'

Good to know

Best for data-driven graphs. For interactive editors, ReactFlow is friendlier.

Alternatives

D3.js ReactFlow/XYFlow

Install

$ npm install cytoscape

Use cases

network graphknowledge graphorg chartdata visualization

Language

JavaScript

Category

Drawing & diagram tools

More in Drawing & diagram tools

Other tools in the same category

JS Konva.js

Canvas library for building interactive drawing and diagramming apps.

diagram editorimage editorcanvas app
JS Fabric.js

Powerful canvas library for image manipulation and graphic design tools.

image editordesign toolcanvas
JS tldraw

Ready-made infinite canvas SDK for building whiteboard apps.

whiteboardinfinite canvasdiagram
JS ReactFlow / XYFlow

Build node-based editors, flowcharts, and pipeline UIs.

node graphworkflow builderflowchart
JS Panzoom

Add pan and zoom to any element — images, SVGs, canvases.

pan and zoomimage viewermap interface