Mermaid

Nextra поддерживает диаграммы mermaid (opens in a new tab). Как и на GitHub в своих markdown файлах вы можете использовать блоки с кодом mermaid. Из коробки Nextra применяет пакет @theguild/remark-mermaid (opens in a new tab), который заменяет соответствующий блок кода на компонент <Mermaid />.

Пример

Использование

```mermaid
graph TD;
subgraph AA [Пользователи]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Сервисы]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;
```