remark-mermaid-nextra

Deprecated package

Nextra now supports rendering mermaid diagrams natively, it uses this awesome package @theguild/remark-mermaid. Therefore, this package will no longer be updated.

Remark plugin for rendering mermaid diagrams, should work in nextra

Note that this is an ESM package! Make sure you are using ESM in your Next configuration before attempting to use this package.

Instalation

yarn add remark-mermaid-nextra
npm i remark-mermaid-nextra

Motivation

I could not find any way to use Mermaid diagrams in nextra. Then I found The Guild Component Library. They have solution to make it works. I take their code and use only necessary parts to make plugin works.

Usage

// next.config.mjs

import { remarkMermaid } from 'remark-mermaid-nextra';

const withNextra = nextra({
    mdxOptions: {
        remarkPlugins: [remarkMermaid],
    }
    ...

// page.mdx

```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```