Перейти к основному содержимому

Пример создания схемы в Mermaid

Проблема: адаптация новых сотрудников​

Ситуация знакома многим:

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

Решение​

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

Как Mermaid решает задачу? ️​

Всего за 20–30 минут вы сможете:

  1. Создать понятные схемы
  2. Визуализировать процессы работы
  3. Сделать наглядной вашу инструкцию
Подсказка

Это сэкономит часы, а иногда и дни рутинных объяснений!

Пример использования бизнес-процесса​

"Обработка тех. поддержкой обращения по инциденту от клиента"

Шаг первый (Потоки и графы)​

Так как выбранный нами для примера бизнес-процесс протекает в 3-х потоках (Клиент, Тех. поддержка, Менеджер). Удобней всего использовать тип диаграммы "Поток с верху вниз" (flowchart TD), где нам понадобиться три поддиаграммы и для наглядности мы их помести в общую. Обязательно каждому графу присвоим имя, нам оно понадобиться позже.

Код:

flowchart TD subgraph S0["Обращения в ТП"]
  subgraph S1["Клиент"] end
  subgraph S2["Тех. поддержка"] end
  subgraph S3["Менеджер"] end
end

Шаг второй (Узлы)​

Теперь в каждом графе мы создадим узлы с разным начертание

  • круг: начало и конец (circle);
  • прямоугольник: действие (rounded);
  • ромб: условие (diamond).

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

Сам синтаксис написания узла выберем следующий:

A@{ shape: circle, label: "Проблема"} - при таком синтаксисе легко найти имя узла, стиль и текст.

Указав все узлы в графах, которые нам потребуются, получим код:

subgraph S0["Обращения в ТП"]
   subgraph S1["Клиент"]
   A@{ shape: circle, label: "Проблема"} 
   B@{ shape: rounded, label: "Ответ клиента"} 
   C@{ shape: rounded, label: "Запрос необходимой инфо."} 
   D@{ shape: rounded, label: "Предоставление решения"}
   E@{ shape: diamond, label: "Решение удовлетворило"}
end

Шаг третий (Связи)​

Добавим связи между узлами. Соблюдая движение по бизнес-процессу. Нам понадобятся стрелки и стрелки с текстом:

  • -->: переход от узла к узлу, обычная стрелка.
  • -->|да|: переход от узла условий к узлу, который выполниться при положительном ответе, стрелка с текстом «да».
  • -->|нет|: переход от узла условий к узлу, который выполниться при отрицательном ответе, стрелка с текстом «нет».

Дополним к имеющемуся, следующий код:

A-->F 
  F-->G 
  G-->H 
  H-->|да|J 
  H-->|нет|K

Шаг четвертый (Оформление)​

Здесь мы добавим немного красок, для наглядности нашей схемы. Для этого будем использовать классы стилей: classDef PaleGreen color:#000000, fill:#98FB98

Параметры стиля:

  • fill – цвет фона узла (например - #98FB98)
  • stroke – цвет контура узла (например - #98FB98)
  • stroke-width – толщина контура узла (например - 2px)
  • stroke – dasharray: сплошной или пунктирный контур узла (например - 5 5)
  • color – цвет текста (например - #FFFFFF)
  • font-size – размер текста (например - 12pt)

Чтобы применить стил к узлу используем синтаксис: A:::DarkRed

Дополним ранее написанный код установкой стилей у графов и узлов:

s1:::Pink 
s2:::PowderBlue 
s3:::LightGrey 
classDef Pink fill:#FFC0CB

Итоговая блок схема процесса​

Mermaid