Mindmap — как планировать наглядно задачи

Вам знакомо чувство, когда список задач превращается в неподъемную стену текста?  В этой статье я покажу, как с помощью связки VS Code и PlantUML вы сможете превращать такие списки в наглядные диаграммы, которые так же легко менять, как обычный текст. И да, в лучших традициях, суть начнется с третьего раздела, а первые два — это лирическое отступление, которое можно и не пропускать.

1. Нытье без повода
... И вот казалось бы, есть задача, берешь и делаешь! Ах да, чуть не забыл: делать надо хорошо, а плохо не делать. И тайм-менеджмент, куда без него: съесть утром лягушку, или какие там еще «эффективные» методы обмана своего мозга? Большинство из них — не работают. Потому что мозг, даже не очень умный, быстро понимает, что его пытаются обдурить и всячески этому препятствует.  А вот наглядность — это да. Наглядность наш мозг вроде как любит. Желательно с картинками. А еще свистелки и перделки, лишь бы ничего не делать...

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

— Что тут думать! Трясти надо!
Анекдот​

Самое простое, когда пришла задача, это ничего не планировать, а сразу начать ее делать. Как говорится, отличный план, надежный, как швейцарские часы (с). По этому «плану» очень хорошо начинать любую задачу. А потом другую. А потом еще штук пять. И ни одну не закончить. Ситуацию зачастую усугубляет еще и нехватка времени. В результате, даже при минимальной пробуксовке, текущая задача откладывается на потом, берется другая, «более срочная», которую ждет та же самая участь.

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

  1. Найти крылатых свиней
  2. Заготовить крылья
  3. Ощипать крылья
  4. Приготовить
  5. Подать к столу

 Уже лучше, шансов закончить задачу больше, но как только план начинает расширяться, то есть, обрастать подробностями, то его наглядность рушится, а следом начинает буксовать и сама работа.

Попыткой визуализировать план может быть блок-схема. Например, так:


 

Преимущество по сравнению с планом — более наглядно. Недостаток — такое рисуется один раз, а каждое исправление (порой даже добавление, а тем более удаление одного блока) требует усилий, времени, которого снова нет, в результате проект уходит в тот же долгий ящик, что и остальные.

Вот если бы был инструмент, который бы сохранял наглядность блок-схем и при этом оставался таким же легким в редактировании, как обычный план... И такой инструмент есть!

3. На помощь пришла автоматика

Для начала немного практических примеров, а потом рассмотрим, как это настроить у себя.

Представьте, вы просто пишете текст в столбик

* Приготовление свиных крылышек
** Найти крылатых свиней
** Заготовить крылья
** Ощипать крылья
** Приготовить
** Подать к столу

 
После этого нажимаете ALT+D и мгновенно получаете наглядную диаграмму

  
Получается весьма наглядно. Идем дальше. Допустим, мы утвердили эту схему, а дальше схема стала обрастать подробностями. Например, так может выглядеть расширение первого шага

* Приготовление свиных крылышек
** Найти крылатых свиней
*** Исследовать архивные записи в Библиотеке Александрии
*** Расшифровать кулинарные свитки Мерлина
*** Организовать экспедицию на остров Лапута
** Заготовить крылья
** Ощипать крылья
** Приготовить
** Подать к столу


 

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

* Приготовление свиных крылышек
** Найти крылатых свиней
***_ Исследовать архивные записи в Библиотеке Александрии
***_ Расшифровать кулинарные свитки Мерлина
***_ Организовать экспедицию на остров Лапута
** Заготовить крылья
** Ощипать крылья
** Приготовить
** Подать к столу

 
Повышаем наглядность. Как на счет того, чтобы раскрашивать шаги по мере их выполнения? Нет ничего проще! Достаточно добавить это в описание:

*GO Приготовление свиных крылышек
**GO Найти крылатых свиней
***_DONE Исследовать архивные записи в Библиотеке Александрии
***_ Расшифровать кулинарные свитки Мерлина
***_ALERT Организовать экспедицию на остров Лапута
** Заготовить крылья
** Ощипать крылья
** Приготовить
** Подать к столу

Теперь сразу видно, какие шаги в работе, какие еще не начинали делать, а какие — супер-срочные. 

Саму диаграмму можно дорабатывать сколь угодно долго, не теряя при этом в наглядности и удобстве редактирования. Например, так

Раскройте (большой список)
*:
Приготовление
Свиных Крылышек
;
left side
** Легенда
***BACKLOG Бэклог
***WAIT В ожидании
***GO В работе
***WARN Замечание
***ALERT Срочно
***DONE Сделано
right side
** 1. Добыть ингредиенты
*** Найти источник крылатых свиней
****_ Исследовать архивные записи в Библиотеке Александрии
****_ Расшифровать кулинарные свитки Мерлина
****_ Организовать экспедицию на остров Лапута
*** Заготовить сырье
****_ Договориться с фермером о поставке свежих крыльев
****_ Провести ветеринарный контроль качества
****_ Охладить сырье с помощью кристаллов Эль-Дорадо
** 2. Подготовить ингредиенты
***_ Получить сертификат Гильдии Мясников
*** Обработать крылья
****_ Очистить от перьев и загрязнений
****_ Промыть в водах Леты
****_ Нарезать по суставным сочленениям плазменным ножом
** 3. Приготовить блюдо
*** Создать маринад
****_ Добыть эликсир бессмертия
****_ Собрать слезы феникса
****_ Добыть кораллы с морей Титана
*** Провести термообработку
****_ Разжечь огонь древесиной Иггдрасиля
****_ Калибровать жар до 233°C с помощью пиромантийного кристалла
****_ Контролировать прожарку с помощью дракона-регулятора
** 4. Организовать подачу
*** Обеспечить особые условия
****_ Стабилизировать температурную суперпозицию
****_ Раздать антигравитационные приборы гостям
***_ Разложить порции на облачных тарелках
***_ Настроить лиру Орфея для акустического сопровождения

 
А теперь представьте, если нужно пару блоков переставить при обычном подходе? Или раскрасить. Или просто поменять текст. Здесь же всё это делается простейшим редактированием небольшого списка. В общем, если понравилось, переходите к следующей главе — настроим этот инструмент у себя. Тем более, что он доступен под любой осью.

4. Установка VS Code

Если кратко, то VS Code — это продвинутый и весьма удобный текстовый редактор с большим количеством плагинов (дополнений) под любые нужды. К таким плагинам относится и Plantuml, который и позволяет превращать текст в разного вида диаграммы. Ниже будет описана установка этого всего под Linux (Xubuntu 22.04), Windows 11 и, по заявкам олдов, даже под Windows 7. Настройка везде одинаковая и будет рассмотрена в следующем разделе статьи. Поехали!

4.1. Установка под Linux (Xubuntu 22.04)
Скачать VS Code можно на официальном сайте: https://code.visualstudio.com/Download.

Выбираем блок с пингвином, нажимаем большую кнопку «deb» и ждем

Далее можно двойным щелчком запустить файл, но гораздо быстрее через консоль:

sudo dpkg -i Downloads/code_1.103.1-1755017277_amd64.deb

После установки можно будет через «Пуск» найти программу Visual Studio Code, либо в консоли просто набрать code. Откроется интерфейс программы, после этого можно начинать настройку (см. следующий раздел статьи).

4.2. Установка под Windows 10/11
Скачать VS Code можно на официальном сайте: https://code.visualstudio.com/Download.

Нажмите большую кнопку Windows (не то чтобы были варианты, но вдруг), дождитесь загрузки. Дальше запустите установщик и стандартным «Окей»-«Далее»-«Далее» установите программу. Дальше в Пуске найдите VS Code и запустите. Откроется интерфейс программы, после этого можно начинать настройку (см. следующий раздел статьи).

4.3. Установка под Windows 7
Вот тут чуточку более печально, потому что эта ось давно не поддерживается. Но в целом установка возможна.

Последняя доступная версия 1.81.1 (потом хром перестал поддерживать семерку). Скачивается в виде архива:

https://update.code.visualstudio.com/1.81.1/win32-x64-archive/stable

(зеркало)

Теперь достаточно куда-нибудь распаковать архив. Для удобства имеет смысл отправить значок VS Code на рабочий стол в виде ярлыка.

Теперь можно запускать VS Code — откроется интерфейс программы, после этого можно начинать настройку.

5. Установка и настройка плагина PlantUML

Настройка VS Code во всех ОС выглядит одинаково.

На скриншоте ниже показаны основные шаги установки плагина.

  1. Перейдите в управление плагинами.
  2. Вбейте в поиске «plantuml».
  3. Установите, нажав кнопку Install (или «Установить», в зависимости от языковых настроек).

Во время установки могут спросить, доверяем ли автору плагина — говорим да:

 
После установки можно приступать к настройке в соответствии со скриншотом ниже:

   
  1. Нажмите на плагине шестеренку, либо просто правую кнопку мыши, выберите в контекстном меню «Settings».
  2. В открывшемся окне настроек пролистайте до пункта «Plantuml: Render» и выберите в выпадающем списке пункт «PlantUMLServer».
  3. В текстовом окне настройки «Plantuml: Server» вбейте адрес сервера: https://www.plantuml.com/plantuml (я использую свой личный https://plantuml.4lab.su/plantuml).
  4. Теперь можно закрыть все вкладки (кнопки «Сохранить» нет, настройки применяются автоматически).

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

6. Настройка языка VS Code

По умолчанию VS Code идет на английском языке, при желании это можно исправить.

  1. Нажимаем Ctrl+Shift+P
  2. Набираем текст «display» и выбираем «Configure Display Language» 
  3. Выбираем русский язык — после автоматической установки и перезапуска VS Code можно будет наслаждаться русскоязычным интерфейсом.

     

7. Создание диаграмм в VS Code (простой вариант)

Последовательность действий представлена на скиншоте ниже.

  
В простейшем варианте можете нажать Ctrl+N (или Файл ⇒ Новый текстовый файл (1)).

В открывшемся окне просто вбейте следующий текст (2):

@startmindmap
* Приготовление свиных крылышек
** Найти крылатых свиней
** Заготовить крылья
** Ощипать крылья
** Приготовить
** Подать к столу
@endmindmap

Описание диаграммы начинается и заканчивается ключевыми словами @startmindmap и @endmindmap соответственно. Каждый узел предваряется одной или несколькими звездочками в соответствии с правилами:

  1. Корневой узел предваряется одной звездочкой.
  2. Дочерние узлы начинаются двумя звездочками.
  3. Узлы следующего уровня иерархии оформляются увеличением количества звёздочек.
  4. Каждый узел сопровождается текстовым описанием сразу после звёздочек, через пробел.
  5. В одной диаграмме можно размещать несколько корневых узлов, каждый из которых образует свою ветку.

Теперь нажмите Alt+D — и вы увидите диаграмму. Если на нее навести курсор, то появится панель управления. Например, можно скопировать диаграмму в буфер обмена (3) — желательно только предварительно увеличить масштаб.

Если при нажатии Alt+D диаграмма не создается, проверьте, что текстовый курсор находится в области между startmindmap и endmindmap

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

(нажмите для раскрытия)
* Найти источник крылатых свиней
** Исследовать архивные записи в Библиотеке Александрии
** Расшифровать кулинарные свитки Мерлина
** Организовать экспедицию на остров Лапута

 
Для сравнения, диаграмма может выглядеть так:

 
Кажется, во втором случае результат получается лучше.

8. Усложняем диаграммы

В первую очередь, можно порекомендовать подробную документацию по Mindmap (или англ. версия). Это для тех, у кого много времени :-) К счастью, plantuml поддерживает своего рода подключение библиотек.

Иначе говоря, можно вообще не читать документацию, просто добавляем строчку:

!include mindmap_inc.puml

Предварительно нужно положить в папку с диаграммой файл mindmap_inc.puml (см. архив ниже).

1756499631_mindmapiinc.puml.zip

По итогу описание диаграммы может выглядеть так:

@startmindmap

!include mindmap_inc.puml

* Найти источник крылатых свиней
** Исследовать архивные записи в Библиотеке Александрии
** Расшифровать кулинарные свитки Мерлина
** Организовать экспедицию на остров Лапута

@endmindmap

Подключение данного файла дает следующие возможности:

  • удобная раскраска блоков диаграммы;
  • автоматический перенос длинных строк;
  • увеличенное расстояние между блоками.

Возможно, раскраска блоков диаграммы не совсем очевидна. Для наглядности можно нарисовать легенду:

*WARN Легенда
**BACKLOG Бэклог
**WAIT В ожидании
**GO В работе
**WARN:Содержит
замечание
(в скобках);
**ALERT СРОЧНО!
**DONE Сделано

Эту легенду можно держать отдельно или встроить прямо в основную диаграмму.

Для того, чтобы раскрасить блок, нужно просто сразу после звездочки или нижнего подчеркивания (для блоков без рамки) вставить одно из ключевых слов: WARN/BACKLOG/WAIT/GO/ALERT/DONE. Например, хотим в нашей мини-диаграмме показать, что все шаги в работе, но какой-то в приоритете:

@startmindmap

!include mindmap_inc.puml

*GO Найти источник крылатых свиней
**GO Исследовать архивные записи в Библиотеке Александрии
**GO Расшифровать кулинарные свитки Мерлина
**ALERT Организовать экспедицию на остров Лапута

@endmindmap

Результат:

  
При желании можно экспортировать результат — например, чтобы послать другу :-)

9. Экспорт диаграммы

Диаграмма с генерацией в режиме реального времени — это, конечно, хорошо, но нередко надо бы «заморозить» текущее состояние в виде картинки. Нет ничего проще:

  1. Нажмите Ctrl+Shift+P.
  2. Наберите текст plantuml.
  3. Выберите Export Current Diagram.
  4. В выпадающем списке выберите png или svg 

 
Если всё пройдет без ошибок, то в текущей папке появится папка out с изображением диаграммы. По опыту, лучше выбирать генерацию svg, а потом конвертировать его в PNG любым онлайн-конвертером (например, https://www.freeconvert.com/svg-to-png).

Как и в случае выше, если генерация не удалась, проверьте, что текстовый курсор находится в области между startmindmap и endmindmap

10. Ошибки и глюки

Иногда вы нажимаете Alt+D — и получаете вот это:

 
... или вот это:

 
К сожалению, отладка и поиск ошибок plantuml может стать болью — главным образом потому, что описание ошибки представляется в виде картинки (сразу после красной надписи на первом скрине), которую нельзя даже скопировать. Усугубляется всё еще тем, что эта картинка зачастую получается обрезанной. Попробуйте отменить последнее действие при редактировании или проверьте, что после звездочек не забыли поставить пробел или попросите deepseek проверить синтаксис.

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

11. Послесловие

Вот и всё, что можно базово рассказать об автоматическом генераторе диаграмм. Потратив немного времени на его изучение, вы сможете делать быстрые наброски планов и расширять их до любой степени сложности, не теряя в наглядности.