Skip to Content
🎉 Nextra 4.0 is released. dimaMachina is looking for a new job or consulting .

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