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 es un framework para construir diagramas interactivos de nodos y enlaces y gráficos visuales dentro de aplicaciones React. Funciona como una herramienta de visualización de gráficos interactivos y diseñador de flujos de trabajo visuales, proporcionando un sistema para renderizar lienzos manipulables de nodos conectados. La biblioteca se distingue por su capacidad para actuar como un gestor de diagramas de estado serializable, convirtiendo layouts de nodos complejos y estados de conexión en formatos de datos almacenables para la persistencia de sesiones. Además, permite extensiones de comportamiento personalizadas para modificar la lógica central y módulos para implementar funcionalidades específicas del proyecto. El sistema cubre una amplia gama de capacidades de diagramación y visualización, incluyendo paneo de viewport, escalado y manipulación de elementos mediante arrastrar y soltar. Maneja el enrutamiento automático de enlaces para evitar la superposición visual y proporciona herramientas para el estilo de elementos personalizados y la gestión de capas para controlar el orden de renderizado.

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 es una librería de componentes para construir visualizaciones basadas en nodos y diagramas de flujo interactivos dentro de aplicaciones React. Proporciona un framework para renderizar esquemas visuales personalizados donde los nodos y enlaces se gestionan a través de un estado centralizado, asegurando una única fuente de verdad para diseños complejos. La librería destaca por un patrón de renderizado flexible que permite la inyección de componentes personalizados definidos por el usuario en marcadores de posición de nodos y puertos. Aplica la integridad estructural validando las conexiones contra esquemas predefinidos y proporciona un control granular sobre las interacciones del usuario, como la capacidad de restringir el movimiento de los nodos. El sistema incluye un conjunto de utilidades para gestionar espacios de trabajo grandes, con soporte integrado para paneo y zoom. Los desarrolladores pueden personalizar la apariencia visual del diagrama aplicando estilos a las conexiones e integrando elementos de interfaz especializados, mientras que la arquitectura subyacente sincroniza estas interacciones con los manejadores de estado de la aplicación externa.

Diagram Maker es una biblioteca basada en web diseñada para construir herramientas interactivas de visualización de gráficos y modelado de datos. Proporciona un marco para renderizar estructuras de nodos y enlaces, permitiendo a los usuarios crear entornos de edición personalizados donde las relaciones de datos complejas pueden visualizarse y manipularse directamente en el navegador. La biblioteca utiliza una arquitectura modular impulsada por complementos que permite a los desarrolladores extender la funcionalidad de edición central para cumplir con requisitos específicos sin alterar el código fuente subyacente. Gestiona el estado de la aplicación a través de un almacén centralizado e inmutable, asegurando que las interacciones y las actualizaciones de datos permanezcan consistentes en todo el espacio de trabajo. El marco admite una gama de capacidades visuales y analíticas, incluida la capacidad de anotar metadatos en conexiones, calcular límites espaciales para un posicionamiento preciso de objetos y aplicar temas de color alternativos. Maneja las interacciones del usuario a través de un sistema impulsado por eventos que coordina las actualizaciones entre la interfaz visual y el modelo de datos subyacente.

Esta librería es un toolkit de componentes declarativos de React para construir interfaces interactivas de diagramas basados en nodos y diagramas de flujo. Proporciona los elementos de UI fundamentales necesarios para renderizar nodos arrastrables y rutas de gráficos vectoriales escalables dentro de un navegador web, permitiendo la creación de editores visuales complejos y representaciones de flujo de datos. La librería se distingue por una arquitectura estrictamente sin estado que depende de la gestión de estado externa. Al utilizar un patrón de entrada controlada e inyección de componentes, desacopla la lógica del diagrama del almacenamiento de datos, permitiendo a los desarrolladores mantener la fuente de verdad dentro del estado de su propia aplicación. Este enfoque asegura que cada elemento visual, desde nodos y puertos hasta el propio lienzo, pueda personalizarse completamente para cumplir con requisitos de diseño específicos. El toolkit admite una amplia gama de capacidades de interacción, incluyendo navegación basada en gestos para desplazarse y hacer zoom en el lienzo. También proporciona funcionalidad para dibujar conexiones entre nodos e incluye un modo de solo lectura para escenarios donde las modificaciones estructurales deben restringirse. La librería se distribuye como una colección de componentes reutilizables diseñados para integrarse en proyectos de React existentes.