# remark-hpcc-graphviz-svg

> A remark plugin to convert GraphViz code into SVG diagram

Latest version **0.1.1** (published 2023-06-28) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install remark-hpcc-graphviz-svg
pnpm add remark-hpcc-graphviz-svg
yarn add remark-hpcc-graphviz-svg
bun add remark-hpcc-graphviz-svg
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-06-28 |
| First published | 2023-06-27 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 40 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DCsunset |
| Maintainers | chesiver |
| Keywords | remark, graphviz, svg |

## Links

- npm: https://www.npmjs.com/package/remark-hpcc-graphviz-svg
- Repository: https://github.com/chesiver/remark-graphviz-svg
- Issues: https://github.com/chesiver/remark-graphviz-svg/issues
- npm.io page: https://npm.io/package/remark-hpcc-graphviz-svg

## Dependencies (6)

- [svgo](https://npm.io/package/svgo.md) ^2.8.0
- [unified](https://npm.io/package/unified.md) ^10.1.1
- [@types/svgo](https://npm.io/package/@types/svgo.md) ^2.6.1
- [rehype-parse](https://npm.io/package/rehype-parse.md) ^8.0.3
- [@hpcc-js/wasm](https://npm.io/package/@hpcc-js/wasm.md) ^2.13.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^4.1.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-06-28
- 0.1.0 — 2023-06-27

## README

# remark-hpcc-graphviz-svg

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

A remark plugin to convert GraphViz code into SVG diagram. 

Modified from https://github.com/DCsunset/remark-graphviz-svg

## Features

* Custom language name for code blocks
* SVG Optimization using [svgo](https://github.com/svg/svgo)

## Installation

```
npm install remark-hpcc-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

### Basic
```js
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { remarkGraphvizSvg } from "remark-hpcc-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);
```

### Nextra

```js
import { remarkGraphvizSvg } from 'remark-hpcc-graphviz-svg';

const withNextra = nextra({
    theme: 'nextra-theme-docs',
    themeConfig: './theme.config.tsx',
    mdxOptions: {
        remarkPlugins: [
            remarkGraphvizSvg,
        ],
    },
})
```

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

````md
# Hello, world

```dot
digraph {
  A -> B
}
```
````

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

```html
<h1>Hello, world</h1>
<p>
  <svg><!-- generated svg --></svg>
</p>
```


## Options

* `language`: Render GraphViz diagrams on specific language blocks. (Default: `graphviz`)
* `svgoOptions`: Override default svgo options. Set it to `null` to disable svgo. (Default: `defaultSvgoOptions`)

## License

GPL-3.0

---
_Source: https://npm.io/package/remark-hpcc-graphviz-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._