AntV X6 Editorавтор antvis

AntV X6 Editor Skill.

Создайте интерфейс для составления связанных диаграмм, а не просто для просмотра уже существующей сети.

Редакторы диаграмм
Интерфейсы узлов
AntV

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · AntV X6 EditorSKILL.md

Задача Редакторы диаграмм Результат • Редактор диаграмм на X6: JavaScript со стилизованными узлами и связями • Продуманный набор плагинов редактора и взаимодействий с холстом • Поведение соединений, кадрирования и (при необходимости) сериализации, подходящее для редактора Перед началом Используйте описанный в документации @antv/x6 v3 API с браузерным холстом и необходимыми плагинами. Для загрузки дополнительных материалов нужен доступ к сети. Сверяйте примеры с установленной версией.

Редакторская сводка · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

AntV X6 Editor: создание холста для диаграмм

Руководство по редактору диаграмм на X6 v3: императивное построение узлов и связей, явная настройка плагинов, разделение жестов и обращение к специализированным справочникам.

Процесс на основе источникаНе тест производительности выполнения

Принцип работы

AntV X6 Editor предназначен для интерактивных инструментов диаграмм: редакторов блок-схем, DAG, ER-диаграмм, схем происхождения данных и организационных структур. Рассмотренная запись нацелена на X6 v3 и описывает императивный подход: создать граф, добавить узлы и связи, затем зарегистрировать плагины редактора, нужные для задуманных операций.

Главное здесь — поведение редактора. Выделение, история, буфер обмена, клавиатура, набор элементов (stencil), перетаскивание, трансформации и экспорт требуют явной настройки; панорамирование холста и поведение соединений относятся к другому уровню конфигурации. Источник также отсылает задачи сериализации и работы с портами к подробным справочникам. Он не превращает нарисованный процесс в исполняемый бизнес-процесс.

Ожидаемые результаты

Редактор диаграмм на X6: JavaScript со стилизованными узлами и связями
Продуманный набор плагинов редактора и взаимодействий с холстом
Поведение соединений, кадрирования и (при необходимости) сериализации, подходящее для редактора

Смотреть пример задания

От задания до проверки

01
Определите задачу редактирования
Перечислите объекты диаграммы, которые пользователи могут создавать, перемещать, выделять, соединять и удалять. Прежде чем включать плагины, решите, какие операции редактора действительно нужны.
02
Постройте модель узлов и связей
Создайте граф и добавьте нужные фигуры и соединения. Если в задачу входят порты, пользовательские узлы HTML или вложенные структуры, обратитесь к соответствующим справочникам.
03
Зарегистрируйте возможности редактора
Импортируйте и зарегистрируйте плагины, используемые в реализации. Параметры конструктора, такие как панорамирование и соединение, держите отдельно от классов плагинов.
04
Проверьте сеанс редактирования
Проверьте жесты выделения, панорамирования, масштабирования и перетаскивания на конфликты, выставьте кадр по содержимому и проверьте обещанный путь сохранения и загрузки или экспорта, а не считайте, что он существует.

02 Когда использовать

Когда применять

Используйте описанный в документации @antv/x6 v3 API с браузерным холстом и необходимыми плагинами. Для загрузки дополнительных материалов нужен доступ к сети. Сверяйте примеры с установленной версией.

Хорошо подходит

Интерфейсы создания процессовПолезно, когда пользователям нужно строить или изменять диаграмму узлов и связей, а не только просматривать готовый граф.
Редакторы предметных диаграммВ источнике есть отсылки для требований к ER-диаграммам, происхождению данных, DAG, UML и организационным схемам.
Отладка взаимодействий в редактореПравила регистрации плагинов и клавиш-модификаторов помогают найти недостающие операции и конфликтующие жесты.

Ограничения, которые стоит проверить

Не движок выполнения процессовОписанная область — редактирование диаграмм. Бизнес-исполнение, серверное сохранение и предметная валидация требуют отдельной реализации.
Не G6 и не G2G6 (исследование сетей) и G2 (статистические диаграммы) имеют другие цели и API; их шаблоны отрисовки не следует смешивать с этим редактором.
Допущения среды выполнения, заданные источникомЗапись предписывает для своего процесса соглашения v3, вывод JavaScript и особую работу с контейнером. Проверьте эти допущения в установленном пакете и среде размещения, а не выдавайте их за универсальные ограничения библиотеки.

Что подготовить

Схема диаграммыУкажите типы узлов, допустимые связи, требования к портам и исходные данные диаграммы.
Операции редактированияУкажите, нужны ли пользователям выделение, отмена, буфер обмена, набор элементов, изменение размера, клавиатурные действия или экспорт.
Среда приложенияУкажите установленную версию X6, контейнер холста, окружающие взаимодействия на странице и требования к сохранению.

03 Важные решения

Важные решения

Возможности задаются явно
Регистрация только нужных плагинов показывает разницу между отображаемой диаграммой и рабочим редактором.
У жестов разные задачи
Источник использует модификаторы, чтобы панорамирование, масштабирование и выделение рамкой не конкурировали за один и тот же ввод.
Редактирование и сохранение — разные вещи
Видимая диаграмма не доказывает, что состояние редактирования можно сохранить и восстановить. Сериализация — отдельный справочник и отдельная задача проверки.

04 Пример задания

Попробуйте целевое задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте полный исходный текст навыка antv-x6-editor как руководство и устанавливайте среду выполнения проекта отдельно. Универсальной команды установки навыка по этой записи не проверено.

Исходный файл в репозитории

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-x6-editor/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте в этом задании объём, исходные материалы и ограничения.

Пример задания

Используйте antv-x6-editor, чтобы создать прототип редактора процесса согласования с заданными типами узлов и допустимыми соединениями. Сначала проверьте нашу версию X6. Реализуйте выделение и отмену с явной регистрацией плагинов, разделите жесты панорамирования и масштабирования и не включайте бизнес-исполнение. Если включено сохранение и загрузка JSON, следуйте справочнику по сериализации и продемонстрируйте полный цикл сохранения и загрузки; не заявляйте о серверном сохранении.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

Для каждой используемой операции редактора импортирована и зарегистрирована нужная возможность.
Панорамирование, масштабирование, выделение и работа с узлами не конфликтуют за один и тот же жест.
Любая обещанная операция сериализации или экспорта продемонстрирована в реальном проекте.

OpenDesign предоставляет локальное рабочее пространство для кодирующих агентов. Эта запись не означает, что навык включён в поставку или что в неё входят внешние инструменты, учётные данные и программные зависимости.

Скачать OpenDesign Прочитать краткое руководство

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная ревизия источника, ссылка на которую приведена ниже. Поведение и требования исходного проекта могут измениться.

Владелец источника: antvis
Репозиторий: antvis/chart-visualization-skills
Файл навыка: skills/antv-x6-editor/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · a105fa12a9fa

Редакторская сводка источника

Руководство по редактору диаграмм на X6 v3: императивное построение узлов и связей, явная настройка плагинов, разделение жестов и обращение к специализированным справочникам.

Авторская сводка OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Почему не использовать G6 для той же диаграммы?

Источник разделяет редактируемый холст X6 и его императивный API для создания диаграмм и рабочий процесс визуализации графов в G6. Выбирайте по нужному пользователям взаимодействию, а не только по внешнему виду картинки.

Панорамирование и выделение настраиваются одинаково?

Нет. Запись разделяет параметры взаимодействия на уровне конструктора и плагины, такие как Selection, которые нужно зарегистрировать до использования их методов.

Нужен ли отдельный вызов graph.render после добавления узлов?

В рассмотренном руководстве по X6 v3 сказано, что добавленные узлы и связи отрисовываются автоматически, и предупреждается не переносить graph.render из G6. При интеграции проверьте установленный API.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesign Просмотреть навыки дизайна