GraphViz Source Script Builder

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

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:

<script src=https://unpkg.com/graphviz-builder@0.1.1/dist/index.min.js></script>
<script src=node_modules/graphviz-builder/dist/index.min.js></script>

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:

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:

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

<script src=https://unpkg.com/graphviz-builder@0.1.1/dist/index.min.js></script>
<script src=node_modules/graphviz-builder/dist/index.min.js></script>
<script>
const { digraph } = window.graphvizBuilder;
// ...the same code from the Node.js example above
</script>

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!