Графики

Диаграммы

Диаграммы визуализируют сложные взаимосвязи. Интеграция с Mermaid.js позволяет создавать их напрямую в документации.

---

⚙ Настройка

Добавьте в mkdocs.yml:

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

Преимущества:
- Автоматическая работа с [instant loading]
- Цвета и шрифты из темы
- Поддержка светлой/тёмной темы

---

🧩 Типы диаграмм

Блок-схемы

graph LR
  A[Старт] --> B{Ошибка?};
  B -->|Да| C[Отладка];
  C --> B;
  B -->|Нет| D[Готово!];

Код

```mermaid
graph LR
  A[Старт] --> B{Ошибка?};
  B -->|Да| C[Отладка];
  C --> B;
  B -->|Нет| D[Готово!];
```

---

Последовательности

sequenceDiagram
  Участник 1->>Участник 2: Запрос;
  Участник 2-->>Участник 1: Ответ;

Код

```mermaid
sequenceDiagram
  Участник 1->>Участник 2: Запрос;
  Участник 2-->>Участник 1: Ответ;
```

---

Состояния

stateDiagram-v2
  [*] --> Состояние1
  Состояние1 --> Состояние2
  Состояние2 --> [*]

Код

```mermaid
stateDiagram-v2
  [*] --> Состояние1
  Состояние1 --> Состояние2
  Состояние2 --> [*]
```

---

Классы

classDiagram
  Класс1 <|-- Класс2
  Класс1 : +поле()
  Класс2 : +метод()

Код

```mermaid
classDiagram
  Класс1 <|-- Класс2
  Класс1 : +поле()
  Класс2 : +метод()
```

---

Сущности-связи

erDiagram
  ПОЛЬЗОВАТЕЛЬ ||--o{ ЗАКАЗ : создаёт
  ЗАКАЗ ||--|{ ТОВАР : содержит

Код

```mermaid
erDiagram
  ПОЛЬЗОВАТЕЛЬ ||--o{ ЗАКАЗ : создаёт
  ЗАКАЗ ||--|{ ТОВАР : содержит
```

---

⚠ Ограничения

Частично поддерживаются:
- Круговые диаграммы
- Диаграммы Ганта
- User journey
- Git-графы

Проблемы:
Плохая адаптация под мобильные устройства.