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 este un framework pentru construirea de diagrame interactive cu noduri și legături și grafuri vizuale în cadrul aplicațiilor React. Funcționează ca un instrument de vizualizare grafică interactivă și designer de fluxuri de lucru vizuale, oferind un sistem pentru randarea canvas-urilor manipulabile de noduri conectate. Biblioteca se distinge prin capacitatea sa de a acționa ca un manager de diagrame de stare serializabile, convertind layout-urile complexe de noduri și stările de conexiune în formate de date stocabile pentru persistența sesiunii. Permite, de asemenea, extensii de comportament personalizate pentru a modifica logica de bază și module pentru a implementa funcționalități specifice proiectului. Sistemul acoperă o gamă largă de capabilități de diagramare și vizualizare, inclusiv panning-ul viewport-ului, scalarea și manipularea elementelor prin drag-and-drop. Gestionează rutarea automată a legăturilor pentru a preveni suprapunerea vizuală și oferă instrumente pentru stilizarea elementelor personalizate și gestionarea straturilor pentru a controla ordinea de randare.

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 este o bibliotecă de componente pentru construirea de vizualizări interactive bazate pe noduri și diagrame de flux în aplicațiile React. Oferă un framework pentru randarea schemelor vizuale personalizate unde nodurile și legăturile sunt gestionate printr-o stare centralizată, asigurând o singură sursă de adevăr pentru layout-uri complexe. Biblioteca se distinge printr-un model de randare flexibil care permite injectarea de componente personalizate definite de utilizator în placeholder-ele pentru noduri și porturi. Impune integritatea structurală prin validarea conexiunilor față de scheme predefinite și oferă un control granular asupra interacțiunilor utilizatorului, cum ar fi capacitatea de a restricționa mișcarea nodurilor. Sistemul include o suită de utilitare pentru gestionarea spațiilor de lucru mari, având suport integrat pentru panning și zooming. Dezvoltatorii pot personaliza aspectul vizual al diagramei prin aplicarea de stiluri conexiunilor și integrarea elementelor de interfață specializate, în timp ce arhitectura subiacentă sincronizează aceste interacțiuni cu handler-ele de stare ale aplicației externe.

Diagram Maker este o bibliotecă bazată pe web concepută pentru construirea de instrumente interactive de vizualizare a grafurilor și modelare a datelor. Oferă un framework pentru randarea structurilor de noduri și legături, permițând utilizatorilor să creeze medii de editare personalizate unde relațiile complexe de date pot fi vizualizate și manipulate direct în browser. Biblioteca utilizează o arhitectură modulară, bazată pe plugin-uri, care permite dezvoltatorilor să extindă funcționalitatea de editare de bază pentru a îndeplini cerințe specifice fără a altera codul sursă subiacent. Gestionează starea aplicației printr-un magazin centralizat, imuabil, asigurându-se că interacțiunile și actualizările de date rămân consistente în întregul spațiu de lucru. Framework-ul susține o gamă de capabilități vizuale și analitice, inclusiv capacitatea de a adnota metadate pe conexiuni, de a calcula limite spațiale pentru poziționarea precisă a obiectelor și de a aplica teme de culori alternative. Gestionează interacțiunile utilizatorului printr-un sistem bazat pe evenimente care coordonează actualizările între interfața vizuală și modelul de date subiacent.

Această bibliotecă este un toolkit declarativ de componente React pentru construirea de interfețe interactive bazate pe noduri și diagrame de flux. Oferă elementele UI fundamentale necesare pentru a randa noduri care pot fi glisate și căi grafice vectoriale scalabile într-un browser web, permițând crearea de editoare vizuale complexe și reprezentări ale fluxurilor de date. Biblioteca se distinge printr-o arhitectură strict stateless care se bazează pe gestionarea externă a stării. Utilizând un tipar de input controlat și injectarea de componente, aceasta decuplează logica diagramei de stocarea datelor, permițând dezvoltatorilor să mențină sursa de adevăr în propria stare a aplicației. Această abordare asigură că fiecare element vizual, de la noduri și porturi până la canvas-ul în sine, poate fi complet personalizat pentru a îndeplini cerințe specifice de design. Toolkit-ul suportă o gamă largă de capabilități de interacțiune, inclusiv navigare bazată pe gesturi pentru panoramare și zoom pe canvas. De asemenea, oferă funcționalitate pentru desenarea conexiunilor între noduri și include un mod read-only pentru scenariile în care modificările structurale trebuie restricționate. Biblioteca este distribuită ca o colecție de componente reutilizabile concepute pentru integrarea în proiecte React existente.