relation-graph

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 2,272 Open GitHub ↗

relation-graph is an relationship graph component for React/Vue/Svelte relationship data visualization/edit. Through its slot-based customization model, users can fully customize graph elements with plain React/Vue/Svelte/HTML components, relation-graph also uses an LLM-friendly architecture and provides knowledge content.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

relation-graph v3.x has now been released, with support for more platforms while keeping the code cleaner and more elegant. View the architecture here:

[https://relation-graph.com/docs/multi-platform-architecture](https://relation-graph.com/docs/multi-platform-architecture)

At the same time, Relation Graph’s structure is naturally LLM-friendly. Because its architecture is clear, its knowledge is easier to understand. The knowledge files are located at:

`<source-code-root>/knowledge-for-ai`

---
<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";

```

#### Sample code effects
![Simple](https://www.relation-graph.com/github-doc-images/relation-graph-simple.png)
</details>

---

### Example Projects

- The complete Vue2 sample project:
- https://github.com/relation-graph/relation-graph-startup-for-vue2
- [Run the complete Vue2 sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-vue2/main)

- The complete Vue3 sample project:
- https://github.com/relation-graph/relation-graph-startup-for-vue3
- [Run the complete Vue3 sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-vue3/main)

- The complete React sample project:
- https://github.com/relation-graph/relation-graph-startup-for-react
- [Run the complete React sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-react/main)

- The complete Svelte sample project:
- https://github.com/relation-graph/relation-graph-startup-for-svelte
- [Run the complete Svelte sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-svelte/main)

- The complete Web Components sample project:
- https://github.com/relation-graph/relation-graph-startup-for-web-component
- [Run the complete Web Components sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-web-component/main)

### 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-Layout](https://www.relation-graph.com/demo-images/distance_coefficient.gif)
![force-Layout](https://www.relation-graph.com/demo-images/layout-force.gif)
![expand-node](https://www.relation-graph.com/demo-images/adv-expand.gif)
![data-filter](https://www.relation-graph.com/demo-images/adv-data-filter.gif)
![event](https://www.relation-graph.com/demo-images/adv-effect2.gif)
![animation](https://www.relation-graph.com/demo-images/expand-animation.gif)
![event-commbo](https://www.relation-graph.com/demo-images/open-all-close-all.gif)
![switch-layout](https://www.relation-graph.com/

### The complete sample project

- The complete Vue2 sample project:
- https://github.com/relation-graph/relation-graph-startup-for-vue2
- [Run the complete Vue2 sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-vue2/main)

- The complete Vue3 sample project:
- https://github.com/relation-graph/relation-graph-startup-for-vue3
- [Run the complete Vue3 sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-vue3/main)

- The complete React sample project:
- https://github.com/relation-graph/relation-graph-startup-for-react
- [Run the complete React sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-react/main)

- The complete Svelte sample project:
- https://github.com/relation-graph/relation-graph-startup-for-svelte
- [Run the complete Svelte sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-svelte/main)

- The complete Web Components sample project:
- https://github.com/relation-graph/relation-graph-startup-for-web-component
- [Run the complete Web Components sample project online](https://codesandbox.io/p/github/relation-graph/relation-graph-startup-for-web-component/main)

### More info

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

### Contact me

- My WhatsApp:

- QQ：3235808353

relation-graph

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README