Summary

Relation-Graph is a versatile relationship graph display component designed for developers building interactive graphical applications. It supports major JavaScript frameworks including Vue 2, Vue 3, React, Svelte, and Web Components, enabling full customization of graphical elements via slots using standard HTML, CSS, Vue, or React components. The library excels at visualizing complex relationships like organizational structures or equity hierarchies and can also function as a flexible drawing board for arbitrary connections, zooming, and dynamic interactions. Its clear, LLM-friendly architecture makes it easier to understand and integrate.

How It Works

The component employs a flexible, slot-based architecture, allowing developers to define custom node and line appearances using familiar web technologies. It offers various automatic layout algorithms (tree, center, force-directed) and provides APIs for dynamic interaction, zooming, and dragging. A key feature is its ability to act as a general-purpose drawing board, where any HTML element can be assigned an ID and connected via defined "element lines," facilitating the creation of highly interactive diagrams.

Quick Start & Requirements

Installation is straightforward via npm for supported frameworks:

• React: npm install --save @relation-graph/react
• Vue3: npm install --save @relation-graph/vue
• Vue2: npm install --save @relation-graph/vue2
• Svelte: npm install --save @relation-graph/svelte Web Components can be imported via CDN: `import { ... } from "https://esm.sh/@relation-graph/