Здесь собраны все типы схем Mermaid, которые рисует встроенный в Docara
Mermaid 11.16. У каждого типа есть короткое пояснение, когда он нужен, живая
схема и её исходник на вкладке «Markdown» — его можно скопировать в свою
страницу и поменять подписи.
Как подключить схему, какие у неё параметры и с какими подписями бывают
сложности, описано на странице «Диаграмма».
Процессы и поведение
Блок-схема
flowchart показывает шаги и развилки процесса: что за чем идёт и куда
ведёт каждое решение.
Публикация страницы документации
flowchart LR
draft[Черновик в Markdown] --> build(Сборка сайта)
build --> check{Проверки прошли?}
check -->|да| publish[Публикация]
check -->|нет| fix[Правка ошибок]
fix --> build
publish --> reader([Читатель видит страницу])
sequenceDiagram показывает, кто кому и в каком порядке отправляет запросы
и ответы, — удобно для описания API.
Запрос списка страниц через API
sequenceDiagram
autonumber
participant app as Приложение
participant api as API
participant db as База данных
app->>api: GET /v1/pages?section=components
api->>api: Проверить токен
alt токен действителен
api->>db: Выбрать страницы раздела
db-->>api: 30 записей
api-->>app: 200 OK и список страниц
else токен истёк
api-->>app: 401 Unauthorized
end
Markdown
:::diagram {engine=mermaid title="Запрос списка страниц через API"}
sequenceDiagram
autonumber
participant app as Приложение
participant api as API
participant db as База данных
app->>api: GET /v1/pages?section=components
api->>api: Проверить токен
alt токен действителен
api->>db: Выбрать страницы раздела
db-->>api: 30 записей
api-->>app: 200 OK и список страниц
else токен истёк
api-->>app: 401 Unauthorized
end
:::
Диаграмма состояний
stateDiagram-v2 показывает, в каких состояниях бывает объект и что
переводит его из одного в другое.
Жизненный цикл страницы
stateDiagram-v2
state "На проверке" as review
state "Устарела" as outdated
[*] --> Черновик
Черновик --> review: автор отправил
review --> Черновик: есть замечания
review --> Опубликована: одобрено
Опубликована --> outdated: вышла новая версия
outdated --> Черновик: страницу обновляют
outdated --> [*]: страницу удалили
Markdown
:::diagram {engine=mermaid title="Жизненный цикл страницы"}
stateDiagram-v2
state "На проверке" as review
state "Устарела" as outdated
[*] --> Черновик
Черновик --> review: автор отправил
review --> Черновик: есть замечания
review --> Опубликована: одобрено
Опубликована --> outdated: вышла новая версия
outdated --> Черновик: страницу обновляют
outdated --> [*]: страницу удалили
:::
Путь пользователя
journey показывает шаги человека и его впечатление на каждом шаге —
оценкой от 1 до 5.
Путь читателя к ответу
journey
title Путь читателя к ответу
section Поиск
Ищет в поисковике: 3: Читатель
Открывает страницу: 4: Читатель
section Чтение
Находит пример: 5: Читатель
Копирует исходник: 5: Читатель
section Применение
Вставляет в свой сайт: 4: Читатель, Автор
Пишет в поддержку: 2: Читатель, Поддержка
Markdown
:::diagram {engine=mermaid title="Путь читателя к ответу"}
journey
title Путь читателя к ответу
section Поиск
Ищет в поисковике: 3: Читатель
Открывает страницу: 4: Читатель
section Чтение
Находит пример: 5: Читатель
Копирует исходник: 5: Читатель
section Применение
Вставляет в свой сайт: 4: Читатель, Автор
Пишет в поддержку: 2: Читатель, Поддержка
:::
Структура и данные
Диаграмма классов
classDiagram показывает объекты кода, их поля, методы и связи между ними.
Модель страниц и компонентов
classDiagram
class Section["Раздел"] {
+string title
+pages() list~Page~
}
class Page["Страница"] {
+string slug
+string title
+render() string
}
class Component["Компонент"] {
<<interface>>
+render(attributes) string
}
class Diagram["Диаграмма"]
class Example["Пример"]
Section "1" o-- "*" Page : содержит
Page ..> Component : использует
Component <|.. Diagram
Component <|.. Example
Markdown
:::diagram {engine=mermaid title="Модель страниц и компонентов"}
classDiagram
class Section["Раздел"] {
+string title
+pages() list~Page~
}
class Page["Страница"] {
+string slug
+string title
+render() string
}
class Component["Компонент"] {
<<interface>>
+render(attributes) string
}
class Diagram["Диаграмма"]
class Example["Пример"]
Section "1" o-- "*" Page : содержит
Page ..> Component : использует
Component <|.. Diagram
Component <|.. Example
:::
Модель данных
erDiagram показывает сущности, их поля и сколько записей одной сущности
связано с другой.
Модель данных сайта документации
erDiagram
SITE["Сайт"] {
string base_url "адрес сайта"
string locale "язык по умолчанию"
}
SECTION["Раздел"] {
string title "название в меню"
}
PAGE["Страница"] {
string slug PK "адрес страницы"
string title "заголовок"
int order "место в меню"
}
TAG["Метка"]
EXAMPLE["Пример"]
SITE ||--|{ SECTION : "делится на"
SECTION ||--o{ PAGE : "содержит"
PAGE }o--o{ TAG : "отмечена"
PAGE ||--o{ EXAMPLE : "показывает"
Markdown
:::diagram {engine=mermaid title="Модель данных сайта документации"}
erDiagram
SITE["Сайт"] {
string base_url "адрес сайта"
string locale "язык по умолчанию"
}
SECTION["Раздел"] {
string title "название в меню"
}
PAGE["Страница"] {
string slug PK "адрес страницы"
string title "заголовок"
int order "место в меню"
}
TAG["Метка"]
EXAMPLE["Пример"]
SITE ||--|{ SECTION : "делится на"
SECTION ||--o{ PAGE : "содержит"
PAGE }o--o{ TAG : "отмечена"
PAGE ||--o{ EXAMPLE : "показывает"
:::
Требования
requirementDiagram связывает требования с тем, что их выполняет и
проверяет.
Требования к сборке
requirementDiagram
requirement offline_build {
id: R1
text: "Сборка работает без сети"
risk: medium
verifymethod: test
}
performanceRequirement page_weight {
id: R2
text: "Страница не тяжелее бюджета"
risk: low
verifymethod: analysis
}
element build_command {
type: "команда"
docref: "docara build"
}
element weight_check {
type: "скрипт"
docref: "verify-page-weight.php"
}
build_command - satisfies -> offline_build
weight_check - verifies -> page_weight
Markdown
:::diagram {engine=mermaid title="Требования к сборке"}
requirementDiagram
requirement offline_build {
id: R1
text: "Сборка работает без сети"
risk: medium
verifymethod: test
}
performanceRequirement page_weight {
id: R2
text: "Страница не тяжелее бюджета"
risk: low
verifymethod: analysis
}
element build_command {
type: "команда"
docref: "docara build"
}
element weight_check {
type: "скрипт"
docref: "verify-page-weight.php"
}
build_command - satisfies -> offline_build
weight_check - verifies -> page_weight
:::
Интеллект-карта
mindmap раскладывает тему на ветви от центра — подходит для структуры
раздела или плана документации.
Структура документации
mindmap
root((Документация))
Начало работы
Установка
Первый сайт
Написание
Markdown
Компоненты
Диаграммы
Настройки
docara.json
Навигация
Сборка
Проверки
Публикация
Markdown
:::diagram {engine=mermaid title="Структура документации"}
mindmap
root((Документация))
Начало работы
Установка
Первый сайт
Написание
Markdown
Компоненты
Диаграммы
Настройки
docara.json
Навигация
Сборка
Проверки
Публикация
:::
Карта площадей
treemap-beta показывает доли вложенных частей прямоугольниками: чем больше
часть, тем больше её площадь.
C4Context показывает систему, её пользователей и внешние системы — первый
уровень модели C4.
Контекст системы документации
C4Context
title Контекст системы документации
Person(author, "Автор", "Пишет страницы в Markdown")
Person(reader, "Читатель", "Ищет ответ на сайте")
System(docara, "Docara", "Собирает статический сайт")
System_Ext(git, "GitHub", "Хранит исходники")
System_Ext(hosting, "Хостинг", "Отдаёт готовые страницы")
Rel(author, git, "Отправляет правки")
Rel(git, docara, "Запускает сборку")
Rel(docara, hosting, "Публикует HTML")
Rel(reader, hosting, "Открывает страницы")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
Markdown
:::diagram {engine=mermaid title="Контекст системы документации"}
C4Context
title Контекст системы документации
Person(author, "Автор", "Пишет страницы в Markdown")
Person(reader, "Читатель", "Ищет ответ на сайте")
System(docara, "Docara", "Собирает статический сайт")
System_Ext(git, "GitHub", "Хранит исходники")
System_Ext(hosting, "Хостинг", "Отдаёт готовые страницы")
Rel(author, git, "Отправляет правки")
Rel(git, docara, "Запускает сборку")
Rel(docara, hosting, "Публикует HTML")
Rel(reader, hosting, "Открывает страницы")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
:::
Архитектура сервисов
architecture-beta рисует сервисы и группы со значками облака, сервера,
диска и базы данных. Русские подписи берите в двойные кавычки.
Архитектура сайта документации
architecture-beta
group site(cloud)["Сайт документации"]
service cdn(internet)["CDN"] in site
service web(server)["Веб-сервер"] in site
service search(disk)["Индекс поиска"] in site
service builds(database)["Хранилище сборок"] in site
cdn:R --> L:web
web:B --> T:search
web:R --> L:builds
Markdown
:::diagram {engine=mermaid title="Архитектура сайта документации"}
architecture-beta
group site(cloud)["Сайт документации"]
service cdn(internet)["CDN"] in site
service web(server)["Веб-сервер"] in site
service search(disk)["Индекс поиска"] in site
service builds(database)["Хранилище сборок"] in site
cdn:R --> L:web
web:B --> T:search
web:R --> L:builds
:::
Планы и история
Диаграмма Ганта
gantt показывает задачи на календаре: сроки, зависимости и контрольные
точки.
План релиза
gantt
title План релиза
dateFormat YYYY-MM-DD
axisFormat %d.%m
section Подготовка
Аудит страниц :done, audit, 2026-10-19, 3d
Галерея диаграмм :active, gallery, after audit, 4d
section Проверка
Тесты и сборка :tests, after gallery, 2d
Приёмка :crit, accept, after tests, 1d
section Выпуск
Публикация :milestone, release, after accept, 0d
Markdown
:::diagram {engine=mermaid title="План релиза"}
gantt
title План релиза
dateFormat YYYY-MM-DD
axisFormat %d.%m
section Подготовка
Аудит страниц :done, audit, 2026-10-19, 3d
Галерея диаграмм :active, gallery, after audit, 4d
section Проверка
Тесты и сборка :tests, after gallery, 2d
Приёмка :crit, accept, after tests, 1d
section Выпуск
Публикация :milestone, release, after accept, 0d
:::
Хронология
timeline перечисляет события по порядку — удобно для истории выпусков.
Выпуски Docara 3
timeline
title Выпуски Docara 3
section 14–18 октября
3.0 : Framework в комплекте
3.2 : Сайты стали легче
section 19–21 октября
3.4 : Сборка для портала
3.5 : Фоновые эффекты
3.6 : Проверка веса страниц
section 21–23 октября
3.7 : Страница 404
3.8 : Справочник кодов ошибок
Markdown
:::diagram {engine=mermaid title="Выпуски Docara 3"}
timeline
title Выпуски Docara 3
section 14–18 октября
3.0 : Framework в комплекте
3.2 : Сайты стали легче
section 19–21 октября
3.4 : Сборка для портала
3.5 : Фоновые эффекты
3.6 : Проверка веса страниц
section 21–23 октября
3.7 : Страница 404
3.8 : Справочник кодов ошибок
:::
Ветки Git
gitGraph показывает ветки, коммиты и слияния — например, порядок работы
над изменением.
pie показывает доли целого — когда частей немного и важна пропорция.
Страницы документации по типу
pie showData
title Страницы по типу
"Руководство" : 38
"Компонент" : 31
"Пример" : 31
"Справочник" : 15
Markdown
:::diagram {engine=mermaid title="Страницы документации по типу"}
pie showData
title Страницы по типу
"Руководство" : 38
"Компонент" : 31
"Пример" : 31
"Справочник" : 15
:::
График
xychart-beta рисует столбцы и линии по осям — например, вес страниц этого
сайта рядом с общим бюджетом 4,5 МБ.
Вес страниц и общий бюджет
xychart-beta
title "Вес страниц, МБ"
x-axis ["Медиана сайта", "Значки", "Диаграмма", "Галерея"]
y-axis "Мегабайты" 0 --> 8
bar [2.75, 4.51, 6.35, 6.46]
line [4.5, 4.5, 4.5, 4.5]
Markdown
:::diagram {engine=mermaid title="Вес страниц и общий бюджет"}
xychart-beta
title "Вес страниц, МБ"
x-axis ["Медиана сайта", "Значки", "Диаграмма", "Галерея"]
y-axis "Мегабайты" 0 --> 8
bar [2.75, 4.51, 6.35, 6.46]
line [4.5, 4.5, 4.5, 4.5]
:::
Квадрант
quadrantChart раскладывает пункты по двум осям на четыре группы — удобно
для приоритетов.
Приоритеты задач документации
quadrantChart
title Приоритеты задач
x-axis Мало усилий --> Много усилий
y-axis Мало пользы --> Много пользы
quadrant-1 Планировать
quadrant-2 Делать сразу
quadrant-3 Между делом
quadrant-4 Не делать
Описания страниц: [0.2, 0.8]
Галерея диаграмм: [0.45, 0.7]
Английская версия: [0.85, 0.9]
Новые значки: [0.3, 0.25]
Свой движок схем: [0.9, 0.15]
Markdown
:::diagram {engine=mermaid title="Приоритеты задач документации"}
quadrantChart
title Приоритеты задач
x-axis Мало усилий --> Много усилий
y-axis Мало пользы --> Много пользы
quadrant-1 Планировать
quadrant-2 Делать сразу
quadrant-3 Между делом
quadrant-4 Не делать
Описания страниц: [0.2, 0.8]
Галерея диаграмм: [0.45, 0.7]
Английская версия: [0.85, 0.9]
Новые значки: [0.3, 0.25]
Свой движок схем: [0.9, 0.15]
:::
Поток
sankey-beta показывает, как объём перетекает между этапами: ширина полосы
равна величине. Подписи пишите латиницей — с кириллицей схема не рисуется.
