relation-graph
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.
File Explorer
Download Latest Version (.zip)- RelationGraphBase-en.md
- RelationGraphWith1View-en.md
- RelationGraphWith2Data-en.md
- RelationGraphWith2Data1Getter-en.md
- RelationGraphWith2Data2Analysis-en.md
- RelationGraphWith2Data3Update-en.md
- RelationGraphWith2Data4ConnectTarget-en.md
- RelationGraphWith2Data5LineConfig-en.md
- RelationGraphWith3Options1Update-en.md
- RelationGraphWith3Options2API-en.md
- RelationGraphWith4Line-en.md
- RelationGraphWith5Zoom-en.md
- RelationGraphWith6Effect-en.md
- RelationGraphWith6Layout-en.md
- RelationGraphWith7Event-en.md
- RelationGraphWith91Editing-en.md
- RelationGraphWith92MiniView-en.md
- RelationGraphWith93Image-en.md
- RelationGraphWith95Dom-en.md
- RelationGraphWith99API-en.md
- RelationGraphWith9EasyView-en.md
- Relation Graph Types Definitions.md
- RelationGraph-Events.md
- relation-graph-packages-source-structure-overview.md
- RGConnectSource.tsx
- RGConnectTarget.tsx
- RGEditingConnectController.tsx
- RGEditingConnectPoints.tsx
- RGEditingLineController.tsx
- RGEditingNearNodeWidget.tsx
- RGEditingNodeController.tsx
- RGEditingReferenceLine.tsx
- RGEditingResize.tsx
- RGMiniView.tsx
- RGSlotOnCanvas.tsx
- RGSlotOnCanvasAbove.tsx
- RGSlotOnLine.tsx
- RGSlotOnLineText.tsx
- RGSlotOnNode.tsx
- RGSlotOnNodeExpandHandle.tsx
- RGSlotOnView.tsx
- RGStore.ts
- index.tsx
- GraphBackground.tsx
- GraphLoading.tsx
- GraphMoveOperator.tsx
- GraphOperateStuff.tsx
- GraphToolBar.tsx
- GraphWatermark.tsx
- GraphXsToolBar.tsx
- RGDebugView.tsx
- RGIcons.tsx
- RelationGraphUI.tsx
- RelationGraphView.tsx
- RelationLinkerCanvas.tsx
- RelationLinkerUI.tsx
- RelationLinkerView.tsx
- RGCanvas.tsx
- RGCanvasContent.tsx
- RGCanvasContent4CreatingLine.tsx
- RGCanvasContent4FakeLines.tsx
- RGCanvasContent4Lines.tsx
- RGCanvasContent4Nodes.tsx
- RGEasyView.tsx
- RGFakeNode.tsx
- RGGraphRefs.tsx
- RGLineContent.tsx
- RGLinePath.tsx
- RGLinePeel.tsx
- RGLineText.tsx
- RGNodeExpandHolder.tsx
- RGNodePeel.tsx
- RGDataProvider.tsx
- RGHooks.ts
- useFakeNodesState.ts
- useGraphInstance.ts
- useGraphStore.ts
- useRelationGraph.tsx
- useRelationLinker.tsx
- RelationGraph.tsx
- RelationLinker.tsx
- RGProvider.tsx
- constants.ts
- index.shared.ts
- index.ssr.ts
- index.ts
- react-app-env.d.ts
- types-react.ts
- index.html
- package.json
- tsconfig.json
- vite.config.ts
- treemap.js
- treemap2.js
- demo2RG_as_tag.html
- web-component-demo.html
- RGConnectSource.svelte
- RGConnectTarget.svelte
- RGConnectTargetUI.svelte
- RGEditingConnectController.svelte
- RGEditingConnectPoints.svelte
- RGEditingLineController.svelte
- RGEditingLineControllerUI.svelte
- RGEditingNearNodeWidget.svelte
- RGEditingNodeController.svelte
- RGEditingNodeControllerUI.svelte
- RGEditingReferenceLine.svelte
- RGEditingResize.svelte
- RGEditingResizeUI.svelte
- RGMiniView.svelte
- RGMiniViewContent.svelte
- RelationGraphWithProvider.svelte
- RGConnectTarget.scss
- RGConnectTarget.svelte
- RGEditingConnectController.svelte
- RGEditingLineController.svelte
- RGEditingNearNodeWidget.scss
- RGEditingNearNodeWidget.svelte
- RGEditingNodeController.scss
- RGEditingNodeController.svelte
- RGEditingReferenceLine.svelte
- RGEditingResize.svelte
- RGLineContent.svelte
- RGMiniView.svelte
- WebComponentStyleVariables.ts
- WebComponentUtils.ts
- GraphBackground.svelte
- GraphLoading.svelte
- GraphMoveOperator.svelte
- GraphOperateStuff.svelte
- GraphWatermark.svelte
- GraphXsToolBar.svelte
- RGIcons.svelte
- RelationGraph.svelte
- RelationGraphUI.svelte
- RelationLinker.svelte
- RelationLinkerCanvas.svelte
- RelationLinkerUI.svelte
- RGCanvas.svelte
- RGCanvasContent.svelte
- RGCanvasContent4CreatingLine.svelte
- RGCanvasContent4FakeLines.svelte
- RGCanvasContent4Lines.svelte
- RGCanvasContent4Nodes.svelte
- RGEasyView.svelte
- RGFakeNode.svelte
- RGGraphDefs.svelte
- RGLineContent.svelte
- RGLinePath.svelte
- RGLinePeel.svelte
- RGLineText.svelte
- RGNodeExpandHolder.svelte
- RGNodePeel.svelte
- RGProvider4Instance.svelte
- RGHooks.ts
- useGraphInstance.ts
- useGraphStore.ts
- useRelationGraph.ts
- useRGDataProvider.ts
- context.ts
- index.shared.ts
- index.ts
- index.wc.ts
- RGProvider.svelte
- types-svelte.ts
- package.json
- svelte.config.js
- tsconfig.json
- tsconfig.tsbuildinfo
- vite.config.ts
- RGConnectSource.vue
- RGConnectTarget.vue
- RGEditingConnectController.vue
- RGEditingConnectPoints.vue
- RGEditingLineController.vue
- RGEditingNearNodeWidget.vue
- RGEditingNodeController.vue
- RGEditingReferenceLine.vue
- RGEditingResize.vue
- RGMiniView.vue
- GraphBackground.vue
- GraphLoading.vue
- GraphMoveOperator.vue
- GraphOperateStuff.vue
- GraphToolBar.vue
- GraphWatermark.vue
- GraphXsToolBar.vue
- RGDebugView.vue
- RGIcons.vue
- RelationGraph.vue
- RelationGraphUI.vue
- RelationLinker.vue
- RelationLinkerCanvas.vue
- RelationLinkerUI.vue
- RGCanvas.vue
- RGCanvasContent.vue
- RGCanvasContent4CreatingLine.vue
- RGCanvasContent4FakeLines.vue
- RGCanvasContent4Lines.vue
- RGCanvasContent4Nodes.vue
- RGEasyView.vue
- RGFakeNode.vue
- RGGraphDefs.vue
- RGLineContent.vue
- RGLinePath.vue
- RGLinePeel.vue
- RGLineText.vue
- RGNodeExpandHolder.vue
- RGNodePeel.vue
- RGProvider.vue
- GraphStoreMixin.ts
- index.ts
- types-vue2.ts
- package.json
- vite.config.ts
- RGConnectSource.vue
- RGConnectTarget.vue
- RGEditingConnectController.vue
- RGEditingConnectPoints.vue
- RGEditingLineController.vue
- RGEditingLineControllerVue3.vue
- RGEditingNearNodeWidget.vue
- RGEditingNodeController.vue
- RGEditingReferenceLine.vue
- RGEditingResize.vue
- RGMiniView.vue
- RGSlotOnCanvas.vue
- RGSlotOnLine.vue
- RGSlotOnNode.vue
- RGSlotOnView.vue
- GraphBackground.vue
- GraphLoading.vue
- GraphMoveOperator.vue
- GraphOperateStuff.vue
- GraphToolBar.vue
- GraphWatermark.vue
- GraphXsToolBar.vue
- RGDebugView.vue
- RGIcons.vue
- RelationGraph.vue
- RelationGraphUI.vue
- RelationLinker.vue
- RelationLinkerCanvas.vue
- RelationLinkerUI.vue
- RGCanvas.vue
- RGCanvasContent.vue
- RGCanvasContent4CreatingLine.vue
- RGCanvasContent4FakeLines.vue
- RGCanvasContent4Lines.vue
- RGCanvasContent4Nodes.vue
- RGEasyView.vue
- RGFakeNode.vue
- RGGraphDefs.vue
- RGLineContent.vue
- RGLinePath.vue
- RGLinePeel.vue
- RGLineText.vue
- RGNodeExpandHolder.vue
- RGNodePeel.vue
- RGProvider.vue
- RGHooks.ts
- useGraphData.ts
- useGraphInstance.ts
- useGraphStore.ts
- useRelationGraph.ts
- useRelationLinker.ts
- useRGDataProvider.ts
- constants.ts
- index.shared.ts
- index.ssr.ts
- index.ts
- types-vue3.ts
- types.ts
- package.json
- README.md
- shims-vue.d.ts
- vite.config.ts
- EdgeCounter.ts
- RGDataDefine.ts
- RGDataGetter.ts
- RGDataProvider.ts
- RGDataProvider4React.ts
- RGDataProvider4Svelte.ts
- RGDataProvider4Vue2.ts
- RGDataProvider4Vue3.ts
- RGDataProvider4Vue3V1.ts
- RGLineDataUtils.ts
- RGNodeDataUtils.ts
- RGOptionsDataUtils.ts
- BasicNetworkAnalyzer.ts
- RGNetworkAnalyzer.ts
- old.ts
- RGBaseLayout.ts
- RGCenterLayout.ts
- RGCircleLayout.ts
- RGFixedLayout.ts
- RGFolderLayout.ts
- RGForceLayout.ts
- RGIOTreeLayout.ts
- RGSmartTreeLayout.ts
- RGTreeLayout.ts
- RelationGraphBase.ts
- RelationGraphCore.ts
- RelationGraphWith1View.ts
- RelationGraphWith2Data.ts
- RelationGraphWith2Data1Getter.ts
- RelationGraphWith2Data2Analysis.ts
- RelationGraphWith2Data3Update.ts
- RelationGraphWith2Data4ConnectTarget.ts
- RelationGraphWith2Data5LineConfig.ts
- RelationGraphWith3Options1Update.ts
- RelationGraphWith3Options2API.ts
- RelationGraphWith4Line.ts
- RelationGraphWith5Zoom.ts
- RelationGraphWith6Effect.ts
- RelationGraphWith6Layout.ts
- RelationGraphWith7Event.ts
- RelationGraphWith91Editing.ts
- RelationGraphWith92MiniView.ts
- RelationGraphWith93Image.ts
- RelationGraphWith93Image_codes.ts
- RelationGraphWith95Dom.ts
- RelationGraphWith99API.ts
- RelationGraphWith9EasyView.ts
- RGLinePath.ts
- RGLinePathUtils.ts
- RGPathGeneratorFor1.ts
- RGPathGeneratorFor4.ts
- RGPathGeneratorFor44.ts
- RGPathGeneratorFor49.ts
- RGPathGeneratorFor6.ts
- RGPathGeneratorFor8.ts
- RGPathGeneratorForCurve.ts
- RGCanvasImpl2D.ts
- RGCanvasImplWebGL.ts
- RGClassAndRender.ts
- RGCommon.ts
- RGDragUtils.ts
- RGFullscreenUtils.ts
- RGGraphMath.ts
- RGIconsData.ts
- RGIntergration.ts
- RGNodesAnalytic.ts
- RGTips.ts
- constants.ts
- RGObjectsForExport.ts
- relation-graph-rg-editing-line.scss
- relation-graph-rg-miniview.scss
- relation-graph-rg-refer-line.scss
- relation-graph-rg-resize.scss
- relation-graph-toolbar.scss
- relation-graph.scss
- types.ts
- package.json
- README-zh.md
- README.md
- package.json
- README-zh.md
- README.md
- package.json
- README-zh.md
- README.md
- package.json
- README-zh.md
- README.md
- package.json
- README-zh.md
- README.md
- RGConnectSource.d.ts
- RGConnectTarget.d.ts
- RGEditingConnectController.d.ts
- RGEditingConnectPoints.d.ts
- RGEditingLineController.d.ts
- RGEditingNearNodeWidget.d.ts
- RGEditingNodeController.d.ts
- RGEditingReferenceLine.d.ts
- RGEditingResize.d.ts
- RGMiniView.d.ts
- RGSlotOnCanvas.d.ts
- RGSlotOnCanvasAbove.d.ts
- RGSlotOnLine.d.ts
- RGSlotOnLineText.d.ts
- RGSlotOnNode.d.ts
- RGSlotOnNodeExpandHandle.d.ts
- RGSlotOnView.d.ts
- RGStore.d.ts
- index.d.ts
- GraphBackground.d.ts
- GraphLoading.d.ts
- GraphMoveOperator.d.ts
- GraphOperateStuff.d.ts
- GraphToolBar.d.ts
- GraphWatermark.d.ts
- GraphXsToolBar.d.ts
- RGDebugView.d.ts
- RGIcons.d.ts
- RelationGraphUI.d.ts
- RelationGraphView.d.ts
- RelationLinkerCanvas.d.ts
- RelationLinkerUI.d.ts
- RelationLinkerView.d.ts
- RGCanvas.d.ts
- RGCanvasContent.d.ts
- RGCanvasContent4CreatingLine.d.ts
- RGCanvasContent4FakeLines.d.ts
- RGCanvasContent4Lines.d.ts
- RGCanvasContent4Nodes.d.ts
- RGEasyView.d.ts
- RGFakeNode.d.ts
- RGGraphRefs.d.ts
- RGLineContent.d.ts
- RGLinePath.d.ts
- RGLinePeel.d.ts
- RGLineText.d.ts
- RGNodeExpandHolder.d.ts
- RGNodePeel.d.ts
- RGDataProvider.d.ts
- RGHooks.d.ts
- useFakeNodesState.d.ts
- useGraphInstance.d.ts
- useGraphStore.d.ts
- useRelationGraph.d.ts
- useRelationLinker.d.ts
- RelationGraph.d.ts
- RelationLinker.d.ts
- RGProvider.d.ts
- constants.d.ts
- index.d.ts
- index.shared.d.ts
- index.ssr.d.ts
- types-react.d.ts
- RGConnectSource.svelte.d.ts
- RGConnectTarget.svelte.d.ts
- RGConnectTargetUI.svelte.d.ts
- RGEditingConnectController.svelte.d.ts
- RGEditingConnectPoints.svelte.d.ts
- RGEditingLineController.svelte.d.ts
- RGEditingLineControllerUI.svelte.d.ts
- RGEditingNearNodeWidget.svelte.d.ts
- RGEditingNodeController.svelte.d.ts
- RGEditingNodeControllerUI.svelte.d.ts
- RGEditingReferenceLine.svelte.d.ts
- RGEditingResize.svelte.d.ts
- RGEditingResizeUI.svelte.d.ts
- RGMiniView.svelte.d.ts
- RGMiniViewContent.svelte.d.ts
- RelationGraphWithProvider.svelte.d.ts
- RGConnectTarget.svelte.d.ts
- RGEditingConnectController.svelte.d.ts
- RGEditingLineController.svelte.d.ts
- RGEditingNearNodeWidget.svelte.d.ts
- RGEditingNodeController.svelte.d.ts
- RGEditingReferenceLine.svelte.d.ts
- RGEditingResize.svelte.d.ts
- RGLineContent.svelte.d.ts
- RGMiniView.svelte.d.ts
- WebComponentStyleVariables.d.ts
- WebComponentUtils.d.ts
- GraphBackground.svelte.d.ts
- GraphLoading.svelte.d.ts
- GraphMoveOperator.svelte.d.ts
- GraphOperateStuff.svelte.d.ts
- GraphWatermark.svelte.d.ts
- GraphXsToolBar.svelte.d.ts
- RGIcons.svelte.d.ts
- RelationGraph.svelte.d.ts
- RelationGraphUI.svelte.d.ts
- RelationGraphWithProvider.svelte.d.ts
- RelationLinker.svelte.d.ts
- RelationLinkerCanvas.svelte.d.ts
- RelationLinkerUI.svelte.d.ts
- RGCanvas.svelte.d.ts
- RGCanvasContent.svelte.d.ts
- RGCanvasContent4CreatingLine.svelte.d.ts
- RGCanvasContent4FakeLines.svelte.d.ts
- RGCanvasContent4Lines.svelte.d.ts
- RGCanvasContent4Nodes.svelte.d.ts
- RGEasyView.svelte.d.ts
- RGFakeNode.svelte.d.ts
- RGGraphDefs.svelte.d.ts
- RGLineContent.svelte.d.ts
- RGLinePath.svelte.d.ts
- RGLinePeel.svelte.d.ts
- RGLineText.svelte.d.ts
- RGNodeExpandHolder.svelte.d.ts
- RGNodePeel.svelte.d.ts
- RGProvider4Instance.svelte.d.ts
- RGHooks.d.ts
- useGraphInstance.d.ts
- useGraphStore.d.ts
- useRelationGraph.d.ts
- useRGDataProvider.d.ts
- context.d.ts
- index.d.ts
- index.shared.d.ts
- index.wc.d.ts
- RGProvider.svelte.d.ts
- types-svelte.d.ts
- RGConnectSource.vue.d.ts
- RGConnectTarget.vue.d.ts
- RGEditingConnectController.vue.d.ts
- RGEditingConnectPoints.vue.d.ts
- RGEditingLineController.vue.d.ts
- RGEditingNearNodeWidget.vue.d.ts
- RGEditingNodeController.vue.d.ts
- RGEditingReferenceLine.vue.d.ts
- RGEditingResize.vue.d.ts
- RGMiniView.vue.d.ts
- GraphBackground.vue.d.ts
- GraphLoading.vue.d.ts
- GraphMoveOperator.vue.d.ts
- GraphOperateStuff.vue.d.ts
- GraphToolBar.vue.d.ts
- GraphWatermark.vue.d.ts
- GraphXsToolBar.vue.d.ts
- RGDebugView.vue.d.ts
- RelationGraph.vue.d.ts
- RelationGraphUI.vue.d.ts
- RelationLinker.vue.d.ts
- RelationLinkerCanvas.vue.d.ts
- RelationLinkerUI.vue.d.ts
- RGCanvas.vue.d.ts
- RGCanvasContent.vue.d.ts
- RGCanvasContent4CreatingLine.vue.d.ts
- RGCanvasContent4FakeLines.vue.d.ts
- RGCanvasContent4Lines.vue.d.ts
- RGCanvasContent4Nodes.vue.d.ts
- RGEasyView.vue.d.ts
- RGFakeNode.vue.d.ts
- RGGraphDefs.vue.d.ts
- RGLineContent.vue.d.ts
- RGLinePath.vue.d.ts
- RGLinePeel.vue.d.ts
- RGNodeExpandHolder.vue.d.ts
- RGNodePeel.vue.d.ts
- RGProvider.vue.d.ts
- GraphStoreMixin.d.ts
- index.d.ts
- types-vue2.d.ts
- vite.config.d.ts
- RGHooks.d.ts
- useGraphData.d.ts
- useGraphInstance.d.ts
- useGraphStore.d.ts
- useRelationGraph.d.ts
- useRelationLinker.d.ts
- useRGDataProvider.d.ts
- constants.d.ts
- index.d.ts
- index.shared.d.ts
- index.ssr.d.ts
- types-vue3.d.ts
- types.d.ts
- vite.config.d.ts
- EdgeCounter.d.ts
- RGDataDefine.d.ts
- RGDataGetter.d.ts
- RGDataProvider.d.ts
- RGDataProvider4React.d.ts
- RGDataProvider4Svelte.d.ts
- RGDataProvider4Vue2.d.ts
- RGDataProvider4Vue3.d.ts
- RGDataProvider4Vue3V1.d.ts
- RGLineDataUtils.d.ts
- RGNodeDataUtils.d.ts
- RGOptionsDataUtils.d.ts
- BasicNetworkAnalyzer.d.ts
- RGNetworkAnalyzer.d.ts
- old.d.ts
- RGBaseLayout.d.ts
- RGCenterLayout.d.ts
- RGCircleLayout.d.ts
- RGFixedLayout.d.ts
- RGFolderLayout.d.ts
- RGForceLayout.d.ts
- RGIOTreeLayout.d.ts
- RGSmartTreeLayout.d.ts
- RGTreeLayout.d.ts
- RelationGraphBase.d.ts
- RelationGraphCore.d.ts
- RelationGraphWith1View.d.ts
- RelationGraphWith2Data.d.ts
- RelationGraphWith2Data1Getter.d.ts
- RelationGraphWith2Data2Analysis.d.ts
- RelationGraphWith2Data3Update.d.ts
- RelationGraphWith2Data4ConnectTarget.d.ts
- RelationGraphWith2Data5LineConfig.d.ts
- RelationGraphWith3Options1Update.d.ts
- RelationGraphWith3Options2API.d.ts
- RelationGraphWith4Line.d.ts
- RelationGraphWith5Zoom.d.ts
- RelationGraphWith6Effect.d.ts
- RelationGraphWith6Layout.d.ts
- RelationGraphWith7Event.d.ts
- RelationGraphWith91Editing.d.ts
- RelationGraphWith92MiniView.d.ts
- RelationGraphWith93Image.d.ts
- RelationGraphWith93Image_codes.d.ts
- RelationGraphWith95Dom.d.ts
- RelationGraphWith99API.d.ts
- RelationGraphWith9EasyView.d.ts
- RGLinePath.d.ts
- RGLinePathUtils.d.ts
- RGPathGeneratorFor1.d.ts
- RGPathGeneratorFor4.d.ts
- RGPathGeneratorFor44.d.ts
- RGPathGeneratorFor49.d.ts
- RGPathGeneratorFor6.d.ts
- RGPathGeneratorFor8.d.ts
- RGPathGeneratorForCurve.d.ts
- RGCanvasImpl2D.d.ts
- RGCanvasImplWebGL.d.ts
- RGClassAndRender.d.ts
- RGCommon.d.ts
- RGDragUtils.d.ts
- RGFullscreenUtils.d.ts
- RGGraphMath.d.ts
- RGIconsData.d.ts
- RGIntergration.d.ts
- RGNodesAnalytic.d.ts
- RGTips.d.ts
- constants.d.ts
- RGObjectsForExport.d.ts
- types.d.ts
- types.ts
- components.d.ts
- .editorconfig
- .eslintignore
- .eslintrc.json
- .gitignore
- .npmcommand
- .npmignore
- LICENSE
- package.json
- README-zh.md
- README.md
- tsconfig.json
๐ Installation Guide
1. Get the code
git clone https://github.com/relation-graph/relation-graph
Downloads the entire project code from GitHub to your computer.
cd relation-graph
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
npm install
Downloads and installs the libraries listed in package.json.
npm start
Starts the development/run server.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
// repository documentation
Was this content helpful?
(0 ratings)
