#2196: Диаграммы Mermaid в статьях базы знаний

Отредактирована: вчера

Что это

Начиная с версии v6.2.0 в статьях базы знаний можно размещать диаграммы в синтаксисе Mermaid: блок-схемы, диаграммы последовательностей, диаграммы Ганта и другие. Диаграмма описывается текстом, а Swarmica рисует её при просмотре статьи — и в интерфейсе агента, и в публичном хелпцентре.

Например, такой код:

```mermaid
flowchart LR
    A[Новая заявка] --> B{Есть статья в базе знаний?}
    B -- Да --> C[Отправить ссылку на статью]
    B -- Нет --> D[Решить заявку и написать статью]
    C --> E[Заявка решена]
    D --> E
```

превращается в диаграмму:

flowchart LR
    A[Новая заявка] --> B{Есть статья в базе знаний?}
    B -- Да --> C[Отправить ссылку на статью]
    B -- Нет --> D[Решить заявку и написать статью]
    C --> E[Заявка решена]
    D --> E

Как добавить диаграмму

В редакторе статьи нажмите на панели инструментов кнопку «Вставить Mermaid диаграмму».
Напишите или вставьте код диаграммы.
Чтобы проверить результат, наведите курсор на блок диаграммы и нажмите кнопку переключения справа над ним — блок покажет превью. Повторное нажатие возвращает к коду.

В режиме Markdown диаграмму можно добавить и вручную — как блок кода с языком mermaid.

При просмотре статьи большую диаграмму можно развернуть на весь экран кнопкой в правом верхнем углу диаграммы.

Диаграмма хранится в статье как обычный блок кода. Там, где Markdown не отображается (например, в письмах), вместо рисунка будет виден её код.

Где взять код диаграммы

Писать код вручную необязательно:

С помощью ИИ. Опишите диаграмму словами в любом ИИ-ассистенте (ChatGPT, Claude, GigaChat, YandexGPT и др.) и попросите вернуть код Mermaid. Например: «Нарисуй в синтаксисе Mermaid блок-схему обработки заявки: заявка поступает, агент ищет статью в базе знаний; если статья есть — отправляет ссылку, если нет — решает заявку и пишет статью».
В бесплатных редакторах:
- Mermaid Live Editor — официальный онлайн-редактор с открытым кодом: пишете код и сразу видите диаграмму, регистрация не нужна;
- Mermaid AI — визуальный редактор и создание диаграмм с помощью ИИ; в бесплатном тарифе ограничено число диаграмм и ИИ-запросов.

Готовый код скопируйте в блок диаграммы в редакторе статьи.

Не вставляйте во внешние сервисы конфиденциальную информацию: адреса внутренних систем, персональные данные клиентов и т.п.

Синтаксис Mermaid

Полное описание синтаксиса и всех типов диаграмм — в официальной документации Mermaid (на английском). Чаще всего в статьях пригодятся блок-схемы и диаграммы последовательностей.

Если диаграмма не отображается, проверьте код в Mermaid Live Editor — он показывает, в какой строке ошибка.

Подробнее: Создание и редактирование статьи · Выноски и предупреждения в статьях базы знаний