Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt

Use this file to discover all available pages before exploring further.

Nextra has built-in support for Mermaid diagrams, powered by the @theguild/remark-mermaid remark plugin. Just like on GitHub, you write diagram definitions in a fenced code block with the mermaid language tag and Nextra renders them as interactive SVGs automatically — no extra configuration or installation required.

​
Usage

Add a fenced code block with mermaid as the language identifier: 
```mermaid
graph TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    B -- No --> D[End]
```
The remark plugin replaces the code block at build time with a <Mermaid> component that renders the diagram client-side.

​
Examples

​
Flowchart

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -- Yes --> C[Take action]
    B -- No --> D[Skip]
    C --> E[End]
    D --> E[End]
```

​
Sequence Diagram

```mermaid
sequenceDiagram
    participant Browser
    participant Server
    Browser->>Server: GET /page
    Server-->>Browser: HTML response
    Browser->>Server: GET /api/data
    Server-->>Browser: JSON response
```

​
Service Architecture

```mermaid
graph TD
subgraph Consumers
  A[Mobile app]
  B[Web app]
  C[Node.js client]
end
subgraph Services
  E[REST API]
  F[GraphQL API]
  G[SOAP API]
end
Z[API Gateway]
A --> Z
B --> Z
C --> Z
Z --> E
Z --> F
Z --> G
```

​
Gantt Chart

```mermaid
gantt
    title Project Schedule
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements   :a1, 2024-01-01, 7d
    Design         :a2, after a1, 5d
    section Development
    Backend        :b1, after a2, 14d
    Frontend       :b2, after a2, 14d
    section Release
    Testing        :c1, after b1, 7d
    Deploy         :c2, after c1, 2d
```

​
Entity Relationship Diagram

```mermaid
erDiagram
    USER {
        int id PK
        string email
        string name
    }
    POST {
        int id PK
        string title
        int userId FK
    }
    USER ||--o{ POST : "writes"
```

​
Using the Mermaid Component Directly

In addition to the code block syntax, Nextra exports a <Mermaid> component from nextra/components. This is useful when you need to pass the diagram definition dynamically or programmatically: 
import { Mermaid } from 'nextra/components'

<Mermaid
  chart={`graph LR
    A[Input] --> B[Process]
    B --> C[Output]`}
/>
The @theguild/remark-mermaid plugin automatically transforms mermaid fenced code blocks into <Mermaid> component calls at build time, so you rarely need to use the component directly.

​
No Extra Configuration Required

Mermaid support is included in Nextra’s default remark plugin pipeline. You do not need to install any additional packages or add configuration to next.config.mjs to use it.
Visit mermaid.js.org for the full reference on supported diagram types, including pie charts, class diagrams, state diagrams, and more.

Build docs developers (and LLMs) love

Get started for freeTalk to us