Руководство по синтаксису временной шкалы Mermaid.js

Что такое диаграмма временной шкалы?

А Диаграмма временной шкалы — это инструмент хронологической визуализации, используемый для отображения событий или ключевых этапов проекта вдоль линейного временного пути. В то время как диаграммы Ганта обрабатывают сложные зависимости и продолжительность задач, диаграмма временной шкалы фокусируется на когда— обеспечивая четкое, легко читаемое повествование об эволюции проекта или цикле выпуска системы.

С помощью Mermaid.js, вы можете определить свою временную шкалу с помощью простого иерархического текстового формата. Движок автоматически обрабатывает интервалы, форматирование дат или меток периодов, а также выравнивание маркеров событий вдоль центральной временной оси.

Руководство по основному синтаксису

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

1. Инициализация временной шкалы

Вы инициализируете холст с помощью ключевого слова timelineключевого слова. Структура строится путем определения разделов (которые выступают в качестве группировок) и сопоставления событий (или дат) с этими разделами.

timeline
    title История разработки системы
    section 2025
        Q1 : Запуск альфа-версии
    section 2026
        Q2 : Выпуск бета-версии

2. Добавление деталей к событиям

Вы можете добавить несколько деталей к одному маркеру времени, используя список, разделенный двоеточиями. Это полезно для краткого изложения ключевых результатов или номеров версий, связанных с конкретной датой или периодом.

timeline
    section Q3 2026
        Release : v1.0.0
                : Улучшения производительности
                : Патчи безопасности

Пример диаграммы временной шкалы Mermaid.js из реальной жизни: дорожная карта выпуска продукта

Этот чертеж моделирует многолетнюю дорожную карту продукта, группируя релизы по финансовому году и выделяя ключевые результаты для каждого цикла.

хронология
    заголовок План продукта 2026-2027
    раздел 2026
        Q1 : Этап исследования
           : Интервью с заинтересованными сторонами
        Q2 : Разработка MVP
           : Проектирование основного API
        Q3 : Бета-релиз
           : Циклы обратной связи от пользователей
    раздел 2027
        Q1 : Полный запуск
           : Глобальное масштабирование

Лучшие практики для хронологий

• Держите категории краткими: Используйте раздел для обозначения высоких уровней группировки (например, годов или основных этапов), сохраняя фактические события под ними конкретными и выполнимыми.
• Согласованное форматирование дат: Убедитесь, что события хронологии расположены в хронологическом порядке в коде, поскольку движок Mermaid следует последовательности вашего скрипта для определения размещения макета.
• Используйте детали для контекста: Не перегружайте центральную ось слишком большим объемом текста. Используйте многострочный формат события для разбивки «что произошло», а не делайте саму метку даты слишком длинной.