remark-graphviz
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 = ;var remark = ;var graphviz = ; var example = vfile; ;
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 = ;var remark = ;var graphviz = ; var example = vfile;exampledata = destinationFilePath: 'out/example.md'; ;
Both example.md
and the generated SVG will reside in the /out
directory.