Что такое диаграмма квадрантов?
A Диаграмма квадрантов — это стратегический инструмент визуализации, используемый для категоризации элементов в четыре различных сектора на основе двух непрерывных переменных (например, затраты против влияния или важность против срочности). Размещая точки данных на двумерной координатной плоскости, разделённой осями X и Y, вы можете чётко различать высокоприоритетные «быстрые победы» от низкоприоритетных «отвлекающих факторов» или долгосрочных «стратегических ставок».
С помощью Mermaid.js, вы можете определить свои квадранты, названия осей и положение точек данных с помощью простого декларативного блока, что позволяет мгновенно создавать профессиональные матрицы решений.
Основное руководство по синтаксису: элементы и конструкции
Чтобы создать корректную, полностью рабочую диаграмму квадрантов в Mermaid, необходимо освоить систему координат, обозначение осей и размещение точек данных.
1. Инициализация холста диаграммы квадрантов
Вы инициализируете холст диаграммы квадрантов в первой строке с помощью ключевого слова quadrantChart ключевого слова. Затем вы определяете метки для четырёх ваших квадрантов и названия для осей X и Y.
quadrantChart
title Матрица приоритизации проектов
x-axis "Низкие затраты" --> "Высокие затраты"
y-axis "Низкое влияние" --> "Высокое влияние"
quadrant-1 "Стратегические ставки"
quadrant-2 "Быстрые победы"
quadrant-3 "Отвлекающие факторы"
quadrant-4 "Крупные проекты"
2. Размещение точек данных
Вы добавляете элементы на диаграмму, указывая их отображаемое имя, за которым следуют координаты X и Y (нормализованные от 0 до 1).
0.0— это начало оси.1.0— это конец оси.
quadrantChart
title Матрица влияния против затрат
x-axis "Низкие затраты" --> "Высокие затраты"
y-axis "Низкое влияние" --> "Высокое влияние"
quadrant-1 "Стратегические ставки"
quadrant-2 "Быстрые победы"
quadrant-3 "Отвлекающие факторы"
quadrant-4 "Крупные проекты"
"Задание A": [0.2, 0.8]
"Задание B": [0.7, 0.2]
Лучшие практики при построении матриц
- Нормализуйте свои данные:Поскольку координаты Mermaid масштабируются от 0,0 до 1,0, преобразуйте свои исходные значения данных в этот диапазон процентов, прежде чем вставлять их в скрипт.
- Четкие метки осей:Всегда включайте описательные метки осей, которые четко определяют, что представляют оси X и Y (например, «Стоимость» против «ROI»). Матрица без определенных осей — это просто случайное рассеянное изображение.
- Ограничьте плотность точек:Если у вас более 15–20 точек на одном диаграмме квадрантов, она станет перегруженной и непонятной. Если у вас более крупный набор данных, рассмотрите возможность разделения его на несколько тематических диаграмм.
Примеры диаграмм квадрантов Mermaid.js из реальной жизни
Пример: матрица приоритизации функций продукта
Этот функциональный чертеж помогает командам по продукту классифицировать функции на основе усилий по разработке и потенциального бизнес-воздействия.
quadrantChart
title Приоритизация функций продукта
x-axis «Низкие усилия» --> «Высокие усилия»
y-axis «Низкое влияние» --> «Высокое влияние»
quadrant-1 «Долгосрочные ставки»
quadrant-2 «Быстрые победы»
quadrant-3 «Низкий приоритет»
quadrant-4 «Крупные инициативы»
«Login API»: [0,1; 0,9]
«Настройка темы»: [0,8; 0,3]
«Платежный шлюз»: [0,6; 0,8]
«Темный режим»: [0,2; 0,2]
Разбор синтаксиса:Присвоив `[0,1; 0,9]` «Login API», мы размещаем его в верхнем левом квадранте (высокое влияние, низкие усилия), помечая его как «Быструю победу». Это позволяет заинтересованным сторонам мгновенно визуализировать приоритеты дорожной карты разработки.