За прошедшие несколько лет я дважды вел небольшой курс, посвященный объектно-ориентированному проектированию программ и языку UML. Если кто не знает, UML — это не язык программирования, а язык рисования схем (диаграмм). В UML определено множество диаграмм, каждая из которых отображает определенный аспект в разработке программы.

Обучать по этой теме непросто, если у вас нет удобных инструментов для рисования схем.

Draw.io и рисование схем вручную

Два-три первых занятия я предлагаю студентам научиться рисовать схемы на бесплатном веб-сервисе draw.io (он же — app.diagrams.net). Результат рисования удобно хранить в файле формата PNG. Этот графический формат очень распространен, открывается в любых браузерах, позволяет работать с прозрачностью. Самое главное — схему, сохраненную в формате PNG, можно в любой момент снова открыть на веб-сервисе draw.io и отредактировать (при этом в веб-редактор импортируются из формата PNG все объекты, с которыми вы работали, в том же виде).

С помощью draw.io можно рисовать очень красивые схемы любой сложности. Однако, как только вы начнете переходить от самых простых схем к вещам посложнее, у вас всё будет получаться криво и косо, пока вы не возьметесь за чтение документации (чего большинство студентов, естественно, никогда не делает). Нужную информацию можно найти через поисковые системы в официальной документации (https://www.drawio.com/docs/) этого веб-сервиса. Этот веб-сервис быстро развивается, новости можно читать в блоге (https://www.drawio.com/blog/).

Я предпочитаю не читать документацию целиком, а выхватывать из нее нужные мне в данный момент вещи с помощью поисковых систем или нейросетей.

PlantUML и автоматизация рисования схем

На третьем-четвертом занятии можно переходить к автоматизации рисования схем с помощью скриптов. Для этого я предлагаю использовать бесплатный веб-сервис PlantUML (https://plantuml.com).

Нужно сразу отметить главный недостаток PlantUML: с компьютеров у нас в аудитории и с компьютера у меня из дома этот веб-сервис на данный момент доступен только через VPN. Однако, в наше время большинство студентов умеет пользоваться VPN, поэтому эта проблема несколько сглаживается.

В большинстве случаев вы испытываете громадное облегчение при работе с PlantUML по сравнению с рисованием схем в draw.io и других подобных веб-сервисах и программах. Особенно это верно для программистов, которые возвращаются в свою стихию: написание скриптов вместо манипулирования графическими объектами с помощью мыши и настройки свойств этих объектов через графический интерфейс.

Однако, у этой автоматизации есть и обратная сторона. При работе в PlantUML вы не можете детально управлять процессом рисования схемы. Достаточно глубоко погрузившись в работу с PlantUML, вы сможете некоторым образом влиять на порядок рисования схем из своего скрипта, но многие вещи по-прежнему будут вам недоступны. Это цена убыстрения рисования схем. Поэтому я не стал полностью отказываться от draw.io и подобных программ для рисования схем вручную. В тех случаях, когда принципиально важно, как именно будет нарисована схема, я рисую ее вручную в draw.io (но такие случаи бывают очень редко, в большинстве случаев PlantUML справляется хорошо).

Кроме автоматизации рисования схем у PlantUML есть еще одно большое преимущество: на главной странице этого веб-сервиса вам сразу же доступны ссылки на руководства по работе с каждой из диаграмм языка UML. Обычно я открываю в браузере две вкладки: нужное мне руководство и веб-редактор PlantUML для написания скрипта.

Каждое из этих руководств очень подробное, с огромным количеством интересных примеров. Нарисовав парочку схем по одному из таких руководств, вы получите достаточное представление об определенной диаграмме языка UML. Примеры руководств:

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

PlantUML на практике

Для написания скриптов у вас есть не одна, а ряд возможностей. Классический веб-редактор доступен с главной страницы этого веб-сервиса в меню слева через пункт с названием «Online Server» (https://www.plantuml.com). Новый, улучшенный веб-редактор (https://editor.plantuml.com).

У меня на занятиях студенты предпочитали использовать бесплатное расширение к редактору VSCode. Расширение доступно в магазине расширений этого редактора. Уникальный идентификатор расширения: jebbs.plantuml.

Лично я обычно пишу скрипт в текстовом файле с расширением .plantuml в редакторе VSCode, а затем визуализирую его в виде схемы в одном из двух вышеперечисленных веб-редакторов. Оттуда же сохраняю результат в форматах SVG (предпочтительно, так как можно масштабировать изображение без потери качества) или PNG (в случаях, когда SVG не поддерживается нужной мне программой или веб-сервисом).

Пример скрипта для рисования диаграммы деятельности (activity diagram) языка UML для решения задачи из предыдущего поста:

@startuml
start
if (**N** четное?) then (четное)
  if (**N** равно **2**?) then (да)
    :Одно слагаемое:
    **2**; <<#FED5D5>>
  else (нет)
    :Два слагаемых,
    найти перебором
    в массиве **primes**:
    **prime**
    **N − prime**; <<#FED5D5>>
  endif
else (нечетное)
  if (**N** простое?) then (да)
    :Одно слагаемое:
    **N**; <<#FED5D5>>
  else (нет)
    if ((**N − 2**) простое?) then (да)
      :Два слагаемых:
      **2**
      **N − 2**; <<#FED5D5>>
    else (нет)
      :Три слагаемых,
      найти перебором
      в массиве **primes**:
      **3**
      **prime**
      **N − 3 − prime**; <<#FED5D5>>
    endif
  endif
endif
stop
@enduml

Вот что получилось, это изображение в формате SVG: Это стандартный стиль, но скрипты PlantUML позволяют выбирать для одной и той же диаграммы совершенно разные стили. Я предпочитаю стандартный стиль, но в случае необходимости могу подкрасить какие-то блоки диаграммы, чтобы их выделить.

В данном случае я подкрасил пять блоков розовым цветом <<#FED5D5>>. Некоторые части текста я выделил жирным с помощью задвоенных символов-звездочек. PlantUML хорошо справляется с символами из кодировки UTF-8. В данном случае я использовал символ минуса, его номер U+2212.