Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remcohaszing/gatsby-remark-mermaid
Create mermaid graphs and diagrams in your markdown files.
https://github.com/remcohaszing/gatsby-remark-mermaid
gatsby gatsby-plugin markdown mermaid mermaidjs remark
Last synced: 3 days ago
JSON representation
Create mermaid graphs and diagrams in your markdown files.
- Host: GitHub
- URL: https://github.com/remcohaszing/gatsby-remark-mermaid
- Owner: remcohaszing
- License: isc
- Created: 2019-02-24T14:17:38.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T09:15:25.000Z (3 months ago)
- Last Synced: 2024-12-30T08:05:33.059Z (10 days ago)
- Topics: gatsby, gatsby-plugin, markdown, mermaid, mermaidjs, remark
- Language: JavaScript
- Homepage:
- Size: 344 KB
- Stars: 24
- Watchers: 5
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# gatsby-remark-mermaid
[](https://github.com/remcohaszing/gatsby-remark-mermaid/actions/workflows/ci.yaml)
[](https://www.npmjs.com/package/gatsby-remark-mermaid)
[](https://www.npmjs.com/package/gatsby-remark-mermaid)
[](https://prettier.io)
Create [mermaid](https://mermaidjs.github.io) graphs and diagrams in your markdown files.
This plugin uses [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) to generate
SVG diagrams at build time. The mermaid code blocks are replaced with an inline SVG in the generated
HTML. This prevents any runtime dependencies on `mermaid`.
## Table of COntents
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [`browser`](#browser)
- [`css`](#css)
- [`errorFallback`](#errorfallback)
- [`launchOptions`](#launchoptions)
- [`mermaidConfig`](#mermaidconfig)
- [`prefix`](#prefix)
- [Credits](#credits)
- [License](#license)
## Installation
```sh
npm install gatsby-remark-mermaid gatsby-transformer-remark
```
## Usage
Configure this plugin as a plugin of
[`gatsby-transformer-remark`](https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/).
**NOTE:** Make sure you add this plugin **before** any other plugins that process code blocks.
Example configuration
```js
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: `gatsby-remark-mermaid`,
options: /** @type {import('gatsby-remark-mermaid').Options} */ ({
mermaidConfig: {
theme: 'neutral',
themeCSS: '.node rect { fill: #fff; }'
}
})
}
]
}
}
]
}
```
## 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`)
### `mermaidConfig`
The [mermaid config](https://mermaid.js.org/config/setup/modules/config.html) to use.
### `prefix`
A custom prefix to use for Mermaid IDs. (`string`, default: `mermaid`)
## Credits
This package was originally developed by [Thomas Biesaart](https://github.com/ChappIO).
## License
[MIT](LICENSE.md) © [Thomas Biesaart](https://github.com/ChappIO)