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

alyssaxuu/flowy

Минималистичная библиотека на чистом JavaScript для создания в веб-приложениях редакторов блок-схем с перетаскиванием и автоматическим выравниванием блоков.

Открыть на GitHub
Звёзды
12,143
Форки
1,043
Открытые issues
59
Последний коммит
2 года назад

Что это?

Flowy — библиотека JavaScript без внешних зависимостей, которая позволяет добавить на веб-страницу функции для работы с блок-схемами. Элементы с классом create-flowy становятся перетаскиваемыми блоками. Их размещают на элементе canvas, а пользователи перетаскивают туда блоки: те привязываются к родительским блокам и образуют связанные ветви.

Библиотека предоставляет callbacks для событий grab, release, snap и rearrange. С их помощью ваш код может разрешать или отклонять соединения и реагировать на действия пользователя. Состояние блок-схемы можно экспортировать в виде структуры JSON с помощью flowy.output(), а затем восстановить через flowy.import(). При этом метод импорта вставляет необработанный HTML, поэтому использовать его следует только с доверенными данными. Несколько блоков можно удалить за раз с помощью flowy.deleteBlocks(); удаление отдельных блоков не предусмотрено.

Для установки нужно подключить файлы JavaScript и CSS; сейчас их можно загрузить через jsDelivr. Библиотека работает на мобильных устройствах. Установка через npm пока не поддерживается.

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

  • 01Перетаскивание блоков с автоматической привязкой и центрированием
  • 02Callbacks для событий grab, release, snap и rearrange
  • 03Условная привязка блоков и их условное удаление
  • 04Экспорт и импорт данных блок-схемы в формате JSON
  • 05Работа на мобильных устройствах без внешних зависимостей

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

  • Создание конструктора автоматизаций или рабочих процессов в веб-приложении
  • Создание инструмента для майнд-карт или диаграмм со связанными узлами
  • Прототипирование простого интерфейса визуального программирования

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

  1. 1

    Подключите таблицу стилей с jsDelivr

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
  2. 2

    Подключите скрипт с jsDelivr

    <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
  3. 3

    Добавьте на страницу элемент canvas и перетаскиваемые блоки

  4. 4

    Инициализируйте Flowy на canvas

    flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

Что важно знать

  • Установка через npm пока недоступна; используйте ссылки CDN или скопируйте файлы.
  • Блоки нельзя удалять по отдельности — можно удалить только все блоки сразу.
  • Метод импорта не очищает HTML и уязвим к XSS при использовании с недоверенными данными.

Темы

#flowchart#drag-and-drop#javascript#diagrams#visual-programming#vanilla-js#engine#javascript-library#marketing#marketing-automation

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

Что такое flowy?
Минималистичная библиотека на чистом JavaScript для создания в веб-приложениях редакторов блок-схем с перетаскиванием и автоматическим выравниванием блоков. Flowy — библиотека JavaScript без внешних зависимостей, которая позволяет добавить на веб-страницу функции для работы с блок-схемами. Элементы с классом create-flowy становятся перетаскиваемыми блоками. Их размещают на элементе canvas, а пользователи перетаскивают туда блоки: те привязываются к родительским блокам и образуют связанные ветви.
flowy можно использовать бесплатно? Какая у него лицензия?
flowy распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
flowy всё ещё поддерживается?
Нет коммитов больше 6 месяцев. Последний коммит в flowy — 13 июл. 2024 г..
Для чего можно использовать flowy?
Создание конструктора автоматизаций или рабочих процессов в веб-приложении Создание инструмента для майнд-карт или диаграмм со связанными узлами Прототипирование простого интерфейса визуального программирования
Как установить flowy?
Подключите таблицу стилей с jsDelivr: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> Подключите скрипт с jsDelivr: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> Добавьте на страницу элемент canvas и перетаскиваемые блоки Инициализируйте Flowy на canvas: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
Где скачать flowy?
Исходный код и инструкции по установке — на GitHub: https://github.com/alyssaxuu/flowy

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

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