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.
• Support Node.js and Browser.
  • UMD, ESM, CommonJS
• No dependency.

Installation

The plugin can then be installed using npm:

Package manager

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

Browser

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

Usage

Script

import { digraph } 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 = g.toDot();
console.log(dot);

Callback style API

import { digraph } from 'ts-graphviz';

const G = digraph('G', g => {
  g.subgraph('A', A => {
    const node1 = A.node('A_node1');
    const node2 = A.node('A_node2');
    A.edge([node1, node2]);
  });
  g.subgraph('B', B => {
    const node1 = B.node('B_node1');
    const node2 = B.node('B_node2');
    B.edge([node1, node2]);
  });
  g.edge(['node1', 'node2']);
});
const dot = G.toDot();
console.log(dot);

Output

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;
}

See Also

Graphviz-dot Test and Integration

• jest-graphviz
  • Jest matchers that supports graphviz integration.
• setup-graphviz
  • GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).

License

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

Author

kamiazya(Yuki Yamazaki)