Диаграмма пакетов — это специализированный компонент визуализации, используемый сетевыми инженерами, аналитиками безопасности и разработчиками систем для отображения точной двоичной структуры сетевых протоколов, выделения памяти или заголовков пакетов настраиваемого аппаратного обеспечения. Встроенный нативно в Mermaid.js, этот инструмент заменяет утомительное ручное построение таблиц, автоматически отображая адаптивную, идеально выровненную сетку на уровне битов на основе чистого текстового разбиения полей.
Понимание макета сетки пакетов
В отличие от стандартных диаграмм свободной формы, диаграмма пакетов основана на строгой математической системе сетки, моделируемой непосредственно по сетевым RFC:
- Ширина бита (горизонтальная ось): Двигатель макета по умолчанию автоматически разделяет каждую строку на сетку из 32 бит (охватывающую биты с 0 по 31).
- Автоматический расчет битов: Вы просто указываете размер в битах для каждого поля. Двигатель отрисовки выполняет математические расчеты — автоматически размещает соседние поля в одной строке или аккуратно переносит их на следующую строку, когда суммарный размер превышает порог в 32 бита.
Базовая структура синтаксиса
Каждая диаграмма пакетов начинается сpacket заголовка объявления. За ним следуют блочные поля, объявленные как последовательные пары, соответствующие строгому шаблону"Имя поля": Размер в битах на отдельных строках.
packet
0-3: "Версия"
4-7: "IHL"
8-15: "Тип службы"
16-31: "Общая длина"
Справочник по синтаксису
В таблице ниже приведены основные параметры данных и правила форматирования макета, необходимые для создания диаграммы пакетов в Mermaid.js.
| Элемент синтаксиса | Требование типа | Описание и поведение визуальной сетки |
|---|---|---|
| Объявление | Идентификатор ключевого слова | Инициализирует рабочую область макета протокола на уровне битов. Должно использоваться точноеpacket блок заголовка. |
| Имя поля | Строка в кавычках | Метка, отображаемая внутри блочного пространства. Должна всегда заключаться в двойные кавычки. |
| Размер бита | Положительное целое число | Абсолютная длина битового поля (например, 1 для флагов из одного бита, 8 для байтов, 16 для коротких целых чисел). Задает визуальную ширину. |
| Событие переноса строки | Автоматический трекер | Происходит автоматически каждый раз, когда суммарный размер битов достигает кратного 32 бит. |
Реальный чертеж: Структурная карта заголовка пакета IPv4
Этот всесторонний чертеж отслеживает стандартную структуру пакета маршрутизации в интернете (IPv4). Он демонстрирует, как много-битовые поля, однобитовые флаги и более крупные блоки по 16 бит последовательно собираются внутри стандартной горизонтальной сетки из 32 бит. Поля, достигающие отметки в 32 бита, автоматически переходят на следующую строку.
пакет
0-3: "Версия"
4-7: "IHL"
8-15: "Тип службы"
16-31: "Общая длина"
32-47: "Идентификация"
48-50: "Флаги"
51-63: "Смещение фрагмента"
64-71: "Время жизни"
72-79: "Протокол"
80-95: "Проверка заголовка"
Совет по синтаксису: Если одно объявленное поле больше 32 бит (например, 64-битная криптографическая соль или метка времени), движок отображения плавно обернет и растянет этот блок по вертикали на несколько последовательных строк, используя четкие индикаторы соединения для сохранения читаемости.
Распространенные ошибки синтаксиса и системные ограничения
При создании высокоточных карт документации на уровне байтов, имейте в виду эти параметры устранения неполадок, чтобы избежать ошибок компиляции:
- Обязательные кавычки-обертки: Каждая строка описания поля должна быть заключена в двойные кавычки. Пропуск кавычек приведет к немедленным ошибкам синтаксического анализа.
- Недопустимые размеры битов строки: Назначение толщины значения после разделителя двоеточия должно быть простым, не заключенным в кавычки целым числом. Передача десятичных чисел или буквенных размеров (например,
"Данные": 8бит) приведет к остановке компиляции диаграммы. - Выравнивание по краю сеткиУбедитесь, что суммарное значение ваших объединенных полей точно соответствует кратным 32, если вы хотите получить однородные диаграммы заголовков в виде прямоугольников. Оставление строки с неприсвоенными битами может привести к неравномерному внешнему виду конечных блоков.
- Ограничения масштабирования вида:Хотя движок динамически рассчитывает ширину макета, включение чрезвычайно длинных текстовых описаний в маленькие блоки из 1 или 2 бит приведет к обрезке текста или визуальной перегруженности. Держите метки с малым количеством битов краткими.