Диаграмма блоков — это структурированная система компоновки, используемая для представления сложных программных архитектур, аппаратных платформ или организационных моделей. Введена нативно в Mermaid.js, блокдвигатель рассматривает холст компоновки как абсолютную математическую матрицу сетки. Это обеспечивает точный контроль над выравниванием столбцов, изолированными границами вложенных компоновок, блоками структурного интервала и явными конфигурациями подключения портов к краям.
Понимание стратегии матрицы сетки
В отличие от стандартных диаграмм свободной формы, которые динамически определяют траектории компоновки, диаграмма блоков основана на жесткой системе линейной координатной сетки:
- Предел столбцов: Вы устанавливаете строгий горизонтальный предел с помощью параметра
столбцымодификатора. Когда сетка заполняется блоками, дополнительные элементы автоматически переносятся на следующую строку без нарушения компоновки. - Размер по полям сетки: По умолчанию каждый блок занимает одну координатную ячейку ($1 times 1$). Вы можете изменить это поведение, назначив явные ширины столбцов, чтобы элементы идеально перекрывали несколько дорожек.
Базовая структура синтаксиса
Каждая компоновка начинается с заголовка объявления блок объявления. За ним следует установка ширины строки с помощью ключевого слова столбцы и объявление блоков на последовательных строках.
блок
столбцы 3
componentA["Первый блок"]
componentB["Средний блок"]
componentC["Правый блок"]
Справочник по синтаксису
В таблице ниже приведено разбиение основных параметров данных, ключевых слов пользовательского стиля и структурных контейнеров, нативно распознаваемых интерпретатором блоков.
| Компонент синтаксиса | Требование типа | Описание и правила визуальной компоновки |
|---|---|---|
| Объявление | Идентификатор ключевого слова | Инициализирует холст блочной матричной сетки. Должно использоваться точное блок строка заголовка. |
| Набор столбцов | Ключевое слово + Целое число | Определяет общее количество горизонтальных слотов до переноса строк (например, столбцы 4). |
| Стандартный блок | ID + необязательная метка | Создает стандартный блок данных: id["Текст метки"]. Декораторы форм соответствуют синтаксису блок-схемы (например, (()) для окружностей, [()] для баз данных). |
| Переопределение размеров блока | Блок параметров с двоеточием | Переопределяет стандартный размер сетки $1 times 1$ за счёт явного назначения пользовательских блоков ширины столбцов: id:ширина. |
| Элемент пространства | Зарезервированное ключевое слово | Вставляет невидимый структурный бланк $1 times 1$ в активную строку с использованием точного пробел ключевого слова. Вы можете умножить ширину блоков прямо в строке, например пробел:2. |
| Стрелка блока | Специализированный идентификатор сущности | Отображает толстую, структурированную стрелку перехода внутри ячейки сетки: arrowId<["Метка"]>(направление). Направления включают вверх, вниз, влево, вправо. |
| Композитный обертка | Блок / Конечный контейнер | Вкладывает автономную изолированную матрицу подсетки непосредственно внутри слота родительского блока: блок:ПодИД ... конец. Подблоки могут объявлять собственные независимые ограничения столбцов. |
Расширенная функция: явные размеры блоков и модификаторы пространства
Для несимметричных макетов вы можете передавать явные горизонтальные размеры непосредственно на стандартные блоки или разделители пространства, используя разделитель в виде двоеточия (:ширина). Это заставляет элементы растягиваться на несколько позиций сетки без лишних проблем.
блок
столбцы 4
wideComponent["Широкий заголовок панели управления"]:4
leftBar["Боковая панель"] space:2 rightBar["Основной панель"]
Расширенная функция: типы краев, направления и параметры соединений
Соединения внутри блокадвигатель делится на стандартные смысловые линии и стрелки структурных блоков. Стандартные линии соединения поддерживают указание явных направляющих ограничений, чтобы определить, как линии обвиваются вокруг элементов.
1. Стандартные соединители линий
Соединения блоков используют стандартные операторы ссылок (-->, --, <-->). Однако вы можете управлять маршрутизацией, добавляя направления или модификаторы в круглых скобках:
A --> B: Рисует стандартную направляющую линию от элемента A к элементу B.A -- x B: Рисует путь соединения, завершающийся меткой «X», указывающей на заблокированный путь.A -- o B: Рисует путь соединения, завершающийся точкой с открытым кругом.
2. Динамические стрелки блоков макета
Стрелки блоков рассматриваются как реальные компоненты макета, занимающие реальный блок индекса координат в матрице бюджета строк. Они используют синтаксические свойства больше-чем и меньше-чем для отображения физических маршрутов потоков:
block
columns 3
producer["Data Producer"]
midArrow<["Transform Traffic"]>(right)
consumer["Data Consumer"]
Расширенная функция: вложенность матрицы подблоков (составная группировка)
Оболочка block:idоболочка функционирует как изолированная среда контекста блока макета. Контейнер группы приложений может установить собственное уникальное количество горизонтальных столбцов внутри подблока, позволяя сложным компонентам плотно группироваться без влияния на интервалы глобальной сетки шаблона родительского холста.
block
columns 2
rootGateway["Global Gateway"]
block:microserviceCluster
columns 3
auth["Auth Node"]
api["Core API"]
worker["Worker Engine"]
end
Реальный чертеж: многоуровневая инфраструктура с кэшем
Этот всесторонний чертеж с несколькими строками демонстрирует чистую инфраструктуру для промышленного использования. Он устанавливает макет сетки обработки из 3 столбцов, использует структурныепространствоэлементы для изоляции уровня базы данных, отображает толстую направленную внизblockArrow, и изолирует отдельный внутренний контейнер подсистемы, используя вложенныйblock:id ... end композитный обертка.
block
columns 3
%% Строка 1: Сервисы входа
dnsClient(("Веб-клиент"))
loadBalancer["Балансировщик нагрузки на краю"]
space
%% Строка 2: Поток соединения вниз к микросервисам
space
downRoute<["Перенаправление трафика"]>(down)
space
%% Строка 3: Кластер среды композитного приложения
block:appCluster
columns 2
authService["Аутентификация"]
apiEngine["Рабочий процесс основного API"]
end
space
database[("База данных PostgreSQL")]
%% Установить чёткую структурную выравнивание линий матрицы-к-матрице
loadBalancer --> appCluster
appCluster --> database
Распространённые синтаксические ошибки и ограничения системы
При создании точных матричных карт сетки помните об этих проверках валидности, чтобы избежать ошибок парсинга:
- Соблюдение лимита колонок: Тщательно отслеживайте количество колонок. Если вы указываете
columns 3и пишете 4 последовательных блока в строке, четвёртый блок автоматически перейдёт на строку 2, что может нарушить заданные пути соединения слева направо. - Порядок вложенных композитов: При создании внутренних контейнеров с помощью
block:id, вы всегда должны закрыть рабочую область подсетки с помощьюendключевого слова на отдельной строке перед объявлением последующих элементов. Если не закрыть блок, построение диаграммы остановится. - Ограничения целей стрелки блока: Свойство направления, заключённое в скобки после стрелки блока (например,
(up),(down)), должно быть строчным литералом, точно соответствующим ключевым словам системы. Заглавные буквы в направлении вызовут ошибки обработки. - Коллизии границ меток: Стандартные декораторы форм диаграмм (например, скобки
()для круглых блоков или фигурные скобки{}для алмазов) полностью поддерживаются. Убедитесь, что все текстовые метки отображения внутри фигур используют чистые двойные кавычки, чтобы избежать удаления символов.