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.
ts-graphviz
Graphviz library for TypeScript.
Installation
The plugin can then be installed using npm:
yarn
yarn add -D ts-graphviz
npm
npm install --save-dev ts-graphviz
Usage
Script
import { digraph } from 'ts-graphviz';
const g = digraph();
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);
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";
}
License
This software is released under the MIT License, see LICENSE.
Author
kamiazya(Yuki Yamazaki)