ts-graphviz

What is ts-graphviz?

The ts-graphviz package is a TypeScript library for creating and manipulating Graphviz graphs. It provides a fluent API to build and render graphs programmatically, making it easier to generate complex diagrams and visualizations.

What are ts-graphviz's main functionalities?

Creating a Graph

This feature allows you to create a directed graph with nodes and edges. The code sample demonstrates how to create a simple graph with two nodes, 'A' and 'B', and an edge from 'A' to 'B'.

const { digraph } = require('ts-graphviz');
const g = digraph('G', (g) => {
  g.node('A');
  g.node('B');
  g.edge(['A', 'B']);
});
console.log(g.toDot());

Customizing Nodes and Edges

This feature allows you to customize the appearance of nodes and edges. The code sample shows how to set the color of a node, change the shape of another node, and add a label to an edge.

const { digraph } = require('ts-graphviz');
const g = digraph('G', (g) => {
  g.node('A', { color: 'red' });
  g.node('B', { shape: 'box' });
  g.edge(['A', 'B'], { label: 'A to B' });
});
console.log(g.toDot());

Subgraphs

This feature allows you to create subgraphs within a graph. The code sample demonstrates how to create two subgraphs, each with its own nodes and edges, and then connect nodes from different subgraphs.

const { digraph, subgraph } = require('ts-graphviz');
const g = digraph('G', (g) => {
  g.subgraph('cluster_0', (s) => {
    s.node('A');
    s.node('B');
    s.edge(['A', 'B']);
  });
  g.subgraph('cluster_1', (s) => {
    s.node('C');
    s.node('D');
    s.edge(['C', 'D']);
  });
  g.edge(['A', 'C']);
});
console.log(g.toDot());

Other packages similar to ts-graphviz

graphviz

The graphviz package is a Node.js wrapper for the Graphviz graph visualization software. It allows you to create and render graphs using the Graphviz DOT language. Compared to ts-graphviz, it is more focused on providing a direct interface to Graphviz's capabilities and may require more manual handling of DOT syntax.

viz.js

The viz.js package is a JavaScript library that provides a way to render Graphviz graphs in the browser using WebAssembly. It allows you to generate and display graphs directly in web applications. Compared to ts-graphviz, viz.js is more suitable for client-side rendering and visualization.

d3-graphviz

The d3-graphviz package is a D3-based library for rendering Graphviz graphs in the browser. It integrates with the D3.js ecosystem, allowing for interactive and dynamic graph visualizations. Compared to ts-graphviz, d3-graphviz is more focused on web-based visualizations and interactivity.

README

ts-graphviz

Graphviz library for TypeScript.

Key Feature

• Export Dot language.
• TypeScript Support.
• Supports multiple runtime and module.
  • Node.js, Browser and Deno.
  • UMD, ESM, CommonJS
• Zero dependencies.

Installation

The package can then be installed using npm:

Package manager

# yarn
$ yarn add ts-graphviz
# or npm
$ npm install -S ts-graphviz

Browser

<script src="//unpkg.com/ts-graphviz/lib/bundle.min.js"></script>

Examples

Script style

import { digraph, toDot } from 'ts-graphviz';

const g = digraph('G');

const subgraphA = g.createSubgraph('A');
const nodeA1 = subgraphA.createNode('A_node1');
const nodeA2 = subgraphA.createNode('A_node2');
subgraphA.createEdge([nodeA1, nodeA2]);

const subgraphB = g.createSubgraph('B');
const nodeB1 = subgraphB.createNode('B_node1');
const nodeB2 = subgraphB.createNode('B_node2');
subgraphA.createEdge([nodeB1, nodeB2]);

const node1 = g.createNode('node1');
const node2 = g.createNode('node2');
g.createEdge([node1, node2]);
const dot = toDot(g);
console.log(dot);

digraph "G" {
  "node1";
  "node2";
  subgraph "A" {
    "A_node1";
    "A_node2";
    "A_node1" -> "A_node2";
    "B_node1" -> "B_node2";
  }
  subgraph "B" {
    "B_node1";
    "B_node2";
  }
  "node1" -> "node2";
}

Callback style

import { digraph, toDot } from 'ts-graphviz';

 const G = digraph('G', (g) => {
  const a = g.node('aa');
  const b = g.node('bb');
  const c = g.node('cc');
  g.edge([a, b, c], {
    [attribute.color]: 'red'
  });
  g.subgraph('A', (A) => {
    const Aa = A.node('Aaa', {
      [attribute.color]: 'pink'
    });

    const Ab = A.node('Abb', {
      [attribute.color]: 'violet'
    });
    const Ac = A.node('Acc');
    A.edge([Aa.port('a'), Ab, Ac, 'E'], {
      [attribute.color]: 'red'
    });
  });
});

const dot = toDot(G);
console.log(dot);

digraph "G" {
  "aa";
  "bb";
  "cc";
  subgraph "A" {
    "Aaa" [
      color = "pink",
    ];
    "Abb" [
      color = "violet",
    ];
    "Acc";
    "Aaa":"a" -> "Abb" -> "Acc" -> "E" [
      color = "red",
    ];
  }
  "aa" -> "bb" -> "cc" [
    color = "red",
  ];
}

Class base API

import { attribute, Digraph, Subgraph, Node, Edge, toDot } from 'ts-graphviz';

const G = new Digraph();
const A = new Subgraph('A');
const node1 = new Node('node1', {
  [attribute.color]: 'red'
});
const node2 = new Node('node2', {
  [attribute.color]: 'blue'
});
const edge = new Edge([node1, node2], {
  [attribute.label]: 'Edge Label',
  [attribute.color]: 'pink'
});
G.addSubgraph(A);
A.addNode(node1);
A.addNode(node2);
A.addEdge(edge);
const dot = toDot(G);
console.log(dot);

digraph {
  subgraph "A" {
    "node1" [
      color = "red",
    ];
    "node2" [
      color = "blue",
    ];
    "node1" -> "node2" [
      label = "Edge Label",
      color = "pink",
    ];
  }
}

Custom Classes

import { Digraph, Node, Edge, EdgeTarget, attribute, toDot } from 'ts-graphviz';

class MyCustomDigraph extends Digraph {
  constructor() {
    super('G', {
      [attribute.label]: 'This is Custom Digraph',
    });
  }
}
class MyCustomNode extends Node {
  constructor(id: number) {
    super(`node${id}`, {
      [attribute.label]: `This is Custom Node ${id}`
    });
  }
}

class MyCustomEdge extends Edge {
  constructor(targets: ReadonlyArray<EdgeTarget>) {
    super(targets, {
      [attribute.label]: 'This is Custom Edge'
    });
  }
}

const digraph = new MyCustomDigraph();
const node1 = new MyCustomNode(1);
const node2 = new MyCustomNode(2);
const edge = new MyCustomEdge([node1, node2]);
digraph.addNode(node1);
digraph.addNode(node2);
digraph.addEdge(edge);
const dot = toDot(g);
console.log(dot);

digraph "G" {
  label = "This is Custom Digraph";
  "node1" [
    label = "This is Custom Node 1",
  ];
  "node2" [
    label = "This is Custom Node 2",
  ];
  "node1" -> "node2" [
    label = "This is Custom Edge",
  ];
}

See Also

Graphviz-dot Test and Integration

• @ts-graphviz/react
  • Graphviz-dot Renderer for React.
• jest-graphviz
  • Jest matchers that supports graphviz integration.
• setup-graphviz
  • GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).

Contributors

Thanks goes to these wonderful people (emoji key):

Yuki Yamazaki 💻 ⚠️ 📖 🤔

LaySent 🐛 ⚠️

elasticdotventures 📖

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

Contributing

For more info on how to contribute to ts-graphviz, see the docs.

License

This software is released under the MIT License, see LICENSE.