Диаграммы Mermaid

Как использовать

Добавьте в заметку блок кода с идентификатором mermaid и вставьте синтаксис диаграммы внутрь:

```mermaid
graph TD
    A[Начало] --> B{Решение}
    B -->|Да| C[Выполнить]
    B -->|Нет| D[Пропустить]
    C --> E[Готово]
    D --> E
```

Блок отрисуется как диаграмма для каждого читателя, открывшего страницу. Поддерживаются все типы диаграмм Mermaid: блок-схемы, диаграммы последовательности, круговые диаграммы, диаграммы Ганта, классов, состояний и другие.

Примеры

```mermaid
graph LR
    Write[Написать в Obsidian] --> Sync[Нажать Sync]
    Sync --> Live[Заметка опубликована]
    Live --> Readers[Читатели видят её]
```

graph LR
    Write[Написать в Obsidian] --> Sync[Нажать Sync]
    Sync --> Live[Заметка опубликована]
    Live --> Readers[Читатели видят её]

```mermaid
sequenceDiagram
    participant Автор
    participant trip2g
    participant Читатель

    Автор->>trip2g: Синхронизировать хранилище
    trip2g->>trip2g: Собрать страницы
    Читатель->>trip2g: Открыть URL
    trip2g->>Читатель: Отдать страницу с диаграммой
```

sequenceDiagram
    participant Автор
    participant trip2g
    participant Читатель

    Автор->>trip2g: Синхронизировать хранилище
    trip2g->>trip2g: Собрать страницы
    Читатель->>trip2g: Открыть URL
    trip2g->>Читатель: Отдать страницу с диаграммой

```mermaid
pie title Состав контента
    "Статьи" : 45
    "Руководства" : 30
    "Справочник" : 25
```

pie title Состав контента
    "Статьи" : 45
    "Руководства" : 30
    "Справочник" : 25

Производительность

Библиотека Mermaid весит немало. trip2g загружает её лениво — только на страницах, где есть блок mermaid. Страницы без диаграмм не платят за это ничем. Так же работает загрузка ECharts для графиков datachart.

Отрисовка происходит в браузере читателя.

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

Работает любой тип из документации Mermaid:

Полный справочник синтаксиса — на mermaid.js.org.