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 is a framework for building interactive node-and-link diagrams and visual graphs within React applications. It functions as an interactive graph visualization tool and visual workflow designer, providing a system for rendering manipulatable canvases of connected nodes. The library is distinguished by its ability to act as a serializable state diagram manager, converting complex node layouts and connection states into storable data formats for session persistence. It further allows for custom behavior extensions to modify core logic and modules to implement project-specific func

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 is a component library for building interactive node-based visualizations and flowcharts within React applications. It provides a framework for rendering custom visual schemas where nodes and links are managed through a centralized state, ensuring a single source of truth for complex layouts. The library distinguishes itself through a flexible rendering pattern that allows for the injection of custom user-defined components into node and port placeholders. It enforces structural integrity by validating connections against predefined schemas and provides granular contr

Diagram Maker ist eine webbasierte Bibliothek für den Aufbau interaktiver Diagramm-Visualisierungs- und Datenmodellierungstools. Sie bietet ein Framework für das Rendern von Knoten- und Link-Strukturen, das es Benutzern ermöglicht, benutzerdefinierte Bearbeitungsumgebungen zu erstellen, in denen komplexe Datenbeziehungen direkt im Browser visualisiert und manipuliert werden können. Die Bibliothek nutzt eine modulare, Plugin-gesteuerte Architektur, die es Entwicklern ermöglicht, die Kern-Bearbeitungsfunktionalität an spezifische Anforderungen anzupassen, ohne den zugrunde liegenden Quellcode zu ändern. Sie verwaltet den Anwendungszustand über einen zentralen, unveränderlichen (immutable) Store und stellt sicher, dass Interaktionen und Datenaktualisierungen über den gesamten Arbeitsbereich hinweg konsistent bleiben. Das Framework unterstützt eine Reihe visueller und analytischer Fähigkeiten, einschließlich der Möglichkeit, Metadaten an Verbindungen zu annotieren, räumliche Grenzen für eine präzise Objektpositionierung zu berechnen und alternative Farbthemen anzuwenden. Es handhabt Benutzerinteraktionen über ein ereignisgesteuertes System, das Aktualisierungen zwischen der visuellen Schnittstelle und dem zugrunde liegenden Datenmodell koordiniert.

Diese Bibliothek ist ein deklaratives React-Komponenten-Toolkit für den Aufbau interaktiver, knotenbasierter Diagrammoberflächen und Flussdiagramme. Sie bietet die grundlegenden UI-Elemente, die zum Rendern von verschiebbaren Knoten und skalierbaren Vektorgrafikpfaden im Webbrowser erforderlich sind, und ermöglicht so die Erstellung komplexer visueller Editoren und Datenflussdarstellungen. Die Bibliothek zeichnet sich durch eine strikt zustandslose Architektur aus, die auf externes State-Management setzt. Durch die Verwendung eines kontrollierten Eingabemusters und Komponenten-Injection wird die Diagrammlogik von der Datenspeicherung entkoppelt, sodass Entwickler die „Source of Truth“ innerhalb ihres eigenen Anwendungszustands behalten können. Dieser Ansatz stellt sicher, dass jedes visuelle Element, von Knoten und Ports bis hin zur Arbeitsfläche selbst, vollständig an spezifische Designanforderungen angepasst werden kann. Das Toolkit unterstützt eine breite Palette an Interaktionsmöglichkeiten, einschließlich gestenbasierter Navigation zum Schwenken und Zoomen auf der Arbeitsfläche. Es bietet zudem Funktionen zum Zeichnen von Verbindungen zwischen Knoten und enthält einen Read-only-Modus für Szenarien, in denen strukturelle Änderungen eingeschränkt werden müssen. Die Bibliothek wird als Sammlung wiederverwendbarer Komponenten vertrieben, die für die Integration in bestehende React-Projekte konzipiert sind.