awesome-repositories.com
Blog
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectAboutHow we rankPressMCP server
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
relation-graph avatar

relation-graph/relation-graph

0
View on GitHub↗
2,256 stars·517 forks·JavaScript·MIT·1 viewrelation-graph.com↗

Relation Graph

Relation-graph is a frontend library designed for building interactive node-link diagrams and relationship visualizations within web applications. It provides a framework for rendering complex network structures that support manual manipulation, including zooming, dragging, and real-time structural editing.

The library distinguishes itself through a framework-agnostic core that separates graph layout logic from the rendering layer. This architecture enables developers to inject custom HTML or framework-specific components directly into graph nodes and edges, allowing for highly tailored visual representations of data points and connections.

Beyond basic visualization, the project functions as an interactive diagramming system that allows for the programmatic definition and management of graph topologies. It includes pre-built templates and configuration options to assist in the development of graph-oriented software, reducing the need for manual boilerplate implementation when building dynamic, canvas-based drawing boards.

Features

  • Interactive Diagramming Engines - Provides a flexible framework for building interactive, canvas-based diagramming tools with support for manual element manipulation and programmatic topology management.
  • Frontend Visualization Libraries - Provides a library of reusable components and logic for rendering advanced interactive network visualizations.
  • Data Visualization Libraries - Provides modular libraries for rendering dynamic and interactive data visualizations.
  • Graph Visualization Frameworks - Renders complex node-link diagrams with support for custom component injection into nodes and edges for highly tailored relationship visualizations.
  • Graph State Synchronization - Maintains the network structure as a structured data model that synchronizes automatically with the visual representation during user edits.
  • Framework Agnostic UI Logic - Provides interface behavior and state management without enforcing a specific rendering framework, ensuring consistent behavior across environments.
  • Relationship Visualizations - Provides visual representations of associations between information entities using interactive graphics.
  • Network Relationship Visualizers - Visualizes structural connections and link trees between networked data points.
  • Interactive Graph Designers - Provides interactive visual interfaces for editing graph structures and refining network topologies.
  • Interactive Canvases - Features programmable environments with built-in support for zooming, panning, and touch gesture controls for complex user interfaces.
  • Graph Visualization Libraries - Offers a library for rendering interactive network architectures that allows developers to integrate custom framework-specific components directly into the graph structure.
  • Component Slots - Defines placeholders within component templates to allow for flexible content injection and composition of custom UI elements.
  • Custom Component Injection - Provides mechanisms for replacing default component tags with custom components or HTML elements.
  • Event-Driven User Interactions - Processes user inputs like dragging and zooming through a centralized event bus that triggers real-time updates to the graph topology.
  • Infinite Canvas Coordinate Mapping - Provides coordinate mapping systems that allow for expansive, zoomable visual areas by mapping node positions relative to a flexible workspace.
  • Interactive Diagramming Tools - Provides browser-based canvases for drawing and connecting shapes to represent processes.
  • Custom Graph Element Integration - Integrates external UI components as functional nodes or visual elements within a graph.
  • Frontend Framework Integrations - Provides plugins and configurations that connect the graph library to popular user interface frameworks for seamless compatibility.

Star history

Star history chart for relation-graph/relation-graphStar history chart for relation-graph/relation-graph

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Curated searches featuring Relation Graph

Hand-picked collections where Relation Graph appears.
  • Graph visualization library
  • Web Diagramming and Flowchart Libraries

Open-source alternatives to Relation Graph

Similar open-source projects, ranked by how many features they share with Relation Graph.
  • alibaba/butterflyalibaba avatar

    alibaba/butterfly

    4,649View on GitHub↗

    Butterfly is an interactive graph visualization library and SVG-based diagramming engine used to build node-based workflow designers and visual flow editors. It provides a framework for rendering interconnected nodes, edges, and groups to model technical architectures, business processes, and data-driven workflows. The project is distinguished by its ability to integrate custom UI components as graph nodes and its specialized support for data lineage visualization. It enables the mapping of relationships between data fields, tables, and business entities to track provenance and monitor workfl

    JavaScript
    View on GitHub↗4,649
  • clientio/jointclientIO avatar

    clientIO/joint

    5,272View on GitHub↗

    Joint is a JavaScript library for building interactive visual diagrams and flowcharts using Scalable Vector Graphics. It provides a programmable environment for creating an interactive SVG canvas with integrated support for zooming, panning, and touch gesture controls. The framework includes a component system for defining custom shapes and programmatic elements within a vector-based coordinate system. It features a JSON-based diagram serializer for saving and loading diagram states, as well as automated layout algorithms and relationship mapping to render nodes and edges. The library covers

    JavaScript
    View on GitHub↗5,272
  • antvis/x6antvis avatar

    antvis/X6

    6,598View on GitHub↗

    X6 is a JavaScript diagramming library and SVG graph rendering engine used to build interactive flowcharts, mind maps, and visual workflow editors. It provides a framework for defining customizable node and edge behaviors, utilizing a hybrid rendering approach that combines SVG and HTML. The library decouples the visual graph representation from underlying business logic and data structures through a dedicated state management system. It allows for extensive extensibility via a registration mechanism for custom nodes, edges, and canvas tools. The toolkit includes capabilities for automatic g

    TypeScriptantvdagdiagram
    View on GitHub↗6,598
  • didi/logicflowdidi avatar

    didi/LogicFlow

    11,441View on GitHub↗

    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

    TypeScriptbpmndiagramdiagramming
    View on GitHub↗11,441
See all 30 alternatives to Relation Graph→

Frequently asked questions

What does relation-graph/relation-graph do?

Relation-graph is a frontend library designed for building interactive node-link diagrams and relationship visualizations within web applications. It provides a framework for rendering complex network structures that support manual manipulation, including zooming, dragging, and real-time structural editing.

What are the main features of relation-graph/relation-graph?

The main features of relation-graph/relation-graph are: Interactive Diagramming Engines, Frontend Visualization Libraries, Data Visualization Libraries, Graph Visualization Frameworks, Graph State Synchronization, Framework Agnostic UI Logic, Relationship Visualizations, Network Relationship Visualizers.

What are some open-source alternatives to relation-graph/relation-graph?

Open-source alternatives to relation-graph/relation-graph include: alibaba/butterfly — Butterfly is an interactive graph visualization library and SVG-based diagramming engine used to build node-based… clientio/joint — Joint is a JavaScript library for building interactive visual diagrams and flowcharts using Scalable Vector Graphics.… antvis/x6 — X6 is a JavaScript diagramming library and SVG graph rendering engine used to build interactive flowcharts, mind maps,… didi/logicflow — LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business… nhnent/tui.chart — tui.chart is a statistical charting engine and data visualization library designed to render interactive charts and… vasturiano/react-force-graph — react-force-graph is a React component for rendering interactive 2D and 3D network visualizations using a…