Repolode
Предложить
antvis

antvis/X6

TypeScript/JavaScript-движок для редактирования и визуализации графов на SVG и HTML: DAG, ER-диаграмм, блок-схем и графов lineage.

Открыть на GitHubСайт
Звёзды
6,752
Форки
1,895
Открытые issues
156
Последний коммит
16 дней назад

Что это?

AntV X6 — движок для редактирования графов, написанный на TypeScript. Он отображает узлы и рёбра с помощью SVG и HTML. Библиотека позволяет создавать интерактивные приложения для работы с диаграммами — например, DAG-диаграммами, ER-диаграммами, блок-схемами и графами lineage — без необходимости разрабатывать всё с нуля.

Узлы можно стилизовать и делать интерактивными с помощью обычных SVG или HTML, а также React, Vue и Angular. Библиотека использует управляемую данными модель в стиле MVC, позволяя коду приложения сосредоточиться на данных и бизнес-логике. Кроме того, в ней есть система событий, охватывающая события, происходящие внутри диаграммы.

В X6 из коробки входят более десяти расширений для редактирования, в том числе выделение лассо, направляющие для выравнивания и мини-карта. Библиотека устанавливается из npm как @antv/x6 и поддерживает серверный рендеринг.

Ключевые возможности

  • 01Отображает узлы и рёбра с помощью SVG и HTML.
  • 02Позволяет настраивать стили и взаимодействие с узлами через SVG, HTML, React, Vue или Angular.
  • 03Встроенные расширения, включая выделение лассо, направляющие для выравнивания и мини-карту.
  • 04Управляемая данными архитектура MVC с комплексной системой событий.
  • 05Поддерживает серверный рендеринг.

Сценарии использования

  • Создание редакторов DAG или рабочих процессов в веб-приложениях.
  • Создание инструментов для работы с диаграммами «сущность — связь» (ER).
  • Разработка визуализаций блок-схем или графов lineage.
  • Добавление интерактивных диаграмм в интерфейс на React, Vue или Angular.

Быстрый старт

  1. 1

    Установите пакет с помощью npm

    npm install @antv/x6 --save
  2. 2

    Импортируйте Graph и создайте граф в контейнерном элементе

  3. 3

    Добавьте в граф узлы и ребро

В подборках

Диаграммы, графики и анимированная визуализацияКурсы и инструменты для анализа данных

Темы

#graph-editor#diagramming#visualization#svg#typescript#flowchart#dag#data-visualization#antv#diagram

Частые вопросы

Что такое X6?
TypeScript/JavaScript-движок для редактирования и визуализации графов на SVG и HTML: DAG, ER-диаграмм, блок-схем и графов lineage. AntV X6 — движок для редактирования графов, написанный на TypeScript. Он отображает узлы и рёбра с помощью SVG и HTML. Библиотека позволяет создавать интерактивные приложения для работы с диаграммами — например, DAG-диаграммами, ER-диаграммами, блок-схемами и графами lineage — без необходимости разрабатывать всё с нуля.
X6 можно использовать бесплатно? Какая у него лицензия?
X6 распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
X6 всё ещё поддерживается?
Активно поддерживается. Последний коммит в X6 — 23 окт. 2026 г..
Для чего можно использовать X6?
Создание редакторов DAG или рабочих процессов в веб-приложениях. Создание инструментов для работы с диаграммами «сущность — связь» (ER). Разработка визуализаций блок-схем или графов lineage. Добавление интерактивных диаграмм в интерфейс на React, Vue или Angular.
Как установить X6?
Установите пакет с помощью npm: npm install @antv/x6 --save Импортируйте Graph и создайте граф в контейнерном элементе Добавьте в граф узлы и ребро
Где скачать X6?
Исходный код и инструкции по установке — на GitHub: https://github.com/antvis/X6

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

didi / LogicFlow

Фреймворк для редактирования блок-схем на TypeScript, позволяющий встраивать в бизнес-системы настраиваемые редакторы диаграмм: блок-схем, интеллект-карт, ER- и BPMN-диаграмм.

Фронтенд и UI#flowchart#diagramming#visualization
11,8 тыс.+16 за неделю1,4 тыс.TypeScriptApache-2.0Активно поддерживаетсяОбновлён 15 дней назад