GraphViz Source Script Builder

!Dependency status

Generates the source graph script as input for [Graphviz] (dot), which in turn can generate the graph image.

This project originated as a fork of [node-graphviz] to offer an easy integration to web browsers and JavaScript and TypeScript environments like [Node.js] and [Deno]. Features:

* UMD build output for web browsers and ESM build output for environments supporting ES6 modules.
* TypeScript type declarations (typings).
* No dependencies, including [Node.js] bult-in modules.
* Faster implementation of attributes using Map.
* [API] compatibility with [node-graphviz], except for the removed graph image generation.

Related tools:

* [graphviz-cli] - command-line tool for generating graph images from the source scripts
* [graphviz-webcomponent] - WebComponent for web browsers to display graph images from the source scripts in HTML pages on-the-fly

Synopsis

``js
var graphvizBuilder = require('graphviz-builder');

// Create digraph G
var g = graphvizBuilder.digraph("G");

// Add node (ID: Hello)
var n1 = g.addNode( "Hello", {"color" : "blue"} );
n1.set( "style", "filled" );

// Add node (ID: World)
g.addNode( "World" );

// Add edge between the two nodes
var e = g.addEdge( n1, "World" );
e.set( "color", "red" );

// Print the dot script
console.log( g.to_dot() );
`

Installation

Make sure that you have installed [Node.js]. Use your favourite package manager ([NPM], [Yarn] or [PNPM]) to add the graphviz-builder module to your project. Add -D on the command line if you use a bundler:

`
npm i graphviz-builder
yarn add graphviz-builder
pnpm i graphviz-builder
`

If you write a plain HTML page, insert the graphviz-builder script pointing wither to CDN or to the local filesystem:

`html


`

Usage

If you write source code for [Node.js] or for a web application bundler, you can refer to the locally installed graphviz-builder module:

`js
import { digraph } from 'graphviz-builder';
// Create digraph G
const g = digraph('G');
// Add node (ID: Hello)
const n1 = g.addNode('Hello', { color: 'blue' });
n1.set('style', 'filled');
// Add node (ID: World)
g.addNode('World');
// Add edge between the two nodes
const e = g.addEdge(n1, 'World');
e.set('color', 'red');
// Print the dot script
console.log(g.to_dot());
`

If you write source code for [Deno], refer to the full URL of graphviz-builder:

`js
import { digraph } from 'https://unpkg.com/graphviz-builder@0.1.1/dist/index.min.mjs';
// ...the same code from the Node.js example above
`

If you write a plain HTML page, insert the graphviz-builder script pointing wither to CDN or to the local filesystem. The AMD module name (and the windows global) is graphvizBuilder.:

`html



``

See the complete [API] description for more information.

License

Copyright (c) 2020-2022 Ferdinand Prantl
Copyright (c) 2010-2019 Gregoire Lejeune

Licensed under the MIT license.

Contributors

Thanks goes to these wonderful people (emoji key):

Gregoire Lejeune 💻 📖 💡	Darius Kazemi 💻	Sébastien ELET 💻	Andreas Lind 💻	Farrin Reid 💻	Patrik Henningsson 💻	Pooria Azimi 💻
Ruben Bridgewater 💻	Mathieu Ravaux 💻	Ferdinand Prantl 💻

This project follows the [all-contributors] specification. Contributions of any kind welcome!

[all-contributors]: https://github.com/kentcdodds/all-contributors#readme
[Graphviz]: https://graphviz.org/
[node-graphviz]: http://github.com/glejeune/node-graphviz#readme
[graphviz-cli]: https://github.com/prantlf/graphviz-cli#readme
[graphviz-webcomponent]: https://github.com/prantlf/graphviz-webcomponent#readme
[Node.js]: https://nodejs.org/
[Deno]: https://deno.land/
[NPM]: https://docs.npmjs.com/cli/npm
[Yarn]: https://classic.yarnpkg.com/docs/cli/
[PNPM]: https://pnpm.js.org/pnpm-cli
[API]: API.md#classes