Перейти к содержимому
Xenolith Graph Xenolith Graph

XenolithGraph

BETA Node-graph редакторAI-native · отлаживаетсяWebGL · MIT

Красивое нодовое редактирование — готово к встраиванию.

AI-native node-редактор с собственной визуальной идентичностью. Сделан для следующего поколения LangFlow-style тулов — а не ещё один React-Flow клон. WebGL-рендер, MCP-сервер для Claude / Cursor, framework-agnostic ядро, полированная Xen design-система из коробки.

Beta — API ещё может измениться до v1.0.

Открыть документацию Туториал Playground Примеры GitHub
XenolithGraph

Xen — тема по умолчанию

Реальный граф под Xen — оригинальной design-системой XenolithGraph. Дополнительные темы (например Liquid Glass) включаются в playground и Examples.

Xen — тема по умолчанию

Что внутри

Всё что нужно реальному редактору графов из коробки — UX, модель, темы, плагины. Берите то что нужно — остальное не мешает.

  • 01

    Xen — оригинальная design-система

    Production-ready тема по умолчанию — спроектирована в Figma как самостоятельный node-editor язык, не оверлей на flowchart-библиотеке. `setTheme()` переключает темы вживую: возьмите Xen, напишите свою или подключите дополнительные (Liquid Glass — в playground и examples).

  • 02

    Под любой фреймворк

    Первородные адаптеры для React, Vue, Svelte, Solid, Angular и Web Components — плюс vanilla-путь без зависимостей. Ядро framework-agnostic, zero-dep, headless.

  • 03

    Палитра вставки · команды · хоткеи

    Tab открывает fuzzy-поиск по палитре. Регистрируйте именованные команды и привязывайте хоткеи (Mod+Z, Cmd+Shift+K) — ваши шорткаты живут рядом со встроенными. Tab-drag с пустого пина создаёт совместимую ноду на drop.

  • 04

    Пины, рёбра, multi-drag

    Типизированные пины с проверкой совместимости и регистрируемыми конверсиями. Marquee-выбор, snap к сетке, Alt-rewire, лейблы на рёбрах, стрелки, анимированные рёбра, четыре стиля пути (bezier, smoothstep, step, linear).

  • 05

    Виджеты внутри нод

    Декларативные number, slider, combo, text, toggle, color, button — плюс кастомные canvas-draw и DOM-mounted контроллеры (React / Vue / Svelte тоже работают). Условная видимость по состоянию, properties-sidebar, live-значения на display-виджетах.

  • 06

    Макросы, шаблоны, подграфы

    Сгруппируйте выборку в inline-макро или вытащите как переиспользуемый template для повторных инстансов. Double-click — нырок внутрь, breadcrumb отслеживает путь. Конверсия макро ↔ template в обе стороны.

  • 07

    Save, restore, export

    Версионированный xenolith.v1 JSON с per-schema migrate-хуками — старые графы апгрейдятся автоматически. Встроен импортёр workflow ComfyUI. Экспорт ВСЕГО графа (а не viewport) в PNG или JPEG любого разрешения.

  • 08

    Auto-layout · minimap · большие графы

    Plug-in адаптеры для Dagre и ELK раскладывают граф одним вызовом (с анимацией tween). Встроенная мини-карта, виртуализация viewport после 300 нод, level-of-detail рендеринг, встроенная панель свойств которая следует за выборкой.

  • 09

    AI-native через 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, viewport, grid, interaction уже подняты.
const editor = await XenolithEditor.init('#app')

// Загрузите граф или соберите его — зарегистрируйте схемы и спавните из палитры.
editor.loadJSON(myGraph)

// Готово. Drag, connect, undo, dive, snap, save — всё уже работает.

Стек

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

Готов к интеграции

MIT-лицензия, опубликован в npm. Сделан для frontend AI-workflow, shader/материал-редакторов, dataflow-редакторов и любого нодового UI. PR и issues приветствуются.

Документация →