https://github.com/sjwall/mdx-mermaid

Plug and play Mermaid in MDX
https://github.com/sjwall/mdx-mermaid

docusaurus2 mdx mermaid

Last synced: 16 days ago
JSON representation

Plug and play Mermaid in MDX

• Host: GitHub
• URL: https://github.com/sjwall/mdx-mermaid
• Owner: sjwall
• License: mit
• Created: 2021-08-03T18:41:29.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-06T13:33:49.000Z (5 months ago)
• Last Synced: 2025-04-07T17:04:00.425Z (23 days ago)
• Topics: docusaurus2, mdx, mermaid
• Language: TypeScript
• Homepage:
• Size: 6.31 MB
• Stars: 173
• Watchers: 1
• Forks: 29
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        
# mdx-mermaid

Plug and play Mermaid in MDX

[![npm version](https://badge.fury.io/js/mdx-mermaid.svg)][npm]

[![GitHub license](https://img.shields.io/github/license/sjwall/mdx-mermaid)][license]

[![build](https://github.com/sjwall/mdx-mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/sjwall/mdx-mermaid/actions/workflows/build.yml)

[![codecov](https://codecov.io/gh/sjwall/mdx-mermaid/branch/main/graph/badge.svg?token=OBSGK4GGX8)](https://codecov.io/gh/sjwall/mdx-mermaid)

[![Maintainability](https://api.codeclimate.com/v1/badges/9d89c7483bb1a906ecdf/maintainability)](https://codeclimate.com/github/sjwall/mdx-mermaid/maintainability)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)][pr]

Use [Mermaid][mermaid] in `.md`, `.mdx`, `.jsx` and `.tsx` files with ease.

Based off the answer [here][inspire] by unknown.

More documentation available [here][documentation]

Use version `^1.3.0` for `@mdxjs/mdx` `v1`.

Use version `^2.0.0` for `@mdxjs/mdx` `v2`.

> **Warning**:

> [`rehype-mermaidjs`](https://github.com/remcohaszing/rehype-mermaidjs) and

> [`remark-mermaidjs`](https://github.com/remcohaszing/remark-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

```bash

yarn add mdx-mermaid mermaid

```

Configure the plugin:

```js

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:

````md

```mermaid

graph TD;

    A-->B;

    A-->C;

    B-->D;

    C-->D;

```

````

Use the component in `.mdx`, `.jsx` or `.tsx` files:

```jsx

import { Mermaid } from 'mdx-mermaid/Mermaid';

B;

    A-->C;

    B-->D;

    C-->D;

`} />

```

There are more examples [here][examples]

## License

[MIT][license] © [Samuel Wall][author]

[license]: https://github.com/sjwall/mdx-mermaid/blob/main/license

[author]: https://samuelwall.co.uk

[npm]: https://www.npmjs.com/package/mdx-mermaid

[mermaid]: http://mermaid-js.github.io/mermaid/

[inspire]: https://github.com/facebook/docusaurus/issues/1258#issuecomment-594393744

[pr]: http://makeapullrequest.com

[examples]: https://sjwall.github.io/mdx-mermaid/docs/examples/

[documentation]: https://sjwall.github.io/mdx-mermaid/