При разработке идеи продукта необходимо визуализировать систему будущего продукта (роли, сущности, минимально необходимый функционал), и с этим успешно помогают различные digital-инструменты. 

Меня зовут Руслан Кутлиахметов, я старший разработчик в Лиге Цифровой Экономики, и сегодня расскажу, какие сервисы для описания бизнес-процессов будущего продукта используем мы и почему. 

В Лиге Цифровой Экономики для описания бизнес-процессов будущего продукта мы рассматривали и пробовали такие инструменты: 

• визуальный редактор StarUML;

• текстовый редактор PlantUML;

• сервисы Figma и Draw.io. 

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

Итак, StarUML — программный инструмент для визуального моделирования. Вначале думали использовать его, но после более близкого рассмотрения отказались от этой идеи. Причины были такие:

• В StarUML нет возможности вести совместную работу;

• Результаты сохраняются в облаке, и каждый раз, чтобы продолжить работу, нужно сначала достать макет из облака — это лишние усилия; 

• У StarUML навороченный интерфейс, поэтому приходится долго разбираться, как сделать даже простые вещи.

PlantUML — инструмент с открытым исходным кодом для создания диаграмм. Из плюсов — картинку можно создавать и редактировать прямо из браузера посредством написания кода. 

Минусы обнаружились такие:

• Нужно знать языковые конструкции на английском языке для создания запросов; 

• Описание сложной логики требует много времени;

• Не все диаграммы в итоге получаются хорошо. 

Так что, на мой взгляд, PlantUML не очень подходит простым аналитикам.

Упомяну здесь и сервис для визуального проектирования баз данных Dbdiagram, о котором, возможно, мало кто знает. Он не пригодится в качестве инструмента для анализа, но тем, кто проектирует реляционную базу данных, пользу принесет. 

Удобен, когда нужно на коленке разработать первый прототип.

Методом проб и ошибок убедились, что нам для описания бизнес-процессов продукта в большей степени подходят Figma и Draw.io. Далее подробно поделюсь, чем они оказались полезны нам.

Figma

Наверное, графический редактор Figma не нуждается в представлении. Сервисом пользуются около четырех миллионов человек, среди них — сотрудники таких крупных компаний, как Dropbox, Netflix, Twitter и Zoom. Это инструмент преимущественно для дизайнеров, поэтому для работы с редактором важно иметь соответствующие навыки.

В остальном, если вам нужно красивое и стилизованное оформление диаграмм, то Figma — идеальный вариант.

Подробно рассказывать о том, как нарисовать в Figma диаграмму, не буду, так как в этом легко разобраться. Проблемы могут возникнуть на этапе, когда нужно связать ее элементы, — мы сами с таким столкнулись. Так что рассмотрю процесс рисования стрелок в Figma.

Для связывания элементов диаграммы понадобится отдельный сервис Figma для работы в команде — FigJam. Расширение называется Give Me FigJam Connectors. Что дальше: 

1. Нужно зайти в FigJam.

2. Скопировать стрелку.

3. Вставить в Figma.

4. Выделить стрелку.

5. Вызвать плагин и нажать Set. Так плагин понимает, какую именно стрелку использовать по умолчанию.

6. Выделить два элемента, вызвать плагин и нажать Add a Connector или воспользоваться горячими клавишами Command + Option + P.

Произвольный пример:

Более сложный пример. Для начала нужно разработать мастер-компоненты для элементов диаграмм: 

Draw.io (сейчас — Diagrams.net)

Draw.io — бесплатный сервис для создания блок-схем, прототипов, инфографики и диаграмм. Работает из браузера. Как и Figma, позволяет совместно редактировать макет. 

В Draw.io есть предопределенный набор элементов для конструирования диаграмм. Если нужно быстро накидать будущую архитектуру приложения, то это идеальный вариант. Разработчики используют сервис как раз для этих целей. Из плюсов можно выделить то, что элементы могут быть соединены между собой стрелками.

Пример диаграммы активности: 

Пример диаграммы компонентов:

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

Расскажите, что используете вы — совпадают впечатления?