npm package: @relation-graph/web-components
Description: Framework-agnostic Web Component for relationship graph visualization. Easily integrate knowledge graphs, org charts, and network topologies into any web application (Vanilla JS, Angular, etc.) with built-in layouts and editing features.
Author: WanLian
Latest version: 3.0.12



<img src="https://www.relation-graph.com/github-doc-images/relation-graph-yellow-small.png" width="60" />

# relation-graph

[English ](README.md) | [简体中文](README-zh.md)

- **relation-graph** is a relationship data display component that supports React, Vue 2, Vue 3, Svelte and WebComponent. It enables users to fully customize graphical elements using "common HTML elements, Vue components, React components" through slots, and provides practical API interfaces to facilitate the development of interactive graphical applications."<br />
-  In addition to the typical relationship data display functionality, the relation-graph also supports being used as a drawing board. You can place any content on the drawing board, simply by setting an id for the elements you want to connect, and defining "element lines." This allows for the easy creation of a drawing board that supports the creation of arbitrary connections, zooming and dragging, and dynamic interactions through the API.
### Docs & Examples

- [https://relation-graph.com](https://relation-graph.com)

The website above includes documentation, online demos, and a visual configuration tool for software developers.

### Getting Started

```shell script
# 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
import { ... } from "https://esm.sh/@relation-graph/web-components";
```
```typescript
// React:
import RelationGraph from '@relation-graph/react'
// Vue3:
import RelationGraph from '@relation-graph/vue'
// Vue2:
import RelationGraph from '@relation-graph/vue2'
// Svelte:
import RelationGraph from '@relation-graph/svelte'
// Web Components:
// Use the custom element <relation-graph></relation-graph>;
```
<details>
  <summary>Use <strong>relation-graph</strong> in react</summary>
#### `index.tsx`
```typescript jsx
import { RGProvider } from '@relation-graph/react';
import React from 'react';
import MyGraph from "./MyGraph";
const MyExample: React.FC = () => {
    return (
        <RGProvider>
            <MyGraph />
        </RGProvider>
    );
};
export default MyExample;
```

#### `MyGraph.tsx`
```typescript jsx
import React, { useEffect } from 'react';
import {RelationGraph, RGHooks, RGMiniView, RGSlotOnNode, RGNodeShape, RGSlotOnView} from '@relation-graph/react';
import type {
    RGLine,
    RGLink,
    RGNode,
    RGNodeSlotProps,
    RGOptions,
    RGUserEvent,
    JsonNode,
    JsonLine,
    RGJsonData
} from '@relation-graph/react';
import CustomNode from "./CustomNode";

const staticJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '2', text: 'Initrode', width: 100, height: 100, data: { myicon: 'delivery_truck' } },
        { id: '1', text: 'Paper Street Soap Co.', data: { myicon: 'fries' } },
        { id: '3', text: 'Cyberdyne Systems', data: { myicon: 'football' } },
        { id: '4', text: 'Tyrell Corporation', data: { myicon: 'desktop' } },
        { id: '6', text: 'Weyland-Yutani', data: { myicon: 'fries' } },
        { id: '7', text: 'Hooli', data: { myicon: 'desktop' } },
        { id: '8', text: 'Vehement Capital', data: { myicon: 'football' } },
        { id: '9', text: 'Omni Consumer Products', data: { myicon: 'football' } },
        { id: '71', text: 'Stark Industries', data: { myicon: 'delivery_truck' } },
        { id: '72', text: 'Buy n Large', data: { myicon: 'fries' } },
        { id: '73', text: 'Binford Tools', data: { myicon: 'delivery_truck' } },
        { id: '81', text: 'Initech', data: { myicon: 'fries' } },
        { id: '82', text: 'Aperture Science', data: { myicon: 'desktop' } },
        { id: '83', text: 'Prestige Worldwide', data: { myicon: 'delivery_truck' } },
        { id: '84', text: 'Massive Dynamic', data: { myicon: 'football' } },
        { id: '85', text: 'Virtucon', data: { myicon: 'delivery_truck' } },
        { id: '91', text: 'Acme Corp', data: { myicon: 'football' } },
        { id: '92', text: 'Nakatomi Trading', data: { myicon: 'football' } },
        { id: '5', text: 'Los Pollos Hermanos', data: { myicon: 'burger' } }
    ] as JsonNode[],
    lines: [
        { from: '7', to: '71', text: 'Invest' },
        { from: '7', to: '72', text: 'Invest' },
        { from: '7', to: '73', text: 'Invest' },
        { from: '8', to: '81', text: 'Invest' },
        { from: '8', to: '82', text: 'Invest' },
        { from: '8', to: '83', text: 'Invest' },
        { from: '8', to: '84', text: 'Invest' },
        { from: '8', to: '85', text: 'Invest' },
        { from: '9', to: '91', text: 'Invest' },
        { from: '9', to: '92', text: 'Invest' },
        { from: '1', to: '2', text: 'Invest' },
        { from: '3', to: '1', text: 'Executive' },
        { from: '4', to: '2', text: 'Executive' },
        { from: '6', to: '2', text: 'Executive' },
        { from: '7', to: '2', text: 'Executive' },
        { from: '8', to: '2', text: 'Executive' },
        { from: '9', to: '2', text: 'Executive' },
        { from: '1', to: '5', text: 'Invest' }
    ] as JsonLine[]
};

const MyGraph: React.FC = () => {
    const graphInstance = RGHooks.useGraphInstance();

    const graphOptions: RGOptions = {
        debug: true,
        defaultLineShape: RGLineShape.StandardStraight,
        defaultNodeShape: RGNodeShape.circle,
        defaultNodeWidth: 60,
        defaultNodeHeight: 60,
        defaultLineTextOnPath: true,
        layout: {
            layoutName: 'center'
        },
        defaultExpandHolderPosition: 'right',
        reLayoutWhenExpandedOrCollapsed: true
    };

    const initializeGraph = async () => {
        await graphInstance.setJsonData(staticJsonData);
        graphInstance.moveToCenter();
        graphInstance.zoomToFit();
    };

    useEffect(() => {
        initializeGraph();
    }, []);

    const onNodeClick = (node: RGNode, e: RGUserEvent) => {
        console.log('onNodeClick:', node.text);
        return true;
    };

    const onLineClick = (line: RGLine, link: RGLink, e: RGUserEvent) => {
        console.log('onLineClick:', line.text, line.from, line.to);
        return true;
    };

    return (
        <div className="my-graph" style={{ height: 'calc(100vh - 0px)' }}>
            <RelationGraph
                options={graphOptions}
                onNodeClick={onNodeClick}
                onLineClick={onLineClick}
            >
                {/* 5. Node content slot */}
                <RGSlotOnNode>
                    {({ node, checked, dragging }: RGNodeSlotProps) => (
                        <CustomNode node={node} checked={checked} dragging={dragging} />
                    )}
                </RGSlotOnNode>
                <RGSlotOnView>
                    <RGMiniView />
                </RGSlotOnView>
            </RelationGraph>
        </div>
    );
};
export default MyGraph;

```

#### `CustomNode.tsx`
```typescript jsx
import React from 'react';
import type { RGNodeSlotProps } from '@relation-graph/react';
import {HelpCircle, Monitor, Sandwich, Trophy, Truck, Utensils} from "lucide-react";

const IconSwitcher = ({ iconName, size = 24, color = 'currentColor' }) => {
    const props = { size, color };
    switch (iconName) {
        case 'desktop':
            return <Monitor {...props} />;
        case 'burger':
            return <Sandwich {...props} />;
        case 'delivery_truck':
            return <Truck {...props} />;
        case 'fries':
            return <Utensils {...props} />;
        case 'football':
            return <Trophy {...props} />;
        default:
            return <HelpCircle {...props} />;
    }
};
const CustomNode: React.FC<RGNodeSlotProps> = ({ node }) => {
    if (node.id === '2') { // rootNode
        return (
            // Here, `h-full` and `w-full` apply on the premise that `width` and `height` attributes have been set for the node data (or that the global `defaultNodeWidth` and `defaultNodeHeight` have been configured).
            <div className="my-root z-[555] h-full w-full rounded-full relative text-lg flex place-items-center justify-center overflow-hidden">
                <div className="py-2 w-full text-center text-white bg-gray-100 bg-opacity-40 border-t border-b border-gray-500">
                    {node.text}
                </div>
            </div>
        );
    }
    return ( // Normal Node
        // Here, `h-full` and `w-full` apply on the premise that `width` and `height` attributes have been set for the node data (or that the global `defaultNodeWidth` and `defaultNodeHeight` have been configured).
        <div className="h-full w-full rounded-full flex place-items-center justify-center shadow-md">
            <IconSwitcher iconName={node.data?.myicon} size={30} />
            <div
                className="bg-gray-200 text-black px-2 rounded-lg absolute my-node-text"
                style={{
                    marginTop: '100%',
                    transform: 'translateY(15px)'
                }}
            >
                {node.text}
            </div>
        </div>
    );
};
export default CustomNode;

```

#### Sample code effects
![简单示例效果图](https://www.relation-graph.com/github-doc-images/relation-graph-simple.png)
</details>

---


### Example Projects


- The complete React sample project:
- https://github.com/seeksdream/relation-graph-vue2-demo
-
- The complete Vue3 sample project:
- https://github.com/seeksdream/relation-graph-react-demo

- The complete Vue2 sample project:
- https://github.com/seeksdream/relation-graph-vue3-demo

- The complete Svelte sample project:
- https://github.com/seeksdream/relation-graph-svelte-demo

- The complete Web Components sample project:
- https://github.com/seeksdream/relation-graph-webcomponents-demo


### More Examples
- [https://relation-graph.com/examples](https://relation-graph.com/examples)



![relation-graph](https://www.relation-graph.com/github-doc-images/relation-graph-images-m.png)

![center-层级距离设置](https://www.relation-graph.com/demo-images/distance_coefficient.gif)
![力学布局(force)](https://www.relation-graph.com/demo-images/layout-force.gif)
![节点展开/收缩的用法](https://www.relation-graph.com/demo-images/adv-expand.gif)
![节点筛选 & 关系筛选](https://www.relation-graph.com/demo-images/adv-data-filter.gif)
![节点/连线点击效果2](https://www.relation-graph.com/demo-images/adv-effect2.gif)
![展开/收缩 时动画效果](https://www.relation-graph.com/demo-images/expand-animation.gif)
![展开/关闭所有](https://www.relation-graph.com/demo-images/open-all-close-all.gif)
![布局切换事件](https://www.relation-graph.com/demo-images/before-change-layout.gif)

### The complete sample project

- The complete Vue2 sample project：
- [https://github.com/seeksdream/relation-graph-vue2-demo(Vite)](https://github.com/seeksdream/relation-graph-vue2-demo)
- [https://github.com/seeksdream/relation-graph-vue2-demo(Webpack)](https://github.com/seeksdream/relation-graph-webpack)

- The complete Vue3 sample project：
- https://github.com/seeksdream/relation-graph-vue3-demo

- The complete React sample project：
- https://github.com/seeksdream/relation-graph-react-demo


### More info

- [https://relation-graph.com](https://relation-graph.com)


### Contact me

- My WhatsApp:

  <img src="https://www.relation-graph.com/github-doc-images/Whatsapp.png" width="200" />

- QQ：3235808353