跳转到内容
Xenolith Graph Xenolith Graph

XenolithGraph

BETA 测试版 节点图编辑器AI 原生 · 可调试WebGL · MIT

精美的节点编辑 — 为嵌入而生。

具备独立视觉语言的 AI 原生节点编辑器。为下一代 LangFlow 风格的工具而生 —— 而非又一个 React-Flow 克隆。WebGL 渲染、面向 Claude / Cursor 的 MCP 服务器、框架无关的核心、开箱即用的精雕 Xen 设计系统。

Beta —— v1.0 之前 API 仍可能变化。

查看文档 教程 Playground 示例 GitHub
XenolithGraph

Xen — 默认主题

使用 XenolithGraph 原创设计系统 Xen 渲染的真实图。其他主题(如 Liquid Glass)在 playground 与 Examples 中提供。

Xen — 默认主题

内置什么

真实图编辑器所需的一切，开箱即用 — UX、模型、主题、插件。需要什么就用什么，其余不挡路。

  • 01

    Xen — 原创设计系统

    生产可用的默认主题 —— 作为独立的节点编辑器语言在 Figma 中设计，而非通用 flowchart 库的皮肤。`setTheme()` 实时切换主题:使用 Xen、自定义,或接入更多(Liquid Glass 出现在 playground 与 examples 中)。

  • 02

    任意框架皆可

    为 React、Vue、Svelte、Solid、Angular 与 Web Components 提供官方适配器，也支持纯 vanilla。核心框架无关、零依赖、headless。

  • 03

    插入面板 · 命令 · 快捷键

    Tab 打开模糊搜索面板。注册命名命令并绑定快捷键（Mod+Z、Cmd+Shift+K）— 您的快捷键与内置共存。从空引脚 Tab-drag 即可在松开时生成兼容节点。

  • 04

    引脚、连线、多选拖动

    类型化引脚带兼容检查与可注册的类型转换。框选、网格吸附、Alt 重连、连线标签、箭头、动画连线、四种路径风格（bezier、smoothstep、step、linear）。

  • 05

    节点内置部件

    声明式 number、slider、combo、text、toggle、color、button — 加上自定义 canvas 与 DOM 挂载控件（React / Vue / Svelte 都行）。基于状态的条件可见性、属性侧栏、display 部件实时取值。

  • 06

    宏、模板、子图

    将选区组合成内嵌宏，或抽取为可复用的 template 以批量实例化。双击进入；面包屑追踪路径。宏与 template 双向互转。

  • 07

    保存、恢复、导出

    版本化的 xenolith.v1 JSON，附带每个 schema 的 migrate 钩子 — 旧图自动升级。内置 ComfyUI workflow 导入器。导出整张图（而非视口）为任意分辨率的 PNG 或 JPEG。

  • 08

    自动布局 · 缩略图 · 大图

    Dagre 与 ELK 适配器一次调用即可排版（带 tween 动画）。内置 minimap、超过 300 节点后启用视口虚拟化、LOD 渲染、随选区移动的属性面板。

  • 09

    AI 原生 · MCP 集成

    内置 MCP 服务器，让 Claude Desktop / Cursor 直接构建图：list_node_types → add_node → connect_pins → auto_layout。所有变更走 command bus — undo 免费。"我来描述，编辑器来搭。"

30 秒上手

import { XenolithEditor } from '@xenolithengine/graph-editor'

// 一次调用——字体、PIXI、视口、栅格、交互全部就绪。
const editor = await XenolithEditor.init('#app')

// 加载图，或注册 schema 后从面板生成节点。
editor.loadJSON(myGraph)

// 完成。拖拽、连线、撤销、深入、吸附、保存——一切都已工作。

技术栈

  • TypeScript
  • PIXI v8
  • Astro
  • Vitest
  • Playwright
  • pnpm + Turbo
  • MIT

可立即集成

MIT 许可证。发布在 npm。为 AI 工作流前端、shader 与材质编辑器、dataflow 编辑器以及任意节点 UI 打造。欢迎 PR 与 issue。

文档 →