Awesome GitHub RepositoriesNode-Based Diagramming Frameworks

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

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

Flowy is a JavaScript library designed for building interactive, drag-and-drop flowchart interfaces. It enables the creation of canvas-based environments where users can arrange blocks to design custom logic sequences, decision trees, and visual process maps. The library provides a structured approach to diagramming by organizing elements into a hierarchical parent-child tree. It features coordinate-based snapping logic to ensure blocks automatically align into organized layouts during user interaction. To support complex system configurations, the tool includes event-driven callback hooks th

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

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

react-diagrams est un framework pour construire des diagrammes interactifs de nœuds et de liens ainsi que des graphes visuels au sein d'applications React. Il fonctionne comme un outil de visualisation de graphes interactif et un concepteur de workflow visuel, fournissant un système pour rendre des canevas manipulables de nœuds connectés. La bibliothèque se distingue par sa capacité à agir comme un gestionnaire de diagramme d'état sérialisable, convertissant des mises en page de nœuds complexes et des états de connexion en formats de données stockables pour la persistance de session. Elle permet en outre des extensions de comportement personnalisées pour modifier la logique centrale et des modules pour implémenter des fonctionnalités spécifiques au projet. Le système couvre un large éventail de capacités de diagramme et de visualisation, incluant le panoramique de la fenêtre, le zoom et la manipulation d'éléments par glisser-déposer. Il gère le routage automatique des liens pour éviter les chevauchements visuels et fournit des outils pour le style des éléments personnalisés et la gestion des couches afin de contrôler l'ordre de rendu.

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

Vue Flow is a TypeScript library for building interactive node-based editors and flowcharts. It provides the core infrastructure for creating diagrams where users can drag, select, and connect nodes with edges, supporting pan and zoom navigation of the canvas. The library offers extensive control over graph behavior and appearance, including the ability to customize connection lines, define custom edge types, and configure zoom constraints and viewport defaults. It includes built-in components like a minimap for navigation, zoom controls, and a fit-view button, along with features for node re

3d-force-graph is a WebGL-accelerated component for rendering interactive network graphs in three-dimensional space. Built on the ThreeJS library, it positions nodes using a force-directed physics simulation that can be driven by either a D3-force or ngraph engine, producing dynamic layouts that users can rotate, zoom, and pan using mouse, keyboard, or touch controls. The component distinguishes itself through comprehensive camera control capabilities, including programmatic positioning, animated transitions, automatic timed orbiting, and zoom-to-fit functionality that frames all nodes within

Simple flow library 🖥️🖱️

OpenSeadragon is a JavaScript library and tiled image rendering engine designed for high-resolution image viewing. It functions as a deep zoom image viewer that renders massive images using a tiled pyramid approach, enabling smooth panning and zooming without requiring the full image file to be loaded. The project distinguishes itself through broad support for standardized image retrieval protocols, including the International Image Interoperability Framework (IIIF), IIPImage, Iris, and OpenStreetMap. It provides a hardware-accelerated rendering layer via WebGL to apply real-time filters and

Beautiful React Diagrams est une bibliothèque de composants pour construire des visualisations basées sur des nœuds et des organigrammes interactifs au sein des applications React. Elle fournit un framework pour rendre des schémas visuels personnalisés où les nœuds et les liens sont gérés via un état centralisé, garantissant une source unique de vérité pour les mises en page complexes. La bibliothèque se distingue par un modèle de rendu flexible qui permet l'injection de composants personnalisés définis par l'utilisateur dans les espaces réservés des nœuds et des ports. Elle impose l'intégrité structurelle en validant les connexions par rapport à des schémas prédéfinis et offre un contrôle granulaire sur les interactions utilisateur, comme la possibilité de restreindre le mouvement des nœuds. Le système inclut une suite d'utilitaires pour gérer les grands espaces de travail, avec un support intégré pour le panoramique et le zoom. Les développeurs peuvent personnaliser l'apparence visuelle du diagramme en appliquant des styles aux connexions et en intégrant des éléments d'interface spécialisés, tandis que l'architecture sous-jacente synchronise ces interactions avec les gestionnaires d'état de l'application externe.

Diagram Maker is a web-based library designed for building interactive graph visualization and data modeling tools. It provides a framework for rendering node and link structures, allowing users to create custom editing environments where complex data relationships can be visualized and manipulated directly in the browser. The library utilizes a modular, plugin-driven architecture that enables developers to extend the core editing functionality to meet specific requirements without altering the underlying source code. It manages the application state through a centralized, immutable store, en

Cette bibliothèque est une boîte à outils de composants React déclaratifs pour construire des interfaces de diagrammes interactifs basées sur des nœuds et des organigrammes. Elle fournit les éléments d'interface utilisateur fondamentaux nécessaires pour rendre des nœuds déplaçables et des chemins vectoriels évolutifs dans un navigateur web, permettant la création d'éditeurs visuels complexes et de représentations de flux de données. La bibliothèque se distingue par une architecture strictement sans état (stateless) qui repose sur une gestion d'état externe. En utilisant un modèle d'entrée contrôlé et l'injection de composants, elle découple la logique du diagramme du stockage des données, permettant aux développeurs de maintenir la source de vérité au sein de l'état de leur propre application. Cette approche garantit que chaque élément visuel, des nœuds et ports au canevas lui-même, peut être entièrement personnalisé pour répondre à des exigences de conception spécifiques. La boîte à outils prend en charge un large éventail de capacités d'interaction, y compris la navigation gestuelle pour le panoramique et le zoom sur le canevas. Elle offre également des fonctionnalités pour dessiner des connexions entre les nœuds et inclut un mode lecture seule pour les scénarios où les modifications structurelles doivent être restreintes. La bibliothèque est distribuée sous forme de collection de composants réutilisables conçus pour être intégrés dans des projets React existants.