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

remark-graphviz

NPM Travis CI MIT License

Replaces graphs defined in dot with rendered SVGs.

Installation

$ npm install remark-graphviz

Usage

Graphs defined using dot can be referenced using a dot: title which will generate an SVG image.

[Link to a Graph](test/fixtures/assets/example.dot "dot:")
![Embed image of graph](test/fixtures/assets/example.dot "dot:")

Alternatively, graphs can be generated inline, by using dot (or circo) as the language identifier for a fenced code block.

```dot
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

See this project's fixtures for more examples.

Example

Given a file, example.md, which contains the following Markdown:

# dot code block

```dot
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

Using remark like follows:

var vfile = require('to-vfile');
var remark = require('remark');
var graphviz = require('remark-graphviz');

var example = vfile.readSync('example.md');

remark()
  .use(graphviz)
  .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:

# dot code block

![](./6b03e143dc2a47a93496133d692c44d5ec012b57.svg "`dot` image")

To change where the SVG's are written, set data.destinationFilePath on the vFile. This following shows how you could process a file from one directory and output the transformed file to another:

var vfile = require('to-vfile');
var remark = require('remark');
var graphviz = require('remark-graphviz');

var example = vfile.readSync('example.md');
example.data = {
  destinationFilePath: 'out/example.md'
};

remark()
  .use(graphviz)
  .process(example, function (err, file) {
    if (err) throw err;

    vfile.writeSync({ path: file.data.destinationFilePath });
  });

Both example.md and the generated SVG will reside in the /out directory.

Current Tags

  • 0.2.2                                ...           latest (3 years ago)

4 Versions

  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1
Dependencies (3)
Dev Dependencies (9)

Copyright 2014 - 2016 © taobao.org |