Replaces graphs defined in dot
with rendered SVGs.
$ npm install remark-graphvizGraphs 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:")
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.
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
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.