Skip to content

prantlf/graphviz-builder

 
 

Repository files navigation

GraphViz Source Script Builder

npm codecov Dependency status All Contributors

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!

About

Generates the source graph script for Graphviz.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.1%
  • TypeScript 2.9%