Составление блок-схем за 5 минут: GPT + mermaid

Я люблю визуализировать процессы в наглядные схемы. Схемы, карты — это всегда удобно и эффективно. Сразу видно, как работает система или как связаны её элементы.

Иногда нужно просто представить визуально то, что изложено текстом. Это помогает лучше понимать сложные концепции.

Однако не всегда есть готовая схема, а рисовать её вручную требует времени и усилий. К тому же лично для меня Miro, например, зачастую становится ловушкой перфекционизма — можно потратить часы на оттачивание дизайна, забыв о сути задачи.

Мой алгоритм визуализации

В поисках более простого и быстрого подхода я нашёл для себя связку: GPT + Mermaid.

Mermaid — это визуализатор блок-схем, который использует простой текстовый синтаксис для создания графиков и диаграмм. А GPT помогает быстро формировать MMD-код на основе идей или набросков.

Пример из практики и пошаговое решение задачи

Описываю весь процесс на собственном примере

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

Я показал GPT свою схему и написал:

«Это схема продвижения моей стартап-мастерской телеграм-ботов. В центре — канал, от него стрелками обозначены взаимодействия с ботами, блогом, группой (коммьюнити). Видны точки входа (user, reader). Хочу визуализировать это в Mermaid, чтобы схема была простой, но информативной. Выведи MMD-код.»

Первая генерация

Первая генерация MMD-кода в целом выглядит неплохо. ГПТ предложил удобное разделение на пространства, которого у меня не было, и логика схемы оказалась почти верной.

Однако я заметил несколько моментов для доработки:

Пространство «пользователи» названо нелогично.
Не указано, что @botikot — это канал.
Неправильное направление и количество стрелок между читателем и блогом.
Нужно было показать не два бота, а произвольное множество (Bot 1 ... Bot N).

Сначала я подумал, что GPT не заметил соединение между блогом и ботами. Но хотя такая связь возможна, она мешает наглядности, а я просил ГПТ не перегружать схему. Все правильно сделал.

Кроме того, я захотел:

Выделить центральный элемент (канал) цветом.
Унифицировать схему (всё на русском, добавить username группы).
Сделать стрелки обоюдными, где это необходимо.
Добавить эмодзи для наглядности.

ГПТ не заметил (или посчитал лишним) соединения между блогом и ботами. Пожалуй, соглашусь, что оно скорее избыточно. Хотя такая связь возможна, но она мешает наглядности, а я просил ГПТ не перегружать схему.

Сомневаюсь:

Если user в единственном числе, что логичнее, то как лучше его связать с ботами? Если связать ко всем, то создаётся впечатление, что один пользователь взаимодействует со всеми ботами. Если писать во множественном числе, то теряется ощущение, что мы рассматриваем конкретные случаи.

Запросил корректировку:

Генерация после корректировки

Что ж, вторая версия схемы полностью меня устроила. Я чуть-чуть доработал её вручную и вот, готово! Как вам?

Итог

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

💻 Как использовать сгенерированный MMD-код

Mermaid поддерживается в веб-сервисах (например, mermaid.live), но я предпочитаю использовать PyCharm. Мне нравится когда всё в одном пространстве и я могу быстро получить графику прямо в редакторе.

Чтобы настроить генерацию схем в PyCharm, нужно выполнить несколько простых шагов:

Установить Node.js и Mermaid CLI.
Настроить виртуальное окружение в PyCharm.
Использовать скрипт на Python для генерации диаграммы из MMD-код

Если вам интересно, могу написать подробную инструкцию по установке и настройке.

Синтаксис разметки mmd прекрасен в своей простоте:

graph LR
    Пользователь --> Бот
    Бот --> Канал
    Канал --> Блог
    Блог <--> Читатель
    Канал --> Сообщество

Ограничения Mermaid

Mermaid прост в использовании, но не рассчитан на сложную кастомизацию. Например, нельзя задать уникальные формы блоков (нет «рупора» для канала или «робота» для бота). Но это и не нужно — цель Mermaid в быстрой и понятной визуализации, а не в создании дизайнерских макетов.

Приложения

1. Изначальная схема от руки

📑 Промпт 2 (корректировка)

Укажи на схеме, что @botikot — это канал. И раз это центральный элемент, давай выделим его цветом (ненавязчиво, не броско).
Перепутано направление и количество стрелок между читателем и телетайпом — обобщи их правильно.
В пространстве ботов поставь три элемента: Bot A, ..., Bot I. Стрелку от User выведи правильно.
User лучше в одном экземпляре, как с Readers. Это лучше показывает логику конкретного случая, но как лучше связать его с множеством ботов? Если один user ко всем ботам, то как будто один пользователь пользуется всеми ботами. Если писать во множественном числе, то пропадает ощущение, что мы рассматриваем конкретные случаи. Получается общее «пользователи», но возможно это нормально. Посоветуй.
Переведи всё на русский.
Измени название пространства «пользователи», чтобы оно логично обобщало users и readers.
Если возможно, сделай стрелки в оба направления там, где это нужно.
Добавь эмодзи для большей наглядности.

3. MMD-код — результат первого запроса

graph LR
    subgraph Пользователи
        UserA(User)
        UserB(User)
        Reader(Reader)
    end
    subgraph Боты
        BotA(Bot A)
        BotN(Bot N)
    end
    subgraph Мастерская Ботов
        Channel(@Botikot)
        Blog(Blog Telegraph.ph)
        Community(Группа ЛАМПА)
    end
    UserA --> BotA
    UserB --> BotN
    BotA --> Channel
    BotN --> Channel
    Channel --> Blog
    Blog --> Reader
    Channel --> Community
    Community --> Channel
    Channel --> Blog
    Blog --> Reader

4. MMD-код — результат второго запроса (после корректировки)

graph LR
    subgraph Аудитория
        Пользователь(Пользователь)
        Читатель(Читатель)
    end
    subgraph Боты
        Бот(Бот A ... Бот N)
    end
    subgraph Мастерская Ботов
        Канал[@Botikot - Канал]
        style Канал fill:#D3E4CD, stroke:#A3B18A, stroke-width:2px
        Блог(Блог Teletype.in)
        Сообщество(Группа ЛАМПА)
    end
    Пользователь --> Бот
    Бот --> Канал
    Канал --> Блог
    Блог <--> Читатель
    Канал --> Сообщество