# remark-mermaidjs

> A remark plugin to render mermaid diagrams

Latest version **7.0.0** (published 2024-10-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install remark-mermaidjs
pnpm add remark-mermaidjs
yarn add remark-mermaidjs
bun add remark-mermaidjs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2024-10-08 |
| First published | 2021-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 16.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 85 |
| Author | Remco Haszing |
| Maintainers | remcohaszing |
| Keywords | documentation, mermaid, mermaidjs, plugin, remark, remark-plugin, unified |

## Links

- npm: https://www.npmjs.com/package/remark-mermaidjs
- Repository: https://github.com/remcohaszing/remark-mermaidjs
- Homepage: https://github.com/remcohaszing/remark-mermaidjs#readme
- Issues: https://github.com/remcohaszing/remark-mermaidjs/issues
- Funding: https://github.com/sponsors/remcohaszing
- npm.io page: https://npm.io/package/remark-mermaidjs

## Dependencies (6)

- [vfile](https://npm.io/package/vfile.md) ^6.0.0
- [unified](https://npm.io/package/unified.md) ^11.0.0
- [@types/mdast](https://npm.io/package/@types/mdast.md) ^4.0.0
- [mermaid-isomorphic](https://npm.io/package/mermaid-isomorphic.md) ^3.0.0
- [unist-util-visit-parents](https://npm.io/package/unist-util-visit-parents.md) ^6.0.0
- [hast-util-from-html-isomorphic](https://npm.io/package/hast-util-from-html-isomorphic.md) ^2.0.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 7.0.0 (latest) — 2024-10-08
- 6.0.0 — 2023-09-20
- 5.0.2 — 2023-08-25
- 5.0.1 — 2023-05-06
- 4.1.1 — 2022-12-05
- 4.1.0 — 2022-12-05
- 4.0.0 — 2022-11-21
- 3.1.0 — 2022-10-03
- 3.0.0 — 2022-08-31
- 2.1.1 — 2021-11-16
- 2.1.0 — 2021-10-25
- 2.0.0 — 2021-03-14
- 1.2.0 — 2021-03-05
- 1.1.0 — 2021-02-22
- 1.0.0 — 2021-02-17

## README

# remark-mermaidjs

[![github actions](https://github.com/remcohaszing/remark-mermaidjs/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/remark-mermaidjs/actions/workflows/ci.yaml)
[![codecov](https://codecov.io/gh/remcohaszing/remark-mermaidjs/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/remark-mermaidjs)
[![npm version](https://img.shields.io/npm/v/remark-mermaidjs)](https://www.npmjs.com/package/remark-mermaidjs)
[![npm downloads](https://img.shields.io/npm/dm/remark-mermaidjs)](https://www.npmjs.com/package/remark-mermaidjs)

A [remark](https://remark.js.org) plugin to render [mermaid](https://mermaid-js.github.io) diagrams
using [playwright](https://playwright.dev).

> \[!IMPORTANT]
>
> Use cases for this package are rare. You should probably use
> [`rehype-mermaid`](https://github.com/remcohaszing/rehype-mermaid) instead.

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
  - [`unified().use(remarkMermaid, options?)`](#unifieduseremarkmermaid-options)
- [Compatibility](#compatibility)
- [Related Projects](#related-projects)
- [Contributing](#contributing)
- [License](#license)

## Installation

```sh
npm install remark-mermaidjs
```

Outside of browsers `remark-mermaidjs` uses [Playwright](https://playwright.dev). If you use this
outside of a browser, you need to install Playwright and a Playwright browser.

```sh
npm install playwright
npx playwright install --with-deps chromium
```

See the Playwright [Browsers](https://playwright.dev/docs/browsers) documentation for more
information.

## Usage

This plugin takes all code blocks marked as `mermaid` and renders them as an inline SVG.

```js
import { readFile } from 'node:fs/promises'

import { remark } from 'remark'
import remarkMermaid from 'remark-mermaidjs'

const { value } = await remark()
  .use(remarkMermaid, {
    /* Options */
  })
  .process(await readFile('readme.md'))

console.log(value)
```

## API

This package has a default export `remarkMermaid`.

### `unified().use(remarkMermaid, options?)`

#### `browser`

The Playwright browser to use. (`object`, default: chromium)

#### `css`

A URL that points to a custom CSS file to load. Use this to load custom fonts. This option is
ignored in the browser. You need to include the CSS in your build manually. (`string` | `URL`)

#### `errorFallback`

Create a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code
block is removed. The function receives the following arguments:

- `node`: The mdast `code` node that couldn’t be rendered.
- `error`: The error message that was thrown.
- `file`: The file on which the error occurred.

#### `launchOptions`

The options used to launch the browser. (`object`)

- **Note**: This options is required in Node.js. In the browser this option is unused.

#### `mermaidConfig`

The [mermaid config](https://mermaid.js.org/config/schema-docs/config.html) to use.

**Note**: This config is only supported in Node.js. In the browser this option is unused. If you use
this in a browser, call `mermaid.initialize()` manually.

#### `prefix`

A custom prefix to use for Mermaid IDs. (`string`, default: `mermaid`)

## Compatibility

This project is compatible with Node.js 18 or greater.

## Related Projects

- [`mermaid`](https://mermaid.js.org) is the library that’s used to render the diagrams.
- [`mermaid-isomorphic`](https://github.com/remcohaszing/mermaid-isomorphic) allows this package to
  render Mermaid diagrams in both Node.js and the browser.
- [`rehype-mermaid`](https://github.com/remcohaszing/rehype-mermaid) is a more powerful plugin that
  does the same, but as a [rehype](https://github.com/rehypejs/rehype) plugin.

## Contributing

Test fixtures are generated and verified using Linux. Rendering on other platforms may yield
slightly different results. Don’t worry about adding new fixtures, but don’t update existing ones
that cause CI to fail. Furthermore see my global
[contributing guidelines](https://github.com/remcohaszing/.github/blob/main/CONTRIBUTING.md).

## License

[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)

---
_Source: https://npm.io/package/remark-mermaidjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._