Relation Graph

Using Vue3

This page is the Vue3 quick start for relation-graph, aligned with ai-prompts/relation-graph-guide.md.

1. Install

npm install --save @relation-graph/vue

Legacy package names such as relation-graph-vue3 are still commonly used in existing projects.

2. Core Components

RGProvider: provides graph context (instance + reactive state).
RelationGraph: renders the graph view.
RGHooks: gets graph instance/state inside components under RGProvider.

3. Minimal Vue3 Setup

MyGraphComponent.vue

<template>
  <RGProvider>
    <MyGraph />
  </RGProvider>
</template>

<script setup lang="ts">
import { RGProvider } from '@relation-graph/vue';
import MyGraph from './MyGraph.vue';
</script>

MyGraph.vue

<template>
  <div style="width: 100vw; height: 100vh; background-color: #ffffff;">
    <RelationGraph :options="graphOptions" />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { RelationGraph, RGHooks } from '@relation-graph/vue';
import type { JsonNode, JsonLine, RGOptions } from '@relation-graph/vue';

const graphInstance = RGHooks.useGraphInstance();

const graphOptions: RGOptions = {
  showToolBar: false,
  wheelEventAction: 'scroll',
  dragEventAction: 'move',
  layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 150,
    treeNodeGapV: 10
  }
};

const initializeGraph = () => {
  const nodes: JsonNode[] = [
    { id: '1', text: 'Root' },
    { id: '2', text: 'Vue3 App' },
    { id: '3', text: 'Graph Engine' },
    { id: '4', text: 'UI Layer' }
  ];
  const lines: JsonLine[] = [
    { from: '1', to: '2', text: 'uses' },
    { from: '1', to: '3', text: 'drives' },
    { from: '2', to: '4', text: 'renders' }
  ];

  graphInstance.clearGraph();
  graphInstance.addNodes(nodes);
  graphInstance.addLines(lines);

  setTimeout(() => {
    const layouter = graphInstance.createLayout({
      layoutName: 'tree',
      from: 'left',
      treeNodeGapH: 150,
      treeNodeGapV: 10
    });
    const allNodes = graphInstance.getNodes();
    const rootNode = graphInstance.getNodeById('1');
    if (rootNode) {
      layouter.placeNodes(allNodes, rootNode);
    }
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
  }, 300);
};

onMounted(() => {
  initializeGraph();
});
</script>

4. Data Input Strategies

addNodes + addLines + custom layout for dynamic updates.
setJsonData for one-shot full graph initialization.
initialData prop for initial/SSR-friendly rendering.

4.1 One-shot via `setJsonData`

graphInstance.setJsonData({
  rootId: '1',
  nodes,
  lines
});

4.2 Initial data via `initialData`

<RelationGraph
  :options="graphOptions"
  :initialData="{ rootId: '1', nodes, lines }"
/>

5. Register Events

<RelationGraph
  :options="graphOptions"
  @onNodeClick="onNodeClick"
  @onLineClick="onLineClick"
/>

import type { RGNode, RGLine, RGLink, RGUserEvent } from '@relation-graph/vue';

const onNodeClick = (nodeObject: RGNode, event: RGUserEvent) => {
  console.log('node click:', nodeObject.id, event);
};

const onLineClick = (lineObject: RGLine, linkObject: RGLink, event: RGUserEvent) => {
  console.log('line click:', lineObject.from, lineObject.to, linkObject, event);
};

6. Access Runtime State with `RGHooks`

const graphInstance = RGHooks.useGraphInstance();
const creatingLine = RGHooks.useCreatingLine();
const creatingNode = RGHooks.useCreatingNode();
const editingNodes = RGHooks.useEditingNodes();
const editingLine = RGHooks.useEditingLine();
const connectingNode = RGHooks.useConnectingNode();
const viewInformation = RGHooks.useViewInformation();
const selectionView = RGHooks.useSelectionView();
const checkedItem = RGHooks.useCheckedItem();

7. Practical Notes

<RelationGraph> size is fully determined by the parent container size.
options is an initial config object; for runtime changes use instance APIs like graphInstance.updateOptions(...).
If RGProvider persists while the graph view component remounts, clear old data before loading new data.
For editor-like apps, prefer granular update APIs over frequent setJsonData calls.