Mermaid

Nextra 支持 mermaid 图表。就像在 GitHub 中一样，你可以在 Markdown 文件中使用 mermaid 代码块语言。开箱即用的 Nextra 使用 @theguild/remark-mermaid 包，它会将代码块替换为 <Mermaid> 组件。

示例

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;
```