@retikz/graph-react

React authoring bindings for @retikz/graph. <Graph>, <Entity> and <Relation> are independent semantic components backed by the matching @retikz/graph-vanilla adapter. They produce the same compact Source IR as direct JSON authoring without generated ids or hidden Graph membership.

Install

pnpm add @retikz/graph-react @retikz/graph @retikz/react react react-dom

This package is ESM-only and requires Node.js 24 or newer. 本包仅发布 ES modules，要求 Node.js 24 或更高版本。

<Graph> can be a standalone Scene host:

import { Entity, Graph, Relation } from '@retikz/graph-react';

<Graph width={420} height={160}>
  <Entity id="start" role="event" position={[80, 80]}>
    Start
  </Entity>
  <Entity id="task" role="activity" position={[320, 80]}>
    Process
  </Entity>
  <Relation role="flow" source={{ id: 'start' }} target={{ id: 'task' }} way={['start', 'task']} />
</Graph>;

When Graph is placed inside an outer Layout, it contributes only its local Core Scope. Scope fields remain on Graph; standalone host fields belong to the outer Layout:

import { Layout } from '@retikz/react';

<Layout width={800} height={220}>
  <Graph id="left" transforms={[{ kind: 'translate', x: 0, y: 0 }]}>
    <Entity id="left-node" role="activity" position={[80, 80]} />
  </Graph>
  <Graph id="right" transforms={[{ kind: 'translate', x: 400, y: 0 }]}>
    <Entity id="right-node" role="activity" position={[80, 80]} />
  </Graph>
</Layout>;

theme, Scope defaults, transforms, placement, clip, z-index, namespace and animations always belong to Graph Source. graphTheme carries Graph-local Entity and Relation rules. An embedded Graph rejects standalone-only fields such as width, renderer/runtime options and Definition arrays instead of ignoring them.

Entity and Relation can also be direct Layout or Scope children. Their id is optional; omitting it draws the element without registering a Core reference target. Relation endpoints use Core NodeTarget, including anchor, offset and boundary.

Group children accept arbitrary embeddable content, Entity children accept Node-compatible text only, and Relation children accept Core Step declarations mutually exclusive with route and way. Pass custom Graph Definition options directly to Graph, Group, Entity, or Relation; those options configure provider datasets and never enter Source IR.

See the Graph documentation for complete examples.