ЛогикФлоу: фреймворк для создания и редактирования блок-схем

ЛогикФлоу — это фреймворк, который позволяет создавать и редактировать блок-схемы. Он предоставляет ряд функций для взаимодействия с блок-схемами, их редактирования и настройки узлов и плагинов. Это упрощает создание блок-схем в бизнес-системах.

Основные возможности:

• Визуализация моделей: ЛогикФлоу предоставляет интуитивно понятный интерфейс для создания, редактирования и управления сложными логическими блок-схемами.
• Высокая настраиваемость: пользователи могут настраивать узлы, соединители и стили в соответствии со своими потребностями, создавая уникальные блок-схемы для конкретных случаев использования.
• Гибкость и расширяемость: фреймворк включает в себя множество плагинов, а также позволяет пользователям создавать сложные плагины для удовлетворения своих бизнес-потребностей.
• Самоисполняющийся движок: движок выполнения поддерживает выполнение блок-схем на стороне браузера, предлагая новый подход к бескодовому выполнению.
• Преобразование данных: ЛогикФлоу поддерживает преобразование данных между своей структурой данных и структурами данных других бэкенд-движков, таких как BPMN и Turbo.

Установка:

# npm
$ npm install @logicflow/core @logicflow/extension --save

# yarn
$ yarn add @logicflow/core @logicflow/extension

# pnpm
$ pnpm add @logicflow/core @logicflow/extension

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

<!-- LogicFlow 容器 DOM-->
<div id="container"></div>;

// Подготовка данных
const data = {
  // Узлы
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: 'Прямоугольный узел',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: 'Круглый узел',
    }
  ],
  // Ребра
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21'
    }
  ]
};
// Рендеринг холста
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600
});

lf.render(data);

Для получения дополнительной информации посетите официальный сайт проекта.