+7(999)340-56-00
Manual BPMN 2.0 Editor

Инструкция: как пользоваться онлайн‑редактором BPMN 2.0 на сайте

Общая логика работы, создание – редактирование – сохранение диаграмм бизнес‑процессов BPMN 2.0, использование палитры элементов и панели инструментов.
Онлайн‑редактор позволяет нарисовать диаграмму бизнес‑процесса в нотации BPMN 2.0 прямо в браузере – бесплатно, без установки специальных программ и без регистрации. Результат можно сохранить как файл .bpmn, чтобы позже продолжить редактирование, или как png/svg картинку для вставки в документы и презентации.
Онлайн редактор BPMN 2.0
Справочник по элементам BPMN 2.0

Общий вид редактора

Рабочая область состоит из трех зон: панель инструментов сверху (открыть, сохранить, экспорт, масштаб, цвет), палитра элементов BPMN 2.0 слева (события, задачи, шлюзы, связи) и холст с сеткой в центре, где вы собираете схему.

Общая логика работы (главное)

Онлайн-редактор – это не репозиторий бизнес-процессов. Здесь нет облачного хранилища данных и аккаунтов пользователей. Вся работа идет в вашем браузере. Чтобы схема не пропала, ее нужно сохранить как файл .bpmn на свой компьютер. Отсюда весь цикл работы:

Старт

Начните с чистого листа (кнопка "Очистить") или загрузите из файла ранее сохраненную схему (кнопка "Открыть bpmn")

Работа

Редактируйте схему с помощью палитры элементов BPMN 2.0 в левой части холста и контекстных меню

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

Скачивайте или копируйте схему как svg/png картинку, чтобы вставить ее в документ или презентацию

Сохранение

Нажмите кнопку "Скачать bpmn" и файл со схемой процесса останется на вашем компьютере для дальнейшей работы

В браузере у редактора есть автосохранение, но это лишь подстраховка (например, если случайно закрыли вкладку) и работает оно только в том же браузере и на том же устройстве. Автосохранение не заменяет файл: данные стираются кнопкой "Очистить", теряются при очистке Local Storage и не переносятся на другой компьютер. Надежное хранение и перенос – только через файл .bpmn.

Как строить схему процесса

Палитра элементов (слева)

Верхние четыре значка – инструменты (перемещение по холсту, выделение рамкой, добавление пространства, режим соединения). Ниже – элементы BPMN: события, шлюз, задача, подпроцесс, объекты данных, пул, группа. Элемент можно перетащить на холст мышью или кликнуть и поставить. У всех элементов палитры есть подсказки на русском языке.

Контекстное меню элемента

Самый быстрый способ – достраивать элементы прямо от текущего. Выделите элемент (или наведите на него) – рядом появится панель действий: присоединить задачу, шлюз, событие, конец процесса, изменить тип элемента, удалить, провести связь.

Соединения (стрелки)

Чтобы соединить два элемента вручную, наведите на первый, нажмите значок "Соединить с другим элементом" и протяните стрелку ко второму. У шлюзов подпишите ветки, например, "Да" и "Нет" (двойной клик по стрелке).

Панель инструментов редактора

Функциональные кнопки панели инструментов

  • Очистить – освобождает холст и локальное хранилище Local Storage (с подтверждением).

  • Открыть – загружает в редактор диаграмму процесса из файла .bpmn.

  • Скачать – скачивает диаграмму на компьютер пользователя: bpmn в виде xml файла, который можно снова загрузить в редактор; svg в виде изображения в векторном формате; png в виде растрового изображения.

  • Копировать png – копирует схему в буфер обмена как картинку, чтобы сразу вставить в документ или презентацию.

  • Отменить / Вернуть (↶ ↷) – отмена и повтор действий в редакторе.

  • Масштаб – отдалить (−), по размеру (100%), приблизить (+).

  • Полный экран – развернуть редактор на весь экран.

  • Ширина – увеличить (+) или уменьшить (−) ширину выделенного элемента (сначала его надо выделить).

  • Цвет – заливка выделенного элемента заданным цветом; крестик [×] сбрасывает цвет.

Сохранение и использование диаграмм

  • Главное правило

    Закончили работу – скачать bpmn. Этот файл и есть ваша схема; храните и переносите ее именно так.

  • Промежуточные сохранения

    Завершили важный этап, но еще не закончили работу – скачать bpmn. Промежуточное сохранение не повредит.

  • Автосохранение

    Только подстраховка на этом же компьютере и в этом браузере – не полагайтесь на него как на хранилище.

  • Картинки

    Растровые (.png) и векторные (.svg) изображения нужны для вставки в документы и презентации. Обратно в редактируемую диаграмму они не превращаются. Кнопка копировать png кладет схему в буфер – вставка Ctrl+V.

Пример бизнес-процесса

Ниже – пример описательной схемы бизнес-процесса "Обработка заказа в торговой компании", сделанной в онлайн редакторе. "Описательная" значит, что она сделана, чтобы ее читали и согласовывали люди (менеджеры, аналитики), а не чтобы запускать в движке BPMS. Поэтому в ней используются только базовые элементы нотации BPMN 2.0.

Как читать схему

Заказ от клиента запускает экземпляр процесса. Менеджер по продажам проверяет наличие товаров, а шлюз "Все товары есть в наличии?" разводит поток на две ветки.

Если товары есть в наличии – менеджер по продажам их резервирует, выставляет клиенту счет-оферту и отслеживает оплату. Шлюз "Оплата поступила?" ветвит процесс снова. Если оплата поступила, работник склада собирает и отправляет заказ, а менеджер по продажам уведомляет клиента – позитивное завершение "Заказ выполнен".

Если товара нет в наличии или оплата не пришла, менеджер по продажам отменяет заказ (во втором случае он также снимает резерв товаров) и уведомляет клиента – негативное завершение "Заказ отменен" с указанием причины.

Обмен с клиентом (заказ, счет-оферта, уведомления) показан пунктирными потоками сообщений между дорожками.

Почему эта схема "для людей". Дорожки-роли (менеджер по продажам, работник склада) показывают, кто за что отвечает; три конечных события – это три разных исхода процесса; шлюзы-вопросы с ветками «Да / Нет» читаются без пояснений. Формальных условий и типов задач здесь нет намеренно – на описательном уровне они бы только мешали восприятию.

Есть вопросы?

Оставьте заявку – запланируем короткую онлайн-встречу.