# Диаграммы Mermaid в статьях базы знаний
### Что это

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### Синтаксис Mermaid

Полное описание синтаксиса и всех типов диаграмм — в [официальной документации Mermaid](https://mermaid.js.org/intro/syntax-reference.html) (на английском). Чаще всего в статьях пригодятся [блок-схемы](https://mermaid.js.org/syntax/flowchart.html) и [диаграммы последовательностей](https://mermaid.js.org/syntax/sequenceDiagram.html).

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

**Подробнее:** [Создание и редактирование статьи](https://support.swarmica.com/article/ru/205-создание-и-редактирование-статьи.html) · [Выноски и предупреждения в статьях базы знаний](https://support.swarmica.com/article/ru/511-выноски-и-предупреждения-в-статьях-базы-знаний.html)