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

Особенности

• Высокая настраиваемость: благодаря интуитивно понятному визуальному интерфейсу, предоставленному LogicFlow, пользователи могут легко создавать, редактировать и управлять сложными логическими блок-схемами.
• Богатые плагины: встроенные богатые плагины, пользователи также могут настраивать сложные плагины в соответствии со своими потребностями для достижения бизнес-требований.
• Модель визуализации: пользователи могут настраивать узлы, соединители и стили в соответствии со своими потребностями, создавая пользовательские логические блок-схемы, соответствующие конкретным сценариям использования.
• Самоисполняющийся движок: механизм выполнения поддерживает логику блок-схемы на стороне браузера, предлагая новые идеи для бескодового выполнения.
• Преобразование данных: поддерживает преобразование данных LogicFlow в структуры данных бэкэнд-механизма выполнения 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: 'Rect Node',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: 'Circle Node',
    }
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21'
    }
  ]
};
// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600
});

lf.render(data);

Ссылки

Официальный сайт

— Начало работы — Примеры — Статьи

— CHANGELOG — Шаблон проблемы

Разработка

# install deps and build
$ pnpm install

# enter the specified project for development and debugging
cd packages/core
pnpm run build:watch

# start example to develop
cd examples/feature-examples
pnpm run start

Вклад

Чтобы стать участником, пожалуйста, следуйте нашему руководству по внесению вклада. Если вы активный участник, вы можете подать заявку на участие в качестве внешнего сотрудника.

Лицензия

Скрипты и документация в этом проекте выпущены под лицензией Apache-2.0.