Диаграмма пользовательского пути описывает шаги, которые предпринимает пользователь для достижения конкретной цели в вашем приложении. В отличие от диаграмм потоков, ориентированных на системы, или диаграмм последовательности, пользовательские пути фокусируются на действиях человека, этапах рабочего процесса и отслеживании удовлетворенности пользователя с течением времени.
Базовая структура синтаксиса
Каждый пользовательский путь начинается с journey объявления, за которым следует заголовок и последовательные разделы, разбивающие пользовательский опыт.
journey
title Пример пользовательского пути
section Название этапа
Название задачи: Оценка: Актор1, Актор2
Справочник по синтаксису
В таблице ниже приведены основные элементы, используемые для построения карты пользовательского пути в Mermaid.js.
| Компонент | Описание | Пример синтаксиса |
|---|---|---|
| Объявление | Инициализирует рендерер диаграммы пользовательского пути. | journey |
| Заголовок | Определяет основной заголовок или цель пользователя в верхней части карты. | title Рабочий процесс входа |
| Раздел | Представляет собой высокий уровень фазы или этапа пользовательского пути. | section Этап открытия |
| Задача | Конкретное действие, предпринятое пользователем в рамках раздела. | Просмотр документации |
| Оценка удовлетворенности | Целое число от 1 до 5, отражающее удовольствие или трудности пользователя. | : 4 : (4 из 5) |
| Актеры | Список ролей, разделенных запятыми, участвующих в выполнении задачи. | Пользователь, Система |
Реальный шаблон: Опыт оформления заказа в электронной коммерции
Этот шаблон демонстрирует полный путь пользователя, отслеживающий опыт клиента при покупке товара в интернете, отслеживая эмоциональные точки боли (низкие оценки) и моменты удовольствия (высокие оценки).
journey
title Онлайн-покупка
section Открытие продукта
Поиск товара: 4: Пользователь
Сравнение цен: 3: Пользователь
Просмотр изображений товара: 5: Пользователь
section Фunnel оформления заказа
Добавить товар в корзину: 4: Пользователь
Создать аккаунт: 2: Пользователь, Система
Ввести данные доставки: 3: Пользователь
Обработка кредитной карты: 1: Пользователь, Платежный шлюз
section После покупки
Получить подтверждение по электронной почте: 5: Система
Отслеживать доставку посылки: 4: Пользователь, Логистика
Совет по синтаксису:Оценки удовлетворенности автоматически окрашиваются рендерером. Оценка 1 или 2 выделяет операционные трудности (красный/оранжевый), оценка 3 — нейтральная (желтый), а оценки 4 или 5 обозначают плавные, успешные взаимодействия (зеленый).
Расширенное понятие: Многопользовательские маршруты
В сложных рабочих процессах задачи редко выполняются одним человеком. Mermaid позволяет назначать нескольким участникам одну и ту же задачу, разделяя их имена запятыми. Это полезно для демонстрации того, где взаимодействие с клиентом требует поддержки на заднем плане или автоматизации со стороны системы.
journey
title Пример поддержки с несколькими участниками
section Случай поддержки клиентов
Подать заявку на проблему: 3: Клиент
Назначить заявку агенту: 4: Система, Администратор поддержки
Исследовать техническую ошибку: 2: Разработчик, Тестировщик QA
Устранить проблему и уведомить: 5: Администратор поддержки
Распространенные ошибки синтаксиса
При написании карт пользовательских маршрутов небольшие ошибки форматирования могут вызвать ошибку в рендерере. Помните об этих трех правилах форматирования, чтобы убедиться, что ваша диаграмма корректно создается:
- Правило двойной двоеточия: Каждая строка задачи должна точно соответствовать структуре
Описание задачи: Оценка: Участник. Пропуск второго двоеточия перед списком участников — самая распространенная причина, по которой диаграмма маршрута не загружается. - Ограничения диапазона оценок: Оценки удовлетворенности должны быть целыми числами от 1 до 5. Передача оценки 0 или числа больше 5 нарушит параметры макета.
- Отступы: Хотя Mermaid гибок в использовании пробелов, соблюдение отступов для задач под соответствующими разделами делает ваши исходные текстовые файлы намного проще для чтения и поддержки по мере роста функциональности продукта.