Skip to Content

Mermaid

Nextra supports mermaid diagrams. Like in GitHub you can use it in your markdown files by using the mermaid code block language. Out of the box, Nextra uses @theguild/remark-mermaid package that replaces the code block with the <Mermaid> component.

Example

Usage

Markdown
```mermaid
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
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;
```
Last updated on