Open-source JavaScript libraries for rendering interactive diagrams, flowcharts, and node-based graphs in web applications.
This project is a React-based framework for constructing interactive, node-based visual interfaces. It provides a platform for building canvases where users define, connect, and organize logical processes, data pipelines, or complex workflows through a graphical interface. By utilizing a modular component architecture, it enables the development of low-code environments, visual programming tools, and interactive diagramming applications. The framework distinguishes itself through a declarative approach where state changes automatically synchronize with the visual representation of nodes and e
This library provides a comprehensive React-based framework for building interactive, node-based diagrams and flowcharts, featuring built-in support for SVG rendering, custom styling, and automated layout algorithms.
react-force-graph is a React component for rendering interactive 2D and 3D network visualizations using a force-directed layout engine. It functions as an interactive data visualization library that employs D3-force simulations to manage node physics and relationship positioning. The library includes a 3D visualization tool that utilizes ThreeJS to render complex nodes and links within an immersive space. It provides programmatic control over zooming, panning, and viewport navigation, alongside a coordinate-to-object picking mechanism for handling user interactions like clicks, hovers, and dr
This library provides a robust React-based solution for rendering interactive, node-based network graphs with support for custom styling, physics-based layout algorithms, and user manipulation.
Cytoscape.js is a JavaScript library designed for rendering interactive node-link diagrams and analyzing complex network structures directly within a web browser. It functions as a comprehensive framework for building responsive graph interfaces, providing the tools necessary to visualize relational datasets and manage hierarchical data models. The library distinguishes itself through a modular architecture that supports custom layout algorithms and rendering styles, allowing for the integration of physics-based engines to organize complex network structures automatically. It utilizes an even
Cytoscape.js is a comprehensive library specifically built for rendering and manipulating interactive node-link diagrams, offering robust support for custom styling, automated layout algorithms, and complex graph analysis.
mxgraph is a client-side graph visualization tool and JavaScript diagramming library. It functions as an SVG-based drawing framework used to create and render interactive diagrams directly within a web browser. The library enables the development of custom diagramming tools, such as network maps and flowcharts, by providing the means to draw and manipulate visual data structures. It focuses on client-side data visualization, allowing for the representation of complex node and edge relationships without requiring server-side rendering.
This library provides a comprehensive framework for rendering interactive, node-based diagrams and flowcharts in the browser using SVG, fully supporting custom styling, layout algorithms, and programmatic manipulation.
GulfOfMexico is a framework for building interactive, node-based visual programming environments within web browsers. It provides the necessary components to construct directed graph editors where users define application logic and data processing pipelines by connecting visual nodes on a coordinate-based canvas. The library enables the creation of drag-and-drop interfaces that synchronize visual representations with underlying functional data flows. By mapping input and output ports to specific behaviors, developers can build environments that allow for the construction of complex workflows
This library provides a specialized framework for building interactive, node-based visual programming environments and graph editors, making it a suitable tool for rendering and manipulating complex flowcharts and diagrams in the browser.
jsplumb is a JavaScript diagramming library and visual connectivity engine used to draw draggable connections between HTML elements. It functions as an SVG connector framework that renders dynamic links to create visual connectivity maps and flowcharts. The library provides tools for building node-based user interfaces, interactive workflow mapping, and visual diagramming. It enables the creation of dynamic relationship visualizations where users can link steps or pieces of information together on a web page.
jsPlumb is a comprehensive library specifically designed for creating interactive, node-based diagrams and flowcharts by managing connections between DOM elements using SVG.
LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business process diagrams. It serves as a customizable diagramming engine for rendering business process models, entity relationship diagrams, and unified modeling language charts. The system is characterized by a plugin-based architecture that allows developers to define specialized graphical elements and register pluggable modules. A distinctive feature is its overlay system, which positions standard HTML components on top of the SVG canvas to create interactive menus and control pan
LogicFlow is a TypeScript-based framework specifically designed for building interactive, node-based diagramming and flowchart editors, offering comprehensive support for custom styling, SVG rendering, and graph manipulation.
Rete is a framework for building interactive, node-based visual interfaces and dataflow programming environments. It provides a core engine that processes directed graphs, allowing developers to define modular logic where nodes represent operations and connections represent the flow of data or control. By decoupling the graph logic from the user interface, the framework enables the creation of custom visual editors that can be integrated into various frontend component libraries. The project distinguishes itself through a highly extensible, signal-driven architecture that supports complex req
Rete is a comprehensive TypeScript framework specifically designed for building interactive, node-based visual editors and dataflow graphs, providing all the necessary tools for custom styling, layout, and programmatic manipulation.
Simple flow library 🖥️🖱️
This library provides a canvas-based environment for building interactive node-based flowcharts and visual data-flow editors, offering the core functionality needed to render and manipulate custom node graphs in the browser.
X6 is a JavaScript diagramming library and SVG graph rendering engine used to build interactive flowcharts, mind maps, and visual workflow editors. It provides a framework for defining customizable node and edge behaviors, utilizing a hybrid rendering approach that combines SVG and HTML. The library decouples the visual graph representation from underlying business logic and data structures through a dedicated state management system. It allows for extensive extensibility via a registration mechanism for custom nodes, edges, and canvas tools. The toolkit includes capabilities for automatic g
X6 is a comprehensive TypeScript-based diagramming library that provides robust support for node-based graph rendering, interactive manipulation, custom styling, and automated layout algorithms, making it a perfect fit for your requirements.
GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a
GoJS is a comprehensive, data-driven library specifically designed for building interactive node-based diagrams and flowcharts, offering robust support for custom styling, complex layout algorithms, and TypeScript integration.
litegraph.js is a JavaScript dataflow framework and visual node graph engine used to define programmable logic and data flow. It provides a node-based visual programming tool for designing complex logic through connected functional blocks. The library allows for the creation of hierarchical logic by nesting multiple nodes into recursive subgraphs. It also supports the development of custom node types with unique inputs and outputs, as well as custom widgets and live views that can hide the underlying graph structure to present a visual interface. The engine enables the execution of logic gra
This library provides a robust engine for rendering and manipulating interactive node-based graphs using Canvas, making it a strong choice for building visual programming interfaces and complex dataflow diagrams.
This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and ASCII text. It provides a type-safe diagram editor and a pipeline for transforming diagram source code into scalable vector graphics or plain text visuals. The system features a dedicated theme engine that maps editor colors and CSS variables to diagram elements. It enables dynamic diagram theming through CSS custom properties for real-time color updates and supports index-based styling to override the appearance of specific nodes and edges. The tool covers a range of visualiz
This library provides a type-safe way to render and theme diagrams from Mermaid syntax, offering the requested SVG support and node styling, though it focuses on syntax-driven generation rather than a free-form interactive node-based graph editor.
This project is a client-side rendering engine that transforms declarative, text-based syntax into visual diagrams directly within the browser. By utilizing a domain-specific language, it allows users to define complex structures—such as software architectures, process flows, and system behaviors—without the need for manual layout configuration. The library functions as a browser-based runtime that parses these definitions into intermediate abstract syntax trees, which are then processed by specialized engines to generate high-fidelity, resolution-independent graphics. The system distinguishe
This library provides a robust, TypeScript-based solution for rendering diagrams and flowcharts from text definitions, though it prioritizes declarative syntax over the manual, node-by-node programmatic manipulation often required for interactive graph editors.
viz-js is a JavaScript rendering library and graph visualization engine that converts Graphviz DOT language descriptions into visual diagrams. It functions as a Graphviz rendering library designed to produce SVG output for web applications. The project utilizes a WebAssembly port of the Graphviz C library to execute layout engines directly in the browser. To maintain interface responsiveness, it processes computationally expensive layout calculations within background worker threads and uses a standardized JSON format for layout serialization. The library provides tools for dynamic graph vis
This library provides a robust way to render complex diagrams and flowcharts in the browser by leveraging Graphviz, though it relies on the DOT language for graph definition rather than a native JavaScript API for node manipulation.
Unovis is a modular SVG and Canvas data visualization library used to build interactive charts, maps, and network graphs. It provides a framework-agnostic set of primitives for creating data dashboards and specialized visualizations. The library is distinguished by its dedicated toolkits for different visualization domains, including an XY charting library for coordinated plots, a network graph framework for relational data, and a geospatial visualization toolkit for TopoJSON-based mapping. Its capability surface covers a wide range of data representations, including linear, area, and bar ch
Unovis is a modular data visualization library that provides robust support for network graphs, node-based layouts, and interactive SVG/Canvas rendering, making it a strong choice for building custom diagramming tools.
Flowchart.js is a JavaScript library that converts a simple text-based domain-specific language into SVG flowcharts. It parses DSL keywords to define node types such as start, end, operation, condition, parallel, and subroutine, then renders them as distinct SVG shapes connected by directional paths. The library distinguishes itself through its styling and interactivity capabilities. It supports applying CSS classes to SVG elements for external stylesheet overrides, as well as inline attribute overrides for per-node and per-edge visual properties like fill, stroke, and font. Flowchart.js also
This library provides a specialized way to render interactive flowcharts from text-based definitions, offering robust SVG support and styling options that fit the requirements for diagramming in the browser.
bpmn-js is a browser-based BPMN 2.0 web modeler and rendering engine used for creating, editing, and visualizing business process models. It functions as an XML process modeler that parses BPMN 2.0 XML data into interactive visual diagrams within a web application. The project distinguishes itself as a business process visualizer with capabilities for process flow simulation, which tracks token movement to mimic real-time execution. It also supports diagram version comparison to identify changes between model iterations and provides a layered overlay interface for binding metadata and custom
This library provides a robust, SVG-based engine for rendering and manipulating interactive node-based diagrams, though it is specifically tailored for the BPMN 2.0 standard rather than generic graph visualization.
Fabric.js is an object-oriented canvas library that provides an interactive framework for managing shapes, images, and text within an HTML5 canvas environment. It abstracts raw pixel-based drawing commands into a structured hierarchy of objects, enabling developers to manipulate, transform, and animate elements through a centralized event-driven system. The library distinguishes itself by offering comprehensive state serialization, allowing complex graphic compositions to be converted into JSON or SVG formats for persistent storage and reconstruction. It includes a built-in SVG parser that co
Fabric.js is a powerful object-oriented canvas library that provides the necessary scene graph, event-driven interaction, and custom object rendering required to build interactive node-based diagrams and flowcharts.
Rough is a graphics library designed to render shapes and paths with a hand-drawn, sketchy aesthetic on web pages. It functions as a generator for informal visual styles, allowing developers to create illustrations and diagrams that mimic the appearance of human-drawn sketches. The library distinguishes itself by using procedural rendering to calculate randomized offsets for lines and curves, simulating natural imperfections. It employs deterministic seeding to ensure that these variations remain consistent across renders, while providing hachure-based texture filling to apply stylized shadin
This is a graphics library for rendering hand-drawn, sketchy aesthetics rather than a specialized tool for managing node-based graph structures, layout algorithms, or interactive flowchart logic.
Markmap is an interactive diagramming library that transforms hierarchical Markdown documents into navigable mindmaps. It functions as a data visualization component, converting structured text into graphical representations to assist in organizing and visualizing complex information. The library utilizes a parsing engine to interpret indentation levels and list markers, mapping them into nested data objects. These objects are rendered as scalable vector graphics, providing users with dynamic, zoomable, and collapsible diagrams that update reactively as the underlying source text changes. Th
Markmap is a TypeScript-based library that renders interactive, zoomable, and collapsible mindmaps from Markdown, providing a specialized solution for hierarchical node-based visualization that fits the requested category.
D3 is a modular library providing low-level primitives for creating data-driven visualizations. It functions as a flexible framework that allows for direct control over visual presentation by mapping abstract data dimensions to graphical properties, such as position, color, and size, without imposing predefined chart abstractions. The library distinguishes itself by offering specialized tools for complex data representation, including algorithmic layouts for hierarchical structures and geographic projection utilities for mapping spherical coordinates. It also includes a comprehensive suite fo
D3 is a powerful, low-level visualization library that provides the necessary primitives, layout algorithms, and interaction handlers to build custom node-based graphs and interactive diagrams from scratch.
This project is a programmable, high-performance drawing engine designed for building collaborative whiteboards, diagramming tools, and infinite canvas applications. It provides a reactive graphics runtime that manages complex canvas interactions, viewport animations, and input handling through a unified signal-based API. The framework is built on a schema-driven data store that maintains application state in a strictly typed, centralized record system, enabling efficient UI updates and persistent data management. The engine distinguishes itself through a highly modular architecture that supp
This is a powerful, TypeScript-based graphics engine that provides the necessary infrastructure for building interactive, node-based diagramming tools and infinite canvas applications.
react-native-svg is a cross-platform vector graphics engine and rendering library designed for mobile and web applications. It functions as an SVG to component converter, transforming standard vector markup into renderable components using a compatible component-based architecture. The library enables the rendering of scalable vector graphics across diverse platforms using a single set of components. It ensures visual consistency between web and mobile environments by sharing graphics and providing a unified API. The system covers the creation of custom icons and complex shapes through compo
This is a low-level vector graphics rendering library for React Native, not a specialized diagramming or flowchart tool that provides node-based graph logic or layout algorithms.
likec4 is an architecture-as-code framework that transforms text-based architecture definitions into interactive diagrams, static websites, and image files. It serves as a system architecture visualizer and C4 model diagram generator, allowing users to define software components, boundaries, and deployment infrastructure using a domain-specific language. The tool distinguishes itself by providing a modeling environment with Language Server Protocol integration for real-time validation and autocomplete. It enables interactive architecture documentation where users can navigate through hierarch
This framework provides a specialized, code-driven approach to rendering interactive, hierarchical architecture diagrams that can be embedded as React components, fitting the requirement for a programmatic node-based visualization tool.