mdx-mermaid
v2.0.3
Published
Display mermaid diagrams in mdx files.
Downloads
62,914
Maintainers
Readme
mdx-mermaid
Plug and play Mermaid in MDX
Use Mermaid in .md
, .mdx
, .jsx
and .tsx
files with ease.
Based off the answer here by unknown.
More documentation available here
Use version ^1.3.0
for @mdxjs/mdx
v1
.
Use version ^2.0.0
for @mdxjs/mdx
v2
.
Warning:
rehype-mermaidjs
andremark-mermaidjs
may better suit your use case.
Quick start
Install mdx-mermaid
and mermaid
mermaid
is a peer dependency so you can specify the version to use
yarn add mdx-mermaid mermaid
Configure the plugin:
import mdxMermaid from 'mdx-mermaid'
import {Mermaid} from 'mdx-mermaid/lib/Mermaid'
{
remarkPlugins: [[mdxMermaid.default, {output: 'svg'}]],
components: {mermaid: Mermaid, Mermaid}
}
Use code blocks in .md
or .mdx
files:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
Use the component in .mdx
, .jsx
or .tsx
files:
import { Mermaid } from 'mdx-mermaid/Mermaid';
<Mermaid chart={`graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
`} />
There are more examples here