Діаграми дуже корисні, особливо для роботи в команді, хоча часом допомагають і самому собі нагадати принципи роботи власної системи. І для створення діаграм я дуже часто користуюся мовою розмітки PlantUML й зараз буду вас її навчати.
Раніше я користувався Draw.IO, але це просто муки пекельні, я не знаю, як цим лагучим недосервісом можна всерйоз послуговуватись. І зробити діаграму незграбними рухами мишки дезорієнтивним вебінтерфейсом це ще пів біди — як тільки ж у діаграмі Draw.IO потрібно буде щось змінити, вам захочеться плакати від цього всього біснуватого дьоргання та перетягування ламаних кривих. А от PlantUML:
- Професійно виглядає
- Легко писати — синтаксис елементарний, самі побачите (звісно, ще легше у Vim).
- Компілюється в багато форматів (PNG, SVG, PDF, навіть \LaTeX )
- Просто поширювати й редагувати в команді:
- Файли можна піддати контролю версій, наприклад, за допомогою git.
- Остання теза ще впотужнюється тим, що в Gitlab та інші сервіси інтегрована можливість відображення діаграм на місці блоків коду PlantUML.
- Зберігається локально. Це важливіше, ніж вам зумерам здається. У мене пару разів тупо зависав draw.io і я мусив робити все заново. З PlantUML я ніколи так не попадусь: навіть якщо мій власний комп’ютер раптово вимкнеться чи безнадійно зависне (дуже малоймовірно), залишиться свап-файл віму, з якого я зможу відновити свою роботу.
І не треба писати мені, що “ШІ вже давно РОБИТЬ ДІАГРАМИ і скоро ВСІХ ЗАМІНИТЬ!!” — ШІ робить фігню, а не діаграми. І їх ви взагалі редагувати не можете.
Але це стосується картинок. Насправді ж від нього можна отримати адекватні діаграми — як не дивно, згенерувавши код PlantUML.
Ось корисні ресурси, з якими ви швидко опануєте PlantUML:
- https://plantuml.com/ — сайт PlantUML. Читайте мовну довідку, доступну на цьому сайті.
- https://real-world-plantuml.com — тут багато прикладів діаграм.
- https://crashedmind.github.io/PlantUMLHitchhikersGuide/
Окей, погнали.
Як поставити й компілювати діаграми
Ви можете робити діаграми навіть у браузері (на сайті PlantUML.com), але я раджу вам завантажити PlantUML. Вона важить всього кілька мегабайтів. Ви можете поставити її улюбленим менеджером пакунків чи скачати з сайту.
[sasha@muse ~]$ pacman -S plantuml
Якщо ви хочете компілювати PDF, то потрібно скачати іншу збірку PlantUML, спеціальну для експорту PDF. Інструкції є на сайті, а якщо ви користуєтесь Arch Linux, то в AUR є пакунок plantuml-pdf.
До речі, про компіляцію: просто даємо plantuml шлях до файлу з розміткою:
[sasha@muse ~/puml]$ plantuml wbs.puml
Але для початку нам треба щось написати. Нехай це буде WBS.
А і ще: Якщо ви користувач Vim, то можете поставити собі файл синтаксису PlantUML, хоча тут усе так просто пишеться, що й уві сні не загубишся.
Верстаєм
WBS — це діаграма для розбиття якоїсь великої задачі на дрібні підзадачі, які легко організувати, відслідкувати та виконати. Під час побудови спираємось на правило 100% — задачі нижчого рівня в сумі утворюють 100% задачі вищого рівня.
Наприклад, створімо WBS створення відео для каналу на YouTube. Якби ми були модним ютубером, то він виглядав би так:
@startwbs
* Відеопродакшн
** планування
*** брейнстормити трендові ідеї, \n на які клюнуть норміси
*** написати сценарій
*** відрепетирувати
** запис відео
*** намалюватись
*** поїхати на студію
*** виставити світлолампочки
*** зачитати сценарій на камеру
** монтаж відео
*** вирізати бекання та мекання (чорноробота)
*** припорошити відеоряд ефектами \n й модними переходами
*** нарізати вирізки для тіктока
** підготовка до публікації
*** створити клікбейтну прев'юшку
*** провести рекламну кампанію \n в ТЕЛЕГРАМ-КАНАЛІ
*** купити рекламу в розетка юа
*** викласти вирізки в тікток
** публікація
*** завантажити відео
*** прем'єра на ютубе
@endwbs
Але в нас тут працює трошки інша модель:
@startuml
start
:написати сценарій?;
repeat
:записати відео;
repeat while (Норм?) is (Ні) not (Перемога)
stop
@enduml
Круть! Мова настільки проста, що навіть пояснювати нічого не треба. Що за що відповідає видно з першого погляду!
Стилювання
Якщо вам ці діаграми здаються якимись хмурими, то не проблема: діаграми PlantUML можна по-різному стилювати.
Мені подобається користуватися скінами:
я просто пишу, наприклад, skin rose
і отримую прекрасні діаграми.
Але це не єдиний метод стилювання.
У PlantUML ще є купа готових тем, синтаксис ужитку такий:
!theme назва-теми. Дивіться сайт PlantUML за темами.
Також можна користуватись CSS, але власноруч оформляти кожен елемент діаграми — задротство, тож я не буду це показувати.
Також ви можете по-різному форматувати текст:
Цей текст **жирний**
Цей //курсивом//
Цей ""моноширинний""
Цей --викреслений--
Цей __підкреслений__
Цей ~~підкреслений хвилькою~~
Це просто <:sunglasses:>
І додавати картинки таким чином:
<img:шлях/до/картинки.кек>
Звісно, це далеко не все
В цьому посібнику я охопив дрібнесеньку частку PlantUML, щоб організувати вам швидкий старт і ви перестали мучитись із draw.io. Але мова здатна на багато більше. До речі, я казав, що тут можна верстати математику LaTeX-ом? А можна. Так як можна й багато інших безмежно крутих речей, тому раджу прошерстити добре сайти, на які я послався на початку: ніколи не знаєте, які корисності знайдете на тій чи іншій сторінці!