FlowGram.AI: движок с открытым исходным кодом для быстрого создания узловых рабочих процессов

Общее введение

Flowgram.ai - это движок для создания процессов с открытым исходным кодом, разработанный компанией ByteDance. Он основан на редактировании узлов и помогает разработчикам быстро создавать рабочие процессы, поддерживая как фиксированную компоновку, так и режимы свободной проводки. Код проекта, написанный на TypeScript, размещен на GitHub, является открытым и бесплатным, а последнее обновление было произведено 26 марта 2025 г. Flowgram.ai предоставляет интуитивно понятный интерфейс и плавный интерактивный опыт для проектирования визуальных рабочих процессов с четкими входами и выходами. Кроме того, в него планируется включить возможности искусственного интеллекта для повышения интеллектуальности процессов. Пользователи могут ознакомиться с ним в режиме онлайн с помощью официальной демонстрации или установить его локально.

Список функций

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

Использование помощи

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

Как начать

Flowgram.ai предлагает два способа использования: онлайн-демонстрацию и локальную установку.

Опыт работы в Интернете

1. Откройте браузер и посетите официальный сайт Demo:
   • Исправленный макет:https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • Свободные соединения:https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. Вы можете работать прямо на полотне, как только войдете в помещение, установка не требуется.

локальная установка

1. Подготовка среды::
   • Установите Node.js 18+ и запустите его:nvm install lts/hydrogenУстановите версию по умолчанию:nvm alias default lts/hydrogenПереключение:nvm use lts/hydrogen.
   • Установите глобальные зависимости:npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. склад клонов::
   • Бег:git clone git@github.com:bytedance/flowgram.ai.git.
3. Установка зависимостей::
   • Перейдите в папку:cd flowgram.ai.
   • Обновление зависимостей:rush update.
4. Постройте проект::
   • Бег:rush build.
5. Запустите демонстрационную версию::
   • Документация:rush dev:docs.
   • Демонстрация фиксированного макета:rush dev:demo-fixed-layout.
   • Бесплатная демонстрация соединений:rush dev:demo-free-layout.
6. Доступ в браузере http://localhost(Порт подтвержден журналом).

Быстрая установка с помощью npx

• Бег:npx @flowgram.ai/create-app@latest.
• Выберите демонстрацию:
  • fixed-layout: Лучшие практики работы с фиксированным макетом.
  • free-layout: Лучшие практики бесплатной верстки.
  • fixed-layout-simple: Фиксированная раскладка Основное использование.
  • free-layout-simple: Свободный макет Основное использование.

Установка модулей через npm

• Исправлен редактор макетов:npm install @flowgram.ai/fixed-layout-editor.
• Редактор Freelink:npm install @flowgram.ai/free-layout-editor.

Основные функции

Создание рабочих процессов

• При входе в интерфейс редактирования на левой панели инструментов отображается тип узла (например, условный, циклический).
• Перетащите узел на холст и дважды щелкните на вводе, например, "Start".
• Соедините узлы стрелками, чтобы завершить процесс.

Режим фиксированного макета

• Откройте демонстрацию фиксированного макета или выполните команду fixed-layout.
• Положение узла фиксировано и поддерживает перетаскивание в указанную позицию.
• Можно добавлять ветви и петли, а на правой панели настраивать стиль.

свободный режим

• Откройте демонстрационную версию Free Link или запустите free-layout.
• Узлы можно размещать произвольно, а соединительные линии рисовать свободно.
• Поддерживает функции автоматического свертывания и адсорбционного выравнивания.

интерактивная функция

• Перетаскивание масштаба: Двумя пальцами на трекпаде Mac выберите масштаб и нажмите пробел, чтобы перетащить холст.
• анимированный переход: Линии плавно меняются по мере перемещения узлов.
• отменить: Работайте с Ctrl+Z и Ctrl+Y.
• копировать и вставить: Box nodes, Ctrl+C copy, Ctrl+V paste.

Основные функции

двухрежимная конструкция

Фиксированная компоновка подходит для структурированных процессов, таких как планирование проектов, с фиксированным расположением узлов и поддержкой ветвления и сворачивания. Свободная компоновка подходит для гибкого проектирования, например, для mind map, положение узлов произвольное, свободная компоновка.

Обеспечение искусственного интеллекта

Flowgram.ai планирует внедрить функции искусственного интеллекта, такие как автоматическая оптимизация маршрутов потоков. В настоящее время он находится в разработке, поэтому следите за подробностями на GitHub.

Поддержка открытых источников

Разработчики могут изменять код. Например, чтобы добавить новый тип узла, просто отредактируйте файл @flowgram.ai/free-layout-editor пакет и отправьте его.

предостережение

• Онлайн-демонстрация не поддерживает сохранение, поэтому для получения полной функциональности необходимо установить ее локально.
• Первая установка зависимости требует подключения к Интернету и может быть медленной.
• Официальная документация (https://flowgram.ai/) постоянно обновляется, подробности смотрите на GitHub. README.md.

Выполнив эти шаги, вы сможете быстро построить рабочий процесс с помощью Flowgram.ai.

сценарий применения

1. управление проектами
   Разработайте поток задач с фиксированной схемой, которая четко показывает этапы и разделение труда.
2. разработка программного обеспечения
   Нарисуйте блок-схему кода, используя свободно соединяющиеся линии для обозначения потока данных.
3. Учебная демонстрация
   Преподаватель объясняет концепции с помощью рабочего процесса, основанного на узлах, который экспортируется и передается учащимся.

QA

1. Является ли Flowgram.ai бесплатным?
   Да, это проект с открытым исходным кодом, код свободен для использования, а функции нужно развертывать самостоятельно.
2. Поддерживает ли он китайский язык?
   Содержание узла поддерживает ввод на китайском языке, а интерфейс - на английском.
3. Как сохранить рабочий процесс?
   Онлайн-демонстрация не может быть сохранена, локальная версия может экспортировать изображение или код.