Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/temando/remark-mermaid
A remark plugin for Markdown that replaces mermaid graphs with rendered SVGs.
https://github.com/temando/remark-mermaid
mermaid remark remark-plugin
Last synced: 6 days ago
JSON representation
A remark plugin for Markdown that replaces mermaid graphs with rendered SVGs.
- Host: GitHub
- URL: https://github.com/temando/remark-mermaid
- Owner: temando
- License: mit
- Created: 2017-11-10T03:10:11.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-13T21:19:47.000Z (about 1 year ago)
- Last Synced: 2024-04-26T18:06:13.254Z (8 months ago)
- Topics: mermaid, remark, remark-plugin
- Language: JavaScript
- Homepage:
- Size: 47.9 KB
- Stars: 82
- Watchers: 5
- Forks: 33
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# remark-mermaid
[](https://npmjs.org/packages/remark-mermaid/)
[](https://travis-ci.org/temando/remark-mermaid)
[](https://en.wikipedia.org/wiki/MIT_License)
Replaces fenced code blocks in mermaid format with:
- Links to rendered SVG files of the graph (default mode).
- Mermaid-formatted code wrapped in div tags for rendering by mermaidjs (simple mode).
You might also like [`remark-graphviz`](https://www.npmjs.com/package/remark-graphviz).
## Installation
```sh
$ npm install remark-mermaid mermaid.cli
```
## Usage
Graphs defined using `mermaid` can be referenced using a `mermaid:` title which
will generate an SVG image.
```md
[Link to a Graph](test/fixtures/assets/example.mmd "mermaid:")
```
Alternatively, graphs can be generated inline, by using `mermaid` as the
language identifier for a fenced code block.
```mermaid
graph LR
Start --> Stop
```
See this project's [fixtures](test/fixtures) for more examples.
### Options
- `simple`: when set to `true`, plugin will wrap mermaid graphs in an `
` element instead of generating an SVG. Defaults to `false`.
## Example
### SVG Generation
Given a file, `example.md`, which contains the following Markdown:
# mermaid code block
```mermaid
graph LR
Start --> Stop
```
Using remark like follows:
```js
var vfile = require('to-vfile');
var remark = require('remark');
var mermaid = require('remark-mermaid');
var example = vfile.readSync('example.md');
remark()
.use(mermaid)
.process(example, function (err, file) {
if (err) throw err;
console.log(String(file));
});
```
Will result in an SVG being written relative to `example.md`, and the Markdown
being transformed to:
```md
# mermaid code block
```
To change where the SVG's are written, set `data.destinationDir` on the vFile:
```js
var vfile = require('to-vfile');
var remark = require('remark');
var mermaid = require('remark-mermaid');
var example = vfile.readSync('example.md');
example.data = {
destinationDir: '~/absolute/path/to/output'
};
remark()
.use(mermaid)
.process(example, function (err, file) {
if (err) throw err;
vfile.writeSync({ path: example.destinationFilePath });
});
```
This allows you process files from one directory, and save the results to another.
### Simple mode
The following code sample enables simple mode:
```js
var vfile = require('to-vfile');
var remark = require('remark');
var mermaid = require('remark-mermaid');
var example = vfile.readSync('example.md');
remark()
.use(mermaid, { simple: true })
.process(example, function (err, file) {
if (err) throw err;
console.log(String(file));
});
```
This will result in the following Markdown output:
```md
# mermaid code block
graph LR
Start --> Stop
```
[mermaidjs](https://mermaidjs.github.io/usage.html)