HTML 安装、产物与导出

包名

正式包名是 @relation-graph/html：

npm install @relation-graph/html@3.1.2

旧的 Web Component 包已经停止构建和发布。relation-graph-html 目前只是保留名称，并未实际发布。

发行文件

文件	用途
`relation-graph.mjs`	浏览器或构建工具使用的 ESM
`relation-graph.umd.js`	`<script>` 直接加载，暴露 `RelationGraph` 全局变量
`relation-graph.js`	CommonJS 入口
`style.css`	图谱和官方 UI 的完整样式
`types/`	TypeScript 声明
`docs/`	随 npm 包发布的完整手册

JavaScript 不会自动注入样式。无论使用 UMD、ESM 还是 npm，都必须加载 style.css。

核心导出

import {
  createRelationGraph,
  RelationGraphCore,
  RGLayouts,
  RGUtils,
  version
} from '@relation-graph/html';

createRelationGraph(host, config)：创建并挂载实例。
RelationGraphCore：高级场景替换或继承核心类。
RGLayouts：内置 Base、Tree、Center、Circle、Fixed、Force、Folder 布局类。
RGUtils：节点、连线、配置、数学与分析工具。
version：当前核心版本。

包同时导出所有公共数据类型、枚举和核心 API 类型。

HTML 平台导出

import {
  trustedHTML,
  toolbar,
  miniView,
  editing,
  registerConnectTarget,
  defineRelationGraphElement
} from '@relation-graph/html';

导出	用途
`trustedHTML()`	明确允许 renderer 字符串被解析成 HTML
`toolbar()`	创建官方工具栏插件
`miniView()`	创建 MiniView 插件
`editing()`	创建编辑控制器插件
`registerConnectTarget()`	把普通 DOM/SVG 元素注册为连线目标
`defineRelationGraphElement()`	显式注册可选的单一 light-DOM 元素

TypeScript

import type {
  RGHtmlConfig,
  RGHtmlInstance,
  RGHtmlPlugin,
  RGHtmlRenderers,
  RGOptions,
  RGJsonData,
  RGListeners
} from '@relation-graph/html';

RGHtmlInstance 同时拥有 RelationGraphInstance 的核心 API，以及 HTML 生命周期方法：whenReady、destroy()、setRenderers()、setLayers()、use()、subscribe() 和 getLayerElement()。

环境要求

运行时需要浏览器 DOM，不支持 SSR 或 hydration。
宿主必须是一个已经连接到文档、具有可计算宽高的 HTMLElement。
浏览器需要支持 ES2020、SVG、Canvas 2D、ResizeObserver 和 CustomEvent。
一个宿主同一时间只能挂载一个实例。

下一页：HTML 配置与布局。