https://github.com/dcsunset/remark-graphviz-svg

A remark plugin to convert GraphViz code into SVG diagram
https://github.com/dcsunset/remark-graphviz-svg

Last synced: about 2 months ago
JSON representation

A remark plugin to convert GraphViz code into SVG diagram

• Host: GitHub
• URL: https://github.com/dcsunset/remark-graphviz-svg
• Owner: DCsunset
• License: gpl-3.0
• Created: 2022-01-08T15:40:32.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-09T16:21:31.000Z (almost 3 years ago)
• Last Synced: 2024-10-12T02:55:59.285Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 51.8 KB
• Stars: 3
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# remark-graphviz-svg

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

A remark plugin to convert GraphViz code into SVG diagram

## Features

* Custom language name for code blocks

* Support different GraphViz [engines](https://graphviz.org/docs/layouts/)

* SVG Optimization using [svgo](https://github.com/svg/svgo)

## Installation

```

npm install remark-graphviz-svg

```

Note: This package uses [ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).

Use Node 12+ and ESM import syntax to use this package.

## Usage

```js

import remarkParse from "remark-parse";

import remarkRehype from "remark-rehype";

import rehypeStringify from "rehype-stringify";

import { remarkGraphvizSvg } from "remark-graphviz-svg";

import fs from "fs";

const processor = unified()

  .use(remarkParse)

  .use(remarkGraphvizSvg)

  .use(remarkRehype)

  .use(rehypeStringify);

const content = await processor.process(

  fs.readFileSync("example.md")

);

console.log(content.value);

```

Suppose the `example.md` has the following content:

````md

# Hello, world

```graphviz

digraph {

  A -> B

}

```

````

Then the output of the above code is similar to the following:

```html

Hello, world



  



```


## Options

* `language`: Render GraphViz diagrams on specific language blocks. (Default: `graphviz`)

* `graphvizEngine`: GraphViz engine to use. See available engines [here](https://graphviz.org/docs/layouts/). (Default: `dot`)

* `svgoOptions`: Override default svgo options. Set it to `null` to disable svgo. (Default: `defaultSvgoOptions`)

## License

GPL-3.0