@graphty/cytoscape-extensions

Graph layouts and graph algorithms for Cytoscape.js 3.x, added with one cytoscape.use() call: 16 layouts registered as graphty-<name> (ForceAtlas2, Fruchterman-Reingold, Kamada-Kawai, radial, shell and more), 63 algorithm methods on every collection and on the core named graphty<Name> (PageRank, betweenness, Louvain, Leiden, Dijkstra, max flow, link prediction and more), seeded graph generators, sample datasets, and import and export of GraphML, GEXF, GML, DOT, Pajek, CSV, JSON, Neo4j and CX2 files. The force simulations and 17 of the algorithms run on WebGPU when the browser or Node has a usable device, with nothing extra to import.

• Documentation: graphty.app/docs/cytoscape-extensions
• Demo: every layout and algorithm in a live graph

Install

npm install cytoscape @graphty/cytoscape-extensions @graphty/algorithms @graphty/layout @graphty/graph-format

@graphty/algorithms, @graphty/layout and @graphty/graph-format are peer dependencies. Cytoscape.js 3.31.0 or later is required.

Quick start

import cytoscape from "cytoscape";
import graphtyCytoscape from "@graphty/cytoscape-extensions";

cytoscape.use(graphtyCytoscape);

const cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{ selector: "node", style: { width: "mapData(rank, 0, 0.035, 8, 48)" } }],
});

async function draw() {
    await cy.graphtyGenerate("barabasi-albert", { n: 300, m: 2, seed: 1 }); // or cy.add() your own elements
    cy.elements().graphtyPageRank({ field: "rank" }); // writes data("rank"), which the style maps to a width
    cy.layout({ name: "graphty-forceatlas2", animate: true }).run();
}

draw();

Loading

• With npm and a bundler (Vite, webpack, esbuild, Rollup), import the package as above. It is ES modules only; the WebGPU code, the generators and the file formats load on first use, and every dataset downloads from graphty.app when asked for.
• With no build step, import the ES module build from a CDN: https://cdn.jsdelivr.net/npm/@graphty/cytoscape-extensions/dist/cdn/cytoscape-extensions.js.
• With a classic <script src> tag, load dist/cytoscape-extensions.bundle.js after Cytoscape. It registers itself, so there is no use() call.

Installation covers each of these, CommonJS, TypeScript and the supported versions.

Documentation

• Getting started
• Layouts
• Algorithms
• WebGPU
• Graphs in and out
• Migrating from Cytoscape's built-ins
• Troubleshooting
• Reference: layouts, algorithms, generators, datasets and formats

License

MIT. The sample datasets are their authors' work under their own licenses, listed in the dataset reference.