remark-mermaid
A remark plugin for Markdown that replaces `mermaid` graphs with rendered SVGs.
Last updated 3 years ago by robot.grylls .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install remark-mermaid 
SYNC missed versions from official npm registry.

remark-mermaid

NPM Travis CI 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.

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.

```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

![](./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>

mermaidjs

Current Tags

  • 0.2.0                                ...           latest (3 years ago)

4 Versions

  • 0.2.0                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 1
Last Week 0
Last Month 4
Dependencies (3)
Dev Dependencies (12)

Copyright 2014 - 2016 © taobao.org |