Синтаксис карты Вардли и руководство по стратегии Mermaid.js

Карта Вардли — это мощная платформа, используемая для бизнес-стратегии, чтобы визуализировать цепочки создания стоимости и отображать эволюцию компонентов. Представлена как встроенная функция в Mermaid v11.14.0+, и wardley-betaдвигатель позволяет командам стратегов, архитекторам и менеджерам продуктов отображать рыночные среды с помощью чистого текста. Размещая технические компоненты в двумерном координатном пространстве, команды могут визуально анализировать зависимости в цепочке создания стоимости, выявлять рыночную инерцию и принимать обоснованные решения о создании или покупке.

Понимание системы координатной сетки

В отличие от стандартных диаграмм свободной формы, каждый компонент на карте Вардли отображается на жесткой двумерной плоскости, основанной на двух десятичных координатах, диапазон которых от 0.0 до 1.0:

  • Видимость (ось Y / первая координата): Измеряет, насколько видим или ценны компоненты для конечного пользователя. Значение 1.0 представляет собой прямой, пользовательский контакт (наибольшая видимость), в то время как 0.0 представляет скрытую базовую инфраструктуру.
  • Эволюция (ось X / вторая координата): Измеряет уровень зрелости рыночного актива. Он перемещается слева направо через четыре различных эволюционных фазы: Генезис (0.0), Индивидуальная разработка (0.25), Продукт/аренда (0.5), и Товар/услуга (от 0.75 до 1.0).

Базовая структура синтаксиса

Каждая диаграмма начинается с заголовка объявления wardley-beta объявления. Затем вы устанавливаете пользовательские опорные точки с помощью якорьключевое слово, отобразите блоки операционной инфраструктуры с помощьюкомпонентключевое слово, и нарисуйте отношения между ними с помощью направляющих стрелок.

wardley-beta
title Простая карта стратегии
anchor Клиент [0.9, 0.5]
component Веб-сайт [0.7, 0.4]
Клиент -> Веб-сайт

 

Справочник по синтаксису

В таблице ниже приведены основные семантические блоки и параметры, необходимые для структурирования карты Уордли внутри ядра интерпретатора Mermaid.

Компонент синтаксиса Тип требования Описание и правила использования
Объявление Ключевое слово-идентификатор Инициализирует холст стратегической сетки. Должно использоваться точноеwardley-beta строка блока.
Заголовок Простая/заключённая в кавычки строка Необязательный заголовок, печатаемый по центру в самой верхней части рабочей области сетки диаграммы.
Границы размеров Пиксели в квадратных скобках Необязательный пользовательский параметр, используемый для переопределения сетки по умолчанию для ширины и высоты холста:size [1200, 700].
Узел-якорь Ключевое слово + метки Устанавливает основного пользователя или покупателя в верхней части матрицы цепочки создания стоимости. Требуются границы координат:anchor Покупатель [Y, X].
Узел компонента Ключевое слово + метки Объявляет независимую техническую функцию или блок активов. Требуются точные границы положения: компонент Core API [Y, X].
Пути соединения Оператор соединения Рисует прямые, структурированные зависимости вниз или горизонтально через узлы с помощью -> синтаксического правила.

Маркеры стратегических действий (Создать, Купить, Аутсорсинг, Рынок)

Чтобы явно документировать стратегические планы выполнения, Mermaid.js позволяет добавлять обертки действий к отдельным компонентам. Эти действия размещают различные фигуры на координатном узле, чтобы мгновенно передать архитектурные решения:

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

Пример реализации синтаксиса:

wardley-beta
component Пользовательский интерфейс [0.80, 0.30] (создать)
component Обработчик платежей [0.45, 0.65] (приобрести)


Реальный чертеж: цепочка создания стоимости артезианского кофейного магазина

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

wardley-beta
title "Карта стратегии кофейни"
size [1100, 650]

%% Основные бизнес-опоры
anchor Владелец франшизы [0.95, 0.55]
anchor Конечный клиент [0.90, 0.65]

%% Уровни операционных компонентов
component Специализированная кофе [0.75, 0.45] (создать)
component Терминал продаж [0.60, 0.60] (приобрести)
component Автоматическое горячее водоснабжение [0.45, 0.75] (рынок)
component Электрическая сеть [0.15, 0.90] (аутсорсинг)

%% Цепочки зависимостей и соединительные пути
Конечный клиент -> Специализированная кофе
Владелец франшизы -> Терминал продаж
Специализированная кофе -> Автоматическое горячее водоснабжение
Терминал продаж -> Электрическая сеть
Автоматическое горячее водоснабжение -> Электрическая сеть


Совет по синтаксису: При объявлении массивов координат помните, что значение вертикальной оси Y (видимость) указывается *первым*, а значение горизонтальной оси X (эволюция) — *вторым*[Видимость, Эволюция]. Перестановка этих позиций — самая распространённая причина неправильной группировки компонентов вдоль нижнего края холста карты.


Распространённые ошибки синтаксиса и ограничения системы

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

  • Строгие диапазоны координат: Координаты должны точно находиться внутри десятичных скобок между 0.0 и 1.0. Использование абсолютных целочисленных пикселей (например, [400, 200]) вместо соотношений макета внутри аргументов узлов вызовет ошибку выполнения системы.
  • Порядок объявления связей: Для чистого отображения макета убедитесь, что все ваши anchor и component метки объявлены и получили координаты *до* написания любых строк связей узлов (A -> B). Ссылка на необъявленный метку может нарушить позиционирование осей карты.
  • Обрамление меток с пробелами: Если имя компонента содержит пробелы, символы или запятые, убедитесь, что оно написано точно. Повторное использование несоответствующих строковых имен внутри путей соединения создаст полностью новый, не позиционированный узел на холсте сетки.
Прокрутить вверх