# @grasp-webdev/graphviz

> Graphviz web app

Latest version **1.1.1** (published 2023-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @grasp-webdev/graphviz
pnpm add @grasp-webdev/graphviz
yarn add @grasp-webdev/graphviz
bun add @grasp-webdev/graphviz
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2023-04-26 |
| First published | 2023-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | rsms |
| Maintainers | danil-grasp |

## Links

- npm: https://www.npmjs.com/package/@grasp-webdev/graphviz
- npm.io page: https://npm.io/package/@grasp-webdev/graphviz

## Recent versions

- 1.1.1 (latest) — 2023-04-26

## README

# Graphviz in the browser

Provides a very small JS library

- Exposes a global variable `graphvis`
- Very fast
- Runs graphviz compiled as WebAssembly in a background Worker thread
- Timeouts for preventing run-away "huge graph" computations


## Usage

```html
<head>
  <meta charset="utf-8">
  <script src="https://rsms.me/graphviz/graphviz.js"></script>
</head>
<body>
<script>
graphviz.layout(`
digraph {
  Hello -> World
  Hej -> Hello
  Värld -> World -> Hej
}
`).then(svg => {
  document.body.innerHTML = svg
})
</script>
</body>
```

## API

```ts
namespace graphviz {
  // Version string of this library (e.g. "1.2.3")
  export const version :string

  // Error raised on timeout
  export const TimeoutError :Error

  // layout performs Graphviz layout
  export function layout(
    source   :string,  // dot source code
    format?  :Format,  // Output format. Defaults to "svg"
    engine?  :Engine,  // Default engine type. Defaults to "dot"
    timeout? :number,  // Optional timeout in milliseconds
  ) :Promise<string>

  // Output formats
  export type Format = "dot"
                     | "json"
                     | "json0"
                     | "plain"
                     | "plain-ext"
                     | "ps"
                     | "ps2"
                     | "svg"
                     | "xdot"

  // Layout engine types
  export type Engine = "circo"  // for circular layout of graphs
                     | "dot"    // for drawing directed graphs
                     | "fdp"    // for drawing undirected graphs
                     | "neato"  // for drawing undirected graphs
                     | "osage"  // for drawing large undirected graphs
                     | "twopi"  // for radial layouts of graphs
}
```


## Notes

This is essentially a wrapper around [viz.js](https://github.com/mdaines/viz.js).

See [Graphviz documentation here](https://www.graphviz.org/doc/info/attrs.html)

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