relation-graph

relation-graph 是一个用 MIT 协议开源的图谱组件，解决的是「在网页里画关系图」这件事：把节点和连线渲染出来，支持拖拽、缩放、布局切换，还能直接编辑。它不绑定某个框架，同一套 API 在 React、Vue 2、Vue 3、Svelte 和原生 HTML 下表现一致，服务端渲染也能用。节点和连线长什么样，由你自己写的 HTML 或组件决定，组件只负责位置、布局和交互。

主要功能

内置多种布局，树状、中心、力学等可以切换；提供插槽式自定义，节点内容可以是普通 HTML，也可以是 Vue 或 React 组件。官方站点按场景整理了 200 多个示例，覆盖供应链网络、IT 拓扑、股权分析、组织架构、数据库建模、流程编排、路径分析、地理图谱等，每个示例都能直接看源码。另外还提供面向 AI 编程工具的知识库和技能包，让 Codex、Claude Code 这类工具更懂图谱开发的需求。

适合谁

适合需要在前端项目里嵌入关系图的前端开发者，尤其是已经用 Vue 或 React、不想为了画图再引入一套重型可视化库的团队。如果只是偶尔看一张静态图，用现成的图表库更省事；要做可编辑、可交互的图谱应用，它的场景示例能省掉不少搭骨架的时间。

费用与限制

组件本身免费，MIT 协议，可以商用。官网的示例源码分档：免费版能在线查看和复制 70 多个示例，Pro 版 49 美元一年，解锁 170 多个示例的打包下载和单人商业使用授权，采用一次性付费而非订阅。站点有登录入口，但浏览文档和示例不需要登录。界面以英文为主，站内提供中文切换。