2.0.0 • Published 10 months ago
mdx-mermaid v2.0.0
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
.
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
License
2.0.0
10 months ago
2.0.0-rc7
1 year ago
2.0.0-rc6
1 year ago
2.0.0-rc5
1 year ago
2.0.0-rc4
1 year ago
2.0.0-rc3
2 years ago
2.0.0-rc2
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.3
2 years ago
2.0.0-rc1
2 years ago
1.2.2
2 years ago
1.2.0
2 years ago
1.2.1
2 years ago
1.1.1
2 years ago
1.1.0
3 years ago
1.0.0
3 years ago
0.0.1
3 years ago