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 是一个用于在 React 应用程序中构建交互式节点链接图和可视化图表的框架。它充当交互式图表可视化工具和可视化工作流设计器，提供了一个用于渲染可操作的连接节点画布的系统。 该库的独特之处在于它能够充当可序列化的状态图管理器，将复杂的节点布局和连接状态转换为可存储的数据格式以实现会话持久化。它进一步允许自定义行为扩展以修改核心逻辑，并允许通过模块实现特定于项目的业务功能。 该系统涵盖了广泛的图表和可视化功能，包括视口平移、缩放和拖放元素操作。它处理自动链接路由以防止视觉重叠，并提供用于自定义元素样式和层管理的工具以控制渲染顺序。

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 是一个用于在 React 应用中构建交互式节点可视化和流程图的组件库。它提供了一个框架，用于渲染自定义视觉模式，其中节点和链接通过集中式状态进行管理，确保复杂布局的单一事实来源。 该库的特色在于灵活的渲染模式，允许将自定义用户定义的组件注入节点和端口占位符中。它通过根据预定义模式验证连接来强制执行结构完整性，并提供对用户交互的细粒度控制，例如限制节点移动的能力。 该系统包含一套用于管理大型工作区的实用程序，具有对平移和缩放的内置支持。开发者可以通过将样式应用于连接并集成专门的界面元素来自定义图表的视觉外观，同时底层架构将这些交互与外部应用状态处理器同步。

Diagram Maker 是一个基于 Web 的库，专为构建交互式图形可视化和数据建模工具而设计。它提供了一个渲染节点和链接结构的框架，允许用户创建自定义编辑环境，在其中可以直接在浏览器中可视化和操作复杂的数据关系。 该库利用模块化的、插件驱动的架构，使开发者能够在不更改底层源代码的情况下扩展核心编辑功能以满足特定需求。它通过一个集中式的、不可变的状态存储来管理应用状态，确保交互和数据更新在整个工作区中保持一致。 该框架支持一系列视觉和分析功能，包括在连接上标注元数据、计算用于精确对象定位的空间边界以及应用替代颜色主题的能力。它通过一个事件驱动系统处理用户交互，该系统协调视觉界面与底层数据模型之间的更新。

This library is a declarative React component toolkit for constructing interactive, node-based diagramming interfaces and flow charts. It provides the foundational UI elements required to render draggable nodes and scalable vector graphics paths within a web browser, enabling the creation of complex visual editors and data flow representations. The library distinguishes itself through a strictly stateless architecture that relies on external state management. By utilizing a controlled input pattern and component injection, it decouples diagram logic from data storage, allowing developers to m