### Implement minimal React graph setup

Source: https://relation-graph.com/docs/start-react

A complete example showing the use of RGProvider, RelationGraph, and RGHooks to initialize and render a graph.

```typescript
import React, { useEffect } from 'react';
import { RGProvider, RelationGraph, RGHooks } from '@relation-graph/react';
import type { JsonNode, JsonLine, RGOptions } from '@relation-graph/react';

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

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

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

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

    // If node width/height are not preset, wait for node size measurement before layout.
    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);
  };

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

  return (
    <div style={{ width: '100vw', height: '100vh', backgroundColor: '#ffffff' }}>
      <RelationGraph options={graphOptions} />
    </div>
  );
};

const MyGraphPage: React.FC = () => {
  return (
    <RGProvider>
      <GraphView />
    </RGProvider>
  );
};

export default MyGraphPage;
```

--------------------------------

### Install relation-graph package

Source: https://relation-graph.com/docs/start-react

Use npm to install the recommended React package.

```bash
npm install --save @relation-graph/react
```

--------------------------------

### Install Relation Graph packages

Source: https://relation-graph.com/docs/introduction

Use these commands to install the appropriate package for your specific framework.

```bash
# Vue2
npm install --save @relation-graph/vue2

# Vue3
npm install --save @relation-graph/vue

# React
npm install --save @relation-graph/react

# Svelte
npm install --save @relation-graph/svelte

# HTML / Web Components
npm install --save @relation-graph/web-components
```

--------------------------------

### Run Default Build Command

Source: https://relation-graph.com/docs/example-content-build

Executes the default build process for relation-graph examples.

```bash
yarn generate:relation-graph
```

--------------------------------

### Run Full Build Mode

Source: https://relation-graph.com/docs/example-content-build

Forces a full regeneration of all example detail pages and refreshes the cache.

```bash
RG_EXAMPLES_PRERENDER_MODE=full yarn generate:relation-graph
```

--------------------------------

### Minimal Vue3 Setup

Source: https://relation-graph.com/docs/start-vue3

Basic structure for integrating the graph component within a provider.

```vue
<template>
  <RGProvider>
    <MyGraph />
  </RGProvider>
</template>

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

```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>
```

--------------------------------

### Free Example Check Logic

Source: https://relation-graph.com/docs/example-content-build

Conditional check used during the build process to determine if an example is free and eligible for source injection.

```javascript
!example.meta?.vip && !example.meta?.entVip
```

--------------------------------

### Install relation-graph for Svelte

Source: https://relation-graph.com/docs/start-svelte

Install the required package via npm.

```bash
npm install --save @relation-graph/svelte
```

--------------------------------

### Setup Minimal Svelte Graph Component

Source: https://relation-graph.com/docs/start-svelte

Wrap the graph component with the RGProvider to enable context.

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

<RGProvider>
  <MyGraph />
</RGProvider>
```

--------------------------------

### Clone and run a React starter project

Source: https://relation-graph.com/docs/start-run

Use these commands to download, install dependencies, and launch the development server for the React starter project.

```bash
git clone https://github.com/relation-graph/relation-graph-startup-for-react
cd relation-graph-startup-for-react
npm install
npm run dev
```

--------------------------------

### Include via CDN

Source: https://relation-graph.com/docs/wiki/10

Example of loading the library directly in the browser using a UMD script tag.

```html
<script src="https://unpkg.com/relation-graph@3.0.0/lib/vue2/relation-graph.umd.js"></script>
```

--------------------------------

### Configure Force-Directed Layout

Source: https://relation-graph.com/docs/wiki/5

Example configuration object for the force-directed layout, including physics simulation parameters and iteration limits.

```javascript
layoutOptions: {
  layoutName: 'force',
  fastStart: false,           // Skip initial positioning
  maxLayoutTimes: 300,         // Maximum iterations
  byNode: true,                // Enable node repulsion
  byLine: true,                // Enable line attraction
  force_node_repulsion: 1,     // Repulsion strength
  force_line_elastic: 1        // Attraction strength
}
```

--------------------------------

### Configure Tree Layout

Source: https://relation-graph.com/docs/wiki/5

Example configuration object for the tree layout, defining direction, spacing, and alignment.

```javascript
layoutOptions: {
  layoutName: 'tree',
  from: 'left',
  treeNodeGapH: 50,
  treeNodeGapV: 10,
  alignItemsX: 'end',
  alignItemsY: 'center',
  levelGaps: [100, 150, 200]
}
```

--------------------------------

### Minimal Vue2 Component Setup

Source: https://relation-graph.com/docs/start-vue2

Structure your application using RGProvider and a custom graph component.

```vue
<template>
  <RGProvider>
    <MyGraph />
  </RGProvider>
</template>

<script>
import { RGProvider } from '@relation-graph/vue2';
import MyGraph from './MyGraph.vue';

export default {
  name: 'MyGraphComponent',
  components: { RGProvider, MyGraph }
};
</script>
```

```vue
<template>
  <div style="width: 100vw; height: 100vh; background-color: #ffffff;">
    <RelationGraph :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
  </div>
</template>

<script>
import { RelationGraph, graphStoreMixin } from '@relation-graph/vue2';

export default {
  name: 'MyGraph',
  components: { RelationGraph },
  mixins: [graphStoreMixin],
  data() {
    return {
      graphOptions: {
        showToolBar: false,
        wheelEventAction: 'scroll',
        dragEventAction: 'move',
        layout: {
          layoutName: 'tree',
          from: 'left',
          treeNodeGapH: 150,
          treeNodeGapV: 10
        }
      }
    };
  },
  mounted() {
    this.initializeGraph();
  },
  methods: {
    initializeGraph() {
      const graphInstance = this.graphInstance;
      const nodes = [
        { id: '1', text: 'Root' },
        { id: '2', text: 'Vue2 App' },
        { id: '3', text: 'Graph Engine' }
      ];
      const lines = [
        { from: '1', to: '2', text: 'uses' },
        { from: '1', to: '3', text: 'drives' }
      ];

      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);
    },
    onNodeClick(nodeObject, event) {
      console.log('node click:', nodeObject && nodeObject.id, event);
    },
    onLineClick(lineObject, linkObject, event) {
      console.log('line click:', lineObject && lineObject.from, lineObject && lineObject.to, linkObject, event);
    }
  }
};
</script>
```

--------------------------------

### Local Cache Directory Path

Source: https://relation-graph.com/docs/example-content-build

The default location for the relation-graph example prerender cache.

```text
.cache/relation-graph-example-prerender/
```

--------------------------------

### Output Public Directory Path

Source: https://relation-graph.com/docs/example-content-build

The target directory where cached example routes are restored during changed or skip build modes.

```text
apps/relation-graph-site/.output/public
```

--------------------------------

### Coordinate Conversion Example

Source: https://relation-graph.com/docs/slot-canvas

Demonstrates converting mouse client coordinates to canvas coordinates for placing markers.

```typescript
function createMarker(event: MouseEvent) {
  const point = graphInstance.getCanvasXyByClientXy({
    x: event.clientX,
    y: event.clientY
  });

  markers.value.push({
    id: `marker-${Date.now()}`,
    x: point.x,
    y: point.y,
    text: 'New Marker'
  });
}
```

--------------------------------

### Node Data Configuration

Source: https://relation-graph.com/docs/styling

Example of a node data object including custom class names and styling properties.

```javascript
{
  id: 'api',
  text: 'API',
  type: 'service',
  className: 'node-error',
  color: '#fef2f2',
  borderColor: '#dc2626'
}
```

--------------------------------

### Initialize Relation Graph in HTML

Source: https://relation-graph.com/docs/start-html

A complete example showing how to define the custom element and interact with the graph instance after the onReady event fires.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RelationGraph Web Components</title>
  </head>
  <body>
    <div style="width: 100vw; height: 100vh; background-color: #ffffff;">
      <relation-graph id="my-graph"></relation-graph>
    </div>

    <script type="module">
      import * as rg from 'https://unpkg.com/relation-graph-webcomponents@latest/lib/relation-graph-webcomponents.mjs';

      const rgElement = document.getElementById('my-graph');
      let graphInstance;

      const graphOptions = {
        showToolBar: false,
        wheelEventAction: 'scroll',
        dragEventAction: 'move'
      };

      const jsonData = {
        rootId: 'node-a',
        nodes: [
          { id: 'node-a', text: 'Alpha' },
          { id: 'node-b', text: 'Beta' },
          { id: 'node-c', text: 'Gamma' }
        ],
        lines: [
          { from: 'node-a', to: 'node-b', text: 'A -> B' },
          { from: 'node-b', to: 'node-c', text: 'B -> C' }
        ]
      };

      const initializeGraph = () => {
        graphInstance.setJsonData(jsonData);
        graphInstance.moveToCenter();
        graphInstance.zoomToFit();
      };

      rgElement.addEventListener('onReady', (event) => {
        graphInstance = event.detail[0];
        graphInstance.updateOptions(graphOptions);
        initializeGraph();
      });

      rgElement.addEventListener('onNodeClick', (event) => {
        const [node] = event.detail;
        console.log('node click:', node && node.id);
      });

      rgElement.addEventListener('onLineClick', (event) => {
        const [line] = event.detail;
        console.log('line click:', line && line.from, line && line.to);
      });
    </script>
  </body>
</html>
```

--------------------------------

### Interactive Canvas Button Example

Source: https://relation-graph.com/docs/slot-canvas

A Vue template example showing an interactive button inside the canvas layer with event propagation stopped.

```html
<template #canvas>
  <button
    class="marker-button rg-events-all"
    :style="{ left: marker.x + 'px', top: marker.y + 'px' }"
    @mousedown.stop
    @click.stop="openMarker(marker)"
  >
    {{ marker.text }}
  </button>
</template>
```

--------------------------------

### Update RelationGraph Options

Source: https://relation-graph.com/docs/wiki/11

Examples of using setOptions to modify layout, styling, zoom, and interaction settings at runtime.

```javascript
// Update layout algorithm
graphInstance.setOptions({
  layout: { layoutName: 'force', force_node_repulsion: 2 }
});

// Update visual styling
graphInstance.setOptions({
  defaultNodeColor: '#ff0000',
  defaultLineColor: '#0000ff'
});

// Update zoom level (triggers node/line re-render in performance mode)
graphInstance.setOptions({
  canvasZoom: 150
});

// Disable user interactions
graphInstance.setOptions({
  disableDragNode: true,
  disableWheelEvent: true
});
```

--------------------------------

### Redirect Legacy URL Patterns

Source: https://relation-graph.com/docs/example-content-build

Examples of legacy URL structures that are redirected to the new static HTML variant paths.

```text
/zh/examples/basic-custom-node-and-minimap?lang=vue3
```

```text
/zh/examples/basic-custom-node-and-minimap/vue3
```

--------------------------------

### Install Relation Graph for Vue2

Source: https://relation-graph.com/docs/start-vue2

Use npm to add the relation-graph package to your Vue2 project.

```bash
npm install --save @relation-graph/vue2
```

--------------------------------

### Line Data Configuration

Source: https://relation-graph.com/docs/styling

Example data object used to configure line properties such as dash types and animations.

```javascript
{
  id: 'line-a-b',
  from: 'a',
  to: 'b',
  text: 'Warning path',
  className: 'line-warning',
  color: '#f59e0b',
  lineWidth: 3,
  dashType: 2,
  animation: 1
}
```

--------------------------------

### Install Relation Graph via CDN or ESM

Source: https://relation-graph.com/docs/start-html

Use these methods to include the library in a plain HTML file. The ESM approach is recommended for modern browser environments.

```html
<script src="https://unpkg.com/relation-graph-webcomponents@latest/lib/relation-graph-webcomponents.min.js"></script>
```

```html
<script type="module">
  import * as rg from 'https://unpkg.com/relation-graph-webcomponents@latest/lib/relation-graph-webcomponents.mjs';
</script>
```

--------------------------------

### Root Node State Styling

Source: https://relation-graph.com/docs/styling

Example of applying styles based on the root node's runtime state, such as changing the cursor during line creation.

```css
.my-graph .relation-graph.rg-creating-line {
  cursor: crosshair;
}
```

--------------------------------

### Implement a fixed toolbar using #view

Source: https://relation-graph.com/docs/slot-view

A Vue 3 example demonstrating a floating toolbar that remains fixed relative to the viewport while controlling graph zoom and position.

```vue
<script setup lang="ts">
import { shallowRef } from 'vue';
import type { RelationGraphInstance } from '@relation-graph/vue';

const graphInstance = shallowRef<RelationGraphInstance | null>(null);

function onReady(instance: RelationGraphInstance) {
  graphInstance.value = instance;
}

function centerGraph() {
  graphInstance.value?.moveToCenter();
}

function zoomIn() {
  graphInstance.value?.zoom(20);
}

function zoomOut() {
  graphInstance.value?.zoom(-20);
}
</script>

<template>
  <RelationGraph
    :options="graphOptions"
    :initial-data="graphData"
    @onReady="onReady"
  >
    <template #view>
      <div class="floating-toolbar rg-events-all">
        <button @click="centerGraph">Center</button>
        <button @click="zoomIn">Zoom In</button>
        <button @click="zoomOut">Zoom Out</button>
      </div>
    </template>
  </RelationGraph>
</template>
```

```css
.floating-toolbar {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
}
```

--------------------------------

### Define Alignment Guide State

Source: https://relation-graph.com/docs/wiki/11

Represents the state object for tracking alignment guide visibility and positioning.

```typescript
{
  show: boolean,       // Whether guides are visible
  directionV: boolean, // Vertical guide active
  directionH: boolean, // Horizontal guide active
  v_x, v_y, v_height,  // Vertical guide position
  h_x, h_y, h_width    // Horizontal guide position
}
```

--------------------------------

### Initialize and Configure Graph

Source: https://relation-graph.com/docs/start-svelte

Use RGHooks to manage the graph instance and define layout options.

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

  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: 'Svelte App' },
      { id: '3', text: 'Graph Engine' }
    ];
    const lines: JsonLine[] = [
      { from: '1', to: '2', text: 'uses' },
      { from: '1', to: '3', text: 'drives' }
    ];

    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);
  };

  onMount(() => {
    initializeGraph();
  });

  const onNodeClick = (event) => {
    const [nodeObject, nativeEvent] = event.detail;
    console.log('node click:', nodeObject && nodeObject.id, nativeEvent);
  };

  const onLineClick = (event) => {
    const [lineObject, linkObject, nativeEvent] = event.detail;
    console.log('line click:', lineObject && lineObject.from, lineObject && lineObject.to, linkObject, nativeEvent);
  };
</script>

<div style="width: 100vw; height: 100vh; background-color: #ffffff;">
  <RelationGraph
    options={graphOptions}
    on:onNodeClick={onNodeClick}
    on:onLineClick={onLineClick}
  />
</div>
```

--------------------------------

### Visualize Configuration Initialization Flow

Source: https://relation-graph.com/docs/wiki/11

A Mermaid diagram illustrating the sequence of operations during graph instance initialization.

```mermaid
graph LR
    INSTANCE_ID["instanceId Generation  
RGIns-{index}"]
    TEMPLATE_INIT["Template Initialization  
newNodeTemplate  
newLineTemplate"]
    CONTROLLER_SETUP["Controller Setup  
editingController  
editingLineController"]
    VIEW_CONFIG["View Configuration  
viewSize, viewELSize  
canvasNVInfo"]

    INSTANCE_ID --> TEMPLATE_INIT
    TEMPLATE_INIT --> CONTROLLER_SETUP
    CONTROLLER_SETUP --> VIEW_CONFIG

    style INSTANCE_ID fill:#e8f5e8
    style VIEW_CONFIG fill:#e1f5fe
```

--------------------------------

### graphInstance.getArrowMarkerId(line, isStartArrow)

Source: https://relation-graph.com/docs/slot-line

Gets the start/end arrow marker reference.

```APIDOC
## graphInstance.getArrowMarkerId(line, isStartArrow)

### Description
Retrieves the ID of the arrow marker for the start or end of a line.

### Parameters
- **line** (object) - Required - The line object.
- **isStartArrow** (boolean) - Required - Whether to get the start arrow (true) or end arrow (false).
```

--------------------------------

### graphInstance.getViewXyByEvent

Source: https://relation-graph.com/docs/slot-canvas

Gets viewport coordinates directly from a mouse or touch event.

```APIDOC
## graphInstance.getViewXyByEvent(event)

### Description
Extracts viewport coordinates directly from a mouse or touch event object.

### Parameters
- **event** (Event) - Required - The mouse or touch event object.

### Response
- **x** (number) - The viewport X coordinate.
- **y** (number) - The viewport Y coordinate.
```

--------------------------------

### Define Initial Graph Options

Source: https://relation-graph.com/docs/options

Configure the initial state of the graph instance using a configuration object.

```javascript
const graphOptions = {
  instanceId: 'main-graph',
  showToolBar: false,
  wheelEventAction: 'scroll',
  dragEventAction: 'move',
  defaultNodeColor: '#ffffff',
  defaultLineColor: '#cbd5e1',
  layout: {
    layoutName: 'center'
  }
};
```

--------------------------------

### startCreatingLinePlot()

Source: https://relation-graph.com/docs/wiki/8

Initiates the interactive line creation mode, allowing users to select source and target nodes to create connections.

```APIDOC
## startCreatingLinePlot()

### Description
Initiates the interactive line creation mode. This mode allows users to interactively create connections by selecting source and target nodes.

### Method
Method call

### Usage
`startCreatingLinePlot()`
```

--------------------------------

### Define Zero Runtime Dependencies

Source: https://relation-graph.com/docs/wiki/12

Configuration snippet showing empty dependencies for package.json.

```json
"dependencies": {}
```

--------------------------------

### Define a minimal line

Source: https://relation-graph.com/docs/data-line

A basic line object requiring only the start and end node identifiers.

```javascript
const line = {
  from: 'node-a',
  to: 'node-b'
};
```

--------------------------------

### Define Basic Layout Configuration

Source: https://relation-graph.com/docs/options

Initializes the graph options with a specific layout name.

```javascript
const graphOptions = {
  layout: {
    layoutName: 'tree'
  }
};
```

--------------------------------

### Rendering Canvas Markers

Source: https://relation-graph.com/docs/slot-canvas

Example of rendering markers using canvas coordinates within a Vue template.

```html
<template #canvas>
  <div
    v-for="marker in markers"
    :key="marker.id"
    class="canvas-marker"
    :style="{
      left: marker.x + 'px',
      top: marker.y + 'px'
    }"
  >
    {{ marker.text }}
  </div>
</template>
```

--------------------------------

### Implement #background Layer

Source: https://relation-graph.com/docs/slot-view

Shows how to add static background content using Vue or React, and the associated CSS for styling.

```html
<div class="rg-map-background">
  <!-- #background -->
</div>
```

```vue
<template #background>
  <div class="graph-background">
    <div class="watermark">Relation Graph</div>
  </div>
</template>
```

```jsx
import { RelationGraph, RGBackground } from '@relation-graph/react';

<RelationGraph options={graphOptions} initialData={graphData}>
  <RGBackground>
    <div className="graph-background">
      <div className="watermark">Relation Graph</div>
    </div>
  </RGBackground>
</RelationGraph>
```

```css
.graph-background {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
}

.graph-background .watermark {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 12px;
  color: rgba(100, 116, 139, 0.5);
}
```

--------------------------------

### Query nodes from graph

Source: https://relation-graph.com/docs/data-node

Retrieve nodes by ID, get all nodes, or fetch checked and selected nodes.

```javascript
const node = graphInstance.getNodeById('n1');
const nodes = graphInstance.getNodes();
const checkedNode = graphInstance.getCheckedNode();
const selectedNodes = graphInstance.getSelectedNodes();
```

--------------------------------

### Run Build Command with Environment Variable

Source: https://relation-graph.com/docs/example-content-build

Executes the build process with the PRERENDER_MODE environment variable explicitly set.

```bash
RG_EXAMPLES_PRERENDER_MODE=changed yarn generate:relation-graph
```

--------------------------------

### Data Input Strategies

Source: https://relation-graph.com/docs/start-vue3

Methods for initializing graph data.

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

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

--------------------------------

### Get RelationGraphInstance via component ref

Source: https://relation-graph.com/docs/graph-instance-api

Alternative method to access the instance using a component reference.

```typescript
const graphInstance = graphRef.value?.getInstance?.();
```

--------------------------------

### Get RelationGraphInstance via onReady

Source: https://relation-graph.com/docs/graph-instance-api

Recommended approach to capture the instance reference once the component is fully initialized.

```typescript
let graphInstance: RelationGraphInstance | undefined;

const onReady = (instance: RelationGraphInstance) => {
  graphInstance = instance;
};
```

--------------------------------

### Configure Toolbar and View Options

Source: https://relation-graph.com/docs/options

Sets the toolbar layout and graph background appearance.

```javascript
const graphOptions = {
  showToolBar: true,
  toolBarDirection: 'v',
  toolBarPositionH: 'right',
  toolBarPositionV: 'top',
  backgroundColor: '#f8fafc'
};
```

--------------------------------

### Build Commands

Source: https://relation-graph.com/docs/example-content-build

Commands for managing the build process, including full refreshes, cache skipping, and raw Nuxt builds.

```bash
# Normal build: defaults to changed
yarn generate:relation-graph

# Force-refresh every example detail page and cache entry
RG_EXAMPLES_PRERENDER_MODE=full yarn generate:relation-graph

# Skip example detail generation and restore from cache
RG_EXAMPLES_PRERENDER_MODE=skip yarn generate:relation-graph

# Raw Nuxt static build without the example cache flow. Use only for debugging.
yarn generate:relation-graph:nuxt
```

--------------------------------

### Implement Custom Node Slot in React

Source: https://relation-graph.com/docs/slot-node

Example of using RGSlotOnNode in React to render a custom node component.

```tsx
import {
  RelationGraph,
  RGSlotOnNode,
  type RGNode
} from '@relation-graph/react';

function UserNode({ node, checked, dragging }: {
  node: RGNode;
  checked?: boolean;
  dragging?: boolean;
}) {
  return (
    <div
      className={[
        'user-node',
        node.selected ? 'is-selected' : '',
        checked ? 'is-checked' : '',
        dragging ? 'is-dragging' : ''
      ].filter(Boolean).join(' ')}
    >
      {node.data?.avatar && <img className="avatar" src={node.data.avatar} />}
      <div className="main">
        <div className="title">{node.text}</div>
        <div className="desc">{node.data?.role || 'Role not set'}</div>
      </div>
      <button
        className="rg-events-all"
        onMouseDown={(e) => e.stopPropagation()}
        onClick={(e) => {
          e.stopPropagation();
          console.log('open node:', node.id);
        }}
      >
        Details
      </button>
    </div>
  );
}

<RelationGraph options={graphOptions} initialData={graphData}>
  <RGSlotOnNode>
    {(props) => <UserNode {...props} />}
  </RGSlotOnNode>
</RelationGraph>
```

--------------------------------

### getOptions()

Source: https://relation-graph.com/docs/wiki/13

Retrieves the current complete configuration options object for the graph instance.

```APIDOC
## getOptions()

### Description
Retrieves the current complete configuration options object for the graph instance.
```

--------------------------------

### Initialize Graph with applyInitialData

Source: https://relation-graph.com/docs/data-crud

Initializes the graph and automatically centers and zooms to fit the view.

```javascript
await graphInstance.applyInitialData(data);
```

--------------------------------

### View project file structure

Source: https://relation-graph.com/docs/wiki/1

Displays the directory layout of the relation-graph monorepo, highlighting core packages and platform-specific wrappers.

```text
relation-graph-vip/
├── packages/
│   ├── types.ts                           # Core type definitions
│   └── relation-graph-models/
│       ├── models/
│       │   ├── RelationGraphBase.ts       # Base class with events
│       │   ├── RelationGraphWith*.ts      # Progressive enhancement classes
│       │   └── RelationGraphCore.ts       # Final assembled class
│       ├── layouters/
│       │   ├── RGForceLayout.ts          # Force-directed algorithm
│       │   ├── RGTreeLayout.ts           # Tree layout
│       │   └── ...                        # Other layout implementations
│       ├── data/
│       │   ├── RGNodeDataUtils.ts        # Node data transformations
│       │   └── RGLineDataUtils.ts        # Line data transformations
│       └── utils/
│           └── line/RGLinePath.ts        # Line path generation
├── platforms/
│   ├── vue2/                              # Vue 2 wrapper package
│   ├── vue3/                              # Vue 3 wrapper package
│   ├── react/                             # React wrapper package
│   ├── svelte/                            # Svelte wrapper package
│   └── web-components/                    # Web Components package
└── package.json                           # Monorepo root
```

--------------------------------

### Dynamic node and line addition

Source: https://relation-graph.com/docs/graph-instance-api

Example of generating a new node ID and adding nodes and lines to the graph dynamically.

```typescript
const nodeId = graphInstance.generateNewNodeId(8);
graphInstance.addNodes([{ id: nodeId, text: "New Node" }]);
graphInstance.addLines([{ from: "a", to: nodeId, text: "new link" }]);
graphInstance.moveToCenter();
```

--------------------------------

### Vue 3 Component Integration

Source: https://relation-graph.com/docs/wiki/2

Basic template and script setup structure for integrating RelationGraph in Vue 3 applications.

```html
Template:
  <RelationGraph :options="graphOptions" @onNodeClick="handleNodeClick">
    <!-- Custom rendering slots: #node, #line, #canvas, #canvas-above, #background -->
  </RelationGraph>

Script Setup:
  - Import RelationGraph from '@relation-graph/vue'
  - Define options as ref or reactive object
  - Use template ref with .getInstance() to access core instance
  - Event handlers registered with @eventName syntax
```

--------------------------------

### RGDragUtils Method Signature

Source: https://relation-graph.com/docs/wiki/7

Defines the core method signature for starting a drag operation with event normalization and callback handling.

```typescript
RGDragUtils.startDrag(
  e: RGUserEvent,
  basePosition: RGPosition,
  dragEnd: (x_buff, y_buff, endEvent) => void,
  dragging: (offsetX, offsetY, basePosition, startEventInfo, currentEvent) => void
)
```

--------------------------------

### Configuration Queries

Source: https://relation-graph.com/docs/wiki/13

Methods for accessing the runtime configuration and connection targets of the graph.

```APIDOC
## getOptions()
Returns the complete runtime configuration as an RGOptionsFull object.

## getConnectTargets()
Returns all available connection target points.
```

--------------------------------

### Event signature: beforeZoomStart and beforeScrollStart

Source: https://relation-graph.com/docs/events

Use these to block zoom or scroll interactions by returning specific values.

```typescript
beforeZoomStart: () => void | false
beforeScrollStart: (buffX: number, buffY: number, e: Event) => true | undefined | void
```

--------------------------------

### Implement Custom Node Slot in Svelte

Source: https://relation-graph.com/docs/slot-node

Example of using the slot="node" directive in Svelte to render custom node content.

```svelte
<RelationGraph {options} initialData={graphData}>
  <div
    slot="node"
    let:node
    let:checked
    let:dragging
    class:is-selected={node.selected}
    class:is-checked={checked}
    class:is-dragging={dragging}
    class="user-node"
  >
    {#if node.data?.avatar}
      <img class="avatar" src={node.data.avatar} alt="" />
    {/if}
    <div class="main">
      <div class="title">{node.text}</div>
      <div class="desc">{node.data?.role || 'Role not set'}</div>
    </div>
  </div>
</RelationGraph>
```

--------------------------------

### Source Snapshot Injection Template

Source: https://relation-graph.com/docs/example-content-build

The HTML script tag structure used to embed source snapshots into the generated static HTML for free examples.

```html
<script id="rg-example-source-snapshot" type="application/json">
  ...
</script>
```

--------------------------------

### Implement Custom Node Slot in Vue 3

Source: https://relation-graph.com/docs/slot-node

Example of using the #node slot in Vue 3 to render a custom node component with state-based classes.

```vue
<script setup lang="ts">
import { RelationGraph } from '@relation-graph/vue';
import type { RGNode } from '@relation-graph/vue';

function openNode(node: RGNode, event: MouseEvent) {
  event.stopPropagation();
  console.log('open node:', node.id);
}
</script>

<template>
  <RelationGraph :options="graphOptions" :initial-data="graphData">
    <template #node="{ node, checked, dragging }">
      <div
        class="user-node"
        :class="{
          'is-selected': node.selected,
          'is-checked': checked,
          'is-dragging': dragging
        }"
      >
        <img v-if="node.data?.avatar" class="avatar" :src="node.data.avatar" />
        <div class="main">
          <div class="title">{{ node.text }}</div>
          <div class="desc">{{ node.data?.role || 'Role not set' }}</div>
        </div>
        <button class="rg-events-all" @click="openNode(node, $event)">Details</button>
      </div>
    </template>
  </RelationGraph>
</template>
```

--------------------------------

### Import Components via Monolithic Package

Source: https://relation-graph.com/docs/wiki/10

Demonstrates importing the RelationGraph component from the main package using framework-specific subpaths.

```javascript
// Vue 3
import { RelationGraph } from 'relation-graph/vue3'

// React
import { RelationGraph } from 'relation-graph/react'
```

--------------------------------

### Data Addition and Positioning Workflow

Source: https://relation-graph.com/docs/wiki/13

Illustrates the sequence of adding nodes and lines to the graph instance and triggering the layout engine.

```mermaid
sequenceDiagram
    participant App
    participant Instance["graphInstance"]
    participant Provider["RGDataProvider"]
    participant Layout["Layout Engine"]

    App->>Instance: addNodes([...nodes])
    Instance->>Provider: Store nodes
    App->>Instance: addLines([...lines])
    Instance->>Provider: Store lines & create links
    App->>Instance: updateOptions({layout: {...}})
    App->>Instance: doLayout()
    Instance->>Layout: placeNodes(nodes, rootNode)
    Layout->>Provider: Update node.x, node.y
    Provider->>App: Trigger UI update
```

--------------------------------

### applyInitialData

Source: https://relation-graph.com/docs/data-crud

Initializes the graph with data and automatically adjusts the view to fit the content.

```APIDOC
## applyInitialData(data: RGJsonData)

### Description
Initializes the graph with the provided data, then centers the view and zooms to fit the entire graph on screen.

### Parameters
- **data** (RGJsonData) - Required - The initial graph data object.
```

--------------------------------

### Install Event Hooks for Vue

Source: https://relation-graph.com/docs/multi-platform-architecture

Configures the event emission hook for Vue 2 and Vue 3 to bridge core events to the framework's native emit system.

```typescript
relationGraph.setEventEmitHook((eventName: RGEventNames, ...eventArgs: any[]) => {
    this.$emit(eventName, ...eventArgs);
});
```

```typescript
rgInstance.setEventEmitHook((eventName: RGEventNames, ...eventArgs: any[]) => {
    emit(eventName, ...eventArgs);
});
```

--------------------------------

### Accessing Graph State in Vue 3

Source: https://relation-graph.com/docs/state-hooks

Use RGHooks within a child component of RelationGraph. Access state values using .value in script setup, while templates handle ref unwrapping automatically.

```typescript
<script setup lang="ts">
import { RGHooks } from '@relation-graph/vue';

const graphInstance = RGHooks.useGraphInstance();
const checkedItem = RGHooks.useCheckedItem();
const viewInformation = RGHooks.useViewInformation();
const editingNodes = RGHooks.useEditingNodes();

const removeCheckedNode = () => {
  if (checkedItem.value.checkedNodeId) {
    graphInstance.removeNodeById(checkedItem.value.checkedNodeId);
  }
};
</script>

<template>
  <div class="graph-panel">
    <span>{{ viewInformation.canvasZoom }}%</span>
    <button
      :disabled="!checkedItem.checkedNodeId"
      @click="removeCheckedNode"
    >
      Delete Node
    </button>
    <span v-if="editingNodes.show">
      Editing {{ editingNodes.nodes.length }} nodes
    </span>
  </div>
</template>
```

--------------------------------

### Define Node Creation Workflow

Source: https://relation-graph.com/docs/wiki/13

Defines the sequence for interactive node placement and the required method signature for startCreatingNodePlot.

```mermaid
sequenceDiagram
    participant User
    participant Instance["graphInstance"]
    participant Canvas["Canvas DOM"]

    User->>Instance: startCreatingNodePlot(e, {  
  templateNode: {...},  
  onCreateNode: callback  
})
    Instance->>Canvas: Listen for mousemove
    Canvas-->>Instance: Mouse moves
    Instance->>Canvas: Update template node position
    Canvas-->>Instance: User clicks
    Instance->>User: Call onCreateLine(x, y, template)
    User->>Instance: addNodes([newNode])
    Instance->>Canvas: Remove listeners
```

```typescript
startCreatingNodePlot(e: RGUserEvent, setting: {
  templateNode: Partial<JsonNode>,  // Visual template while placing
  onCreateNode: (x: number, y: number, template: RGNode) => void,
  templateMove?: (x: number, y: number) => void  // Optional tracking
})
```

--------------------------------

### Configure Layout via Graph Options

Source: https://relation-graph.com/docs/layout-builtin

Define the layout algorithm and its specific parameters within the graph configuration object.

```javascript
const graphOptions = {
  layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 150,
    treeNodeGapV: 10
  }
};
```

--------------------------------

### Import Components via Framework-Specific Package

Source: https://relation-graph.com/docs/wiki/10

Demonstrates importing the RelationGraph component from dedicated framework-specific packages.

```javascript
// Vue 2
import { RelationGraph } from 'relation-graph-vue2'

// React
import { RelationGraph } from 'relation-graph-react'
```

--------------------------------

### Update node properties via hooks and instance APIs

Source: https://relation-graph.com/docs/state-hooks

Demonstrates the recommended pattern of reading state via hooks and modifying the graph using instance APIs.

```javascript
const checkedItem = RGHooks.useCheckedItem();
const graphInstance = RGHooks.useGraphInstance();

function setNodeWarning() {
  if (!checkedItem.checkedNodeId) return;

  graphInstance.updateNode(checkedItem.checkedNodeId, {
    color: '#fef3c7',
    borderColor: '#f59e0b'
  });
}
```

```javascript
const checkedItem = RGHooks.useCheckedItem();
const graphInstance = RGHooks.useGraphInstance();

function setNodeWarning() {
  const nodeId = checkedItem.value.checkedNodeId;
  if (!nodeId) return;

  graphInstance.updateNode(nodeId, {
    color: '#fef3c7',
    borderColor: '#f59e0b'
  });
}
```

--------------------------------

### Visualize Reactivity Flow with Mermaid

Source: https://relation-graph.com/docs/multi-platform-architecture

A Mermaid diagram illustrating the conditional update logic for React versus Vue.

```mermaid
graph LR
    SetHook["setUpdateViewHook(hook)"]
    Flag["isReact = true"]
    DataUpdate["_dataUpdated()"]
    Condition{"isReact?"}
    UpdateHook["updateViewHook()"]
    Skip["Skip (Vue handles automatically)"]

    SetHook --> Flag
    DataUpdate --> Condition
    Condition -->|true| UpdateHook
    Condition -->|false| Skip
```

--------------------------------

### Configure Default Node Options

Source: https://relation-graph.com/docs/options

Sets global default styling and layout properties for nodes that do not define their own specific values.

```javascript
const graphOptions = {
  defaultNodeShape: RGNodeShape.rect,
  defaultNodeColor: '#f8fafc',
  defaultNodeBorderColor: '#64748b',
  defaultNodeBorderWidth: 1,
  defaultNodeBorderRadius: 6,
  defaultNodeWidth: 140,
  defaultNodeHeight: 48,
  defaultExpandHolderPosition: 'right'
};
```

--------------------------------

### Define Force Layout Options

Source: https://relation-graph.com/docs/wiki/5

Configuration interface for force-directed layouts, extending core options with physics-related parameters like repulsion and attraction.

```typescript
interface RGForceLayoutOptions extends RGLayoutOptionsCore {
  fastStart?: boolean;          // Skip initial center layout
  maxLayoutTimes?: number;      // Max iterations (default: 300)
  byNode?: boolean;             // Enable node repulsion
  byLine?: boolean;             // Enable line attraction
  force_node_repulsion?: number; // Repulsion coefficient (default: 1)
  force_line_elastic?: number;   // Attraction coefficient (default: 1)
}
```

--------------------------------

### graphInstance.generateLinePath(lineConfig)

Source: https://relation-graph.com/docs/slot-line

Generates RGLinePathInfo, including path data, text position, key points, and related information for a given line configuration.

```APIDOC
## graphInstance.generateLinePath(lineConfig)

### Description
Generates the path information required to render a line, including SVG path data and key points.

### Parameters
- **lineConfig** (object) - Required - The configuration object for the line.
```

--------------------------------

### Configure Tree Layout Options

Source: https://relation-graph.com/docs/options

Sets specific parameters for tree-based layouts, including gaps and expansion direction.

```javascript
const graphOptions = {
  layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 180,
    treeNodeGapV: 40,
    levelGaps: [120, 180, 220],
    layoutExpansionDirection: 'center'
  }
};
```

--------------------------------

### Recommended Line Configuration Style

Source: https://relation-graph.com/docs/data-line

Define line objects with explicit visual and data properties to ensure consistency across the graph and MiniView.

```javascript
const line = {
  id: 'api-to-db',
  from: 'api',
  to: 'database',
  text: 'SQL query',
  type: 'request',
  lineShape: RGLineShape.StandardOrthogonal,
  fromJunctionPoint: RGJunctionPoint.right,
  toJunctionPoint: RGJunctionPoint.left,
  color: '#2563eb',
  lineWidth: 2,
  showEndArrow: true,
  placeText: 'center',
  data: {
    protocol: 'postgres',
    p95: 38
  }
};
```

--------------------------------

### Common event combination for line creation

Source: https://relation-graph.com/docs/events

Demonstrates capturing the graph instance and using events to validate and add lines.

```typescript
let graphInstance: RelationGraphInstance | undefined;

const onReady = (instance: RelationGraphInstance) => {
  graphInstance = instance;
};

const beforeCreateLine = ({ fromNode, toNode }) => {
  if (fromNode.id === toNode.id) return false; // block self-loop
};

const onLineBeCreated = ({ lineJson }) => {
  if (!graphInstance) return;
  graphInstance.addLines([lineJson]);
};
```

--------------------------------

### Build Explicit Layouter with createLayout

Source: https://relation-graph.com/docs/layout-intro

Instantiate a layouter manually to position specific node subsets or handle custom graph flows.

```javascript
const layouter = graphInstance.createLayout({
  layoutName: 'tree',
  from: 'left',
  treeNodeGapH: 150,
  treeNodeGapV: 10
});
layouter.placeNodes(networkNodes, rootNode);
```

--------------------------------

### Initial load and viewport adjustment

Source: https://relation-graph.com/docs/graph-instance-api

Standard flow for loading data and centering the graph view.

```typescript
await graphInstance.setJsonData(jsonData);
graphInstance.moveToCenter();
graphInstance.zoomToFit();
```

--------------------------------

### Update Node Properties and Data

Source: https://relation-graph.com/docs/wiki/13

Demonstrates how to perform partial updates on node properties and update custom data fields for a specific node.

```javascript
// Partial update - only change color and text
graphInstance.updateNode('node1', {
  color: '#ff0000',
  text: 'Updated Node'
});

// Update custom data
graphInstance.updateNodeData('node1', {
  customField: 'value',
  timestamp: Date.now()
});
```