https://github.com/temando/remark-graphviz

A remark plugin for Markdown that replaces graphs defined in `dot` with rendered SVGs.
https://github.com/temando/remark-graphviz

graphviz graphviz-dot remark remark-plugin

Last synced: 2 months ago
JSON representation

A remark plugin for Markdown that replaces graphs defined in `dot` with rendered SVGs.

• Host: GitHub
• URL: https://github.com/temando/remark-graphviz
• Owner: temando
• License: mit
• Created: 2017-08-14T06:04:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-19T12:08:43.000Z (almost 6 years ago)
• Last Synced: 2024-10-31T01:48:55.192Z (2 months ago)
• Topics: graphviz, graphviz-dot, remark, remark-plugin
• Language: JavaScript
• Size: 38.1 KB
• Stars: 19
• Watchers: 6
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# remark-graphviz

[![NPM](https://img.shields.io/npm/v/remark-graphviz.svg)](https://npmjs.org/packages/remark-graphviz/)

[![Travis CI](https://img.shields.io/travis/temando/remark-graphviz.svg)](https://travis-ci.org/temando/remark-graphviz)

[![MIT License](https://img.shields.io/github/license/temando/remark-graphviz.svg)](https://en.wikipedia.org/wiki/MIT_License)

Replaces graphs defined in [`dot`](http://www.graphviz.org/content/dot-language)

with rendered SVGs.

## Installation

```sh

$ npm install remark-graphviz

```

## Usage

Graphs defined using `dot` can be referenced using a `dot:` title which will

generate an SVG image.

```md

[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](test/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:

```js

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:

```md

# 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:

```js

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.