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.
Installation
$ npm install remark-mermaid mermaid.cli
Usage
Graphs defined using mermaid can be referenced using a mermaid: title which will generate an SVG image.
[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 for more examples.
Options
simple: when set to true, plugin will wrap mermaid graphs in an <div class="mermaid"> 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:
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:
# mermaid code block
To change where the SVG's are written, set data.destinationDir on the vFile:
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:
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:
# mermaid code block
<div class="mermaid">
graph LR
Start --> Stop
</div>
mermaidjs