JavaScript Graph Node Based UI, GUI and Libraries

Renderers

• baklavajs – Graph/node editor for VueJs
• beautiful-react-diagrams – React components and hooks to build diagrams
• butterfly – Renderer for interactive diagrams and flowcharts
• cytoscape.js – Canvas based renderer with utilities and algorithms
• diagram-maker – Interactive editor for any graph-like data
• Flowy – Flowchart library
• flow-builder – React-based renderer for workflows and process diagrams
• GoJS – Diagramming library with a focus on customization and interactivity
• jointjs – JavaScript diagramming library
• jsplumb – Open source project written in Typescript that gives you the tools you need to visually connect DOM elements
• kedro-viz – Visualises Kedro data and machine-learning pipelines
• litegraph.js – A graph node engine and editor
• mermaid – Static diagrams for documentation
• ngx-graph – Graph visualization library for Angular
• nice-dag – Lightweight javascript library, which is used to present a DAG diagram
• nodl – Framework for computational node graphs
• react-dag-editor – React component to create graphic user interface
• react-digraph – A library for creating directed graph editors
• React Flow – React library for rendering node-based UIs
• reaflow – React library for building workflow editors
• rete – Framework for visual programming and node editors
• sigma.js – Visualization framework for large graphs
• Svelte Flow – Svelte library for rendering node-based UIs
• vue-flow – Flowchart component for Vue 3
• X6 – Diagramming library that uses SVG and HTML

Layouting

• elkjs – A port of the Java ELK layouting library to Javascript
• d3-hierarchy – Helpers and algorithms for working with hierarchical graphs
• d3-force – Library for creating interactive force directed graphs
• d3-dag – D3 plugin to work with DAG data structures
• dagrejs – Directed graph layout algorithms for Javascript
• graphology-layout – Layout algorithms
• springy – Force directed graph layouts

Graph Utilities

• behave-graph – Extensible behaviour-graph execution engine
  • behave-flow – UI for behave-graph using react-flow
• graphlib – Helpers for directed graphs in JS
• graphology – Utilities and algorithms for all kinds of graphs

Misc

• flume – Business logic graph editor
• mermaid – Flowchart and sequence diagrams generation
• pintora – Text-to-diagrams library
• quick-erd – Generate entity-relationship diagrams (ERD) from text, and reverse engineer ERD text from live database