@dendronhq/remark-mermaid
v0.4.0
Published
A remark plugin for Markdown that replaces `mermaid` graphs with rendered SVGs.
Downloads
904
Readme
remark-mermaid
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:")
![Embed image of graph](test/fixtures/assets/example.mdd "mermaid:")
Alternatively, graphs can be generated inline, by using mermaid
as the
language identifier for a fenced code block.
See this project's fixtures for more examples.
Options
simple
: when set totrue
, plugin will wrap mermaid graphs in an<div class="mermaid">
element instead of generating an SVG. Defaults tofalse
.
Example
SVG Generation
Given a file, example.md
, which contains the following Markdown:
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
![](./6b03e143dc2a47a93496133d692c44d5ec012b57.svg "`mermaid` image")
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>