Mermaid Diagrams

Nextra 4 renders mermaid fenced code blocks as interactive diagrams via the built-in @theguild/remark-mermaid plugin. No imports or configuration required.

Flowchart


```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great!]
    B -- No --> D[Debug]
    D --> A
```

Sequence Diagram


```mermaid
sequenceDiagram
    participant User
    participant App
    participant API
 
    User->>App: Click button
    App->>API: POST /data
    API-->>App: 200 OK
    App-->>User: Show result
```

State Diagram


```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : fetch()
    Loading --> Success : response ok
    Loading --> Error : response fails
    Error --> Idle : retry
    Success --> [*]
```

Gantt Chart


```mermaid
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Setup
    Configure repo       :done,    a1, 2025-01-01, 3d
    section Development
    Implement feature    :active,  a2, 2025-01-04, 5d
    Write tests          :         a3, after a2, 3d
    section Release
    Deploy               :         a4, after a3, 1d
```

Was this page helpful?