ts-graphviz
Advanced tools
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.
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());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.
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.
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.
Graphviz library for TypeScript.
ts-graphviz package provides models and ASTs for the Graphviz DOT language fully integrated with TypeScript.
This package can then be installed using a package manager.
# npm
$ npm install -S ts-graphviz
# or yarn
$ yarn add ts-graphviz
# or pnpm
$ pnpm add ts-graphviz
This section provides an overview of the package.
For more detailed API specifications, please refer to the comments in the TypeScript type definitions and the document automatically generated based on them.
ts-graphviz Module 🚩This module provides Model, an interface for working with the DOT language in JavaScript/TypeScript.
Model is designed to be object-oriented and provides classes Digraph, Graph, Subgraph, Node, and Edge.
Provides a toDot function to convert Model to DOT (DOT language string).
import { attribute as _, Digraph, Subgraph, Node, Edge, toDot } from 'ts-graphviz';
const G = new Digraph();
const A = new Subgraph('A');
const node1 = new Node('node1', {
[_.color]: 'red'
});
const node2 = new Node('node2', {
[_.color]: 'blue'
});
const edge = new Edge([node1, node2], {
[_.label]: 'Edge Label',
[_.color]: 'pink'
});
G.addSubgraph(A);
A.addNode(node1);
A.addNode(node2);
A.addEdge(edge);
const dot = toDot(G);
// digraph {
// subgraph "A" {
// "node1" [
// color = "red",
// ];
// "node2" [
// color = "blue",
// ];
// "node1" -> "node2" [
// label = "Edge Label",
// color = "pink",
// ];
// }
// }
You can also add your own implementation by inheriting from the class.
import { Digraph, Node, Edge, EdgeTargetTuple, attribute as _, toDot } from 'ts-graphviz';
class MyCustomDigraph extends Digraph {
constructor() {
super('G', {
[_.label]: 'This is Custom Digraph',
});
}
}
class MyCustomNode extends Node {
constructor(id: number) {
super(`node${id}`, {
[_.label]: `This is Custom Node ${id}`
});
}
}
class MyCustomEdge extends Edge {
constructor(targets: EdgeTargetTuple) {
super(targets, {
[_.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);
// 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",
// ];
// }
When creating Graph or Digraph, you can use Model Factory to provide a notation more similar to the DOT language.
Model also has a declarative API, so you can consistently choose a declarative paradigm.
import { attribute as _, 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], {
[_.color]: 'red'
});
g.subgraph('A', (A) => {
const Aa = A.node('Aaa', {
[_.color]: 'pink'
});
const Ab = A.node('Abb', {
[_.color]: 'violet'
});
const Ac = A.node('Acc');
A.edge([Aa.port('a'), Ab, Ac, 'E'], {
[_.color]: 'red'
});
});
});
const dot = toDot(G);
// 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",
// ];
// }
Note Of course, we also provide an API for creating strict mode graphs.
import { strict, toDot } from 'ts-graphviz'; const G = strict.graph(...); const dot = toDot(G); // strict graph { // }
ts-graphviz/ast Module 🔢This module status is
.
An API is provided to handle ASTs for advanced use.
The following functions are provided as described in the state transition diagram.
fromModel function converts Model to AST.stringify function converts AST to DOT.parse function to convert from DOT to AST.Note As you can see from the above figure, the
toDotfunction provided by thets-graphvizpackage is a composite function offromModelandstringify.
Detailed usage is TODO. Please refer to the TypeScript type definition.
import { parse } from 'ts-graphviz/ast';
const ast = parse(`
digraph example {
node1 [
label = "My Node",
]
}
`);
// {
// type: 'Dot',
// location: {
// start: { offset: 3, line: 2, column: 3 },
// end: { offset: 68, line: 7, column: 1 }
// },
// children: [
// {
// id: {
// value: 'example',
// quoted: false,
// type: 'Literal',
// location: {
// start: { offset: 11, line: 2, column: 11 },
// end: { offset: 18, line: 2, column: 18 }
// },
// children: []
// },
// directed: true,
// strict: false,
// type: 'Graph',
// location: {
// start: { offset: 3, line: 2, column: 3 },
// end: { offset: 67, line: 6, column: 4 }
// },
// children: [
// {
// id: {
// value: 'node1',
// quoted: false,
// type: 'Literal',
// location: {
// start: { offset: 25, line: 3, column: 5 },
// end: { offset: 30, line: 3, column: 10 }
// },
// children: []
// },
// type: 'Node',
// location: {
// start: { offset: 25, line: 3, column: 5 },
// end: { offset: 63, line: 5, column: 6 }
// },
// children: [
// {
// key: {
// value: 'label',
// quoted: false,
// type: 'Literal',
// location: {
// start: { offset: 39, line: 4, column: 7 },
// end: { offset: 44, line: 4, column: 12 }
// },
// children: []
// },
// value: {
// value: 'My Node',
// quoted: true,
// type: 'Literal',
// location: {
// start: { offset: 47, line: 4, column: 15 },
// end: { offset: 56, line: 4, column: 24 }
// },
// children: []
// },
// location: {
// start: { offset: 39, line: 4, column: 7 },
// end: { offset: 57, line: 4, column: 25 }
// },
// type: 'Attribute',
// children: []
// }
// ]
// }
// ]
// }
// ]
// }
Related projects can be found at ts-graphviz GitHub Organization.
The TypeScript/JavaScript ecosystem provides a variety of OSS with the goal of making Graphviz more connected and easier to use.
Thanks goes to these wonderful people (emoji key):
 Yuki Yamazaki 💻 ⚠️ 📖 🤔 |  LaySent 🐛 ⚠️ |  elasticdotventures 📖 |  Christian Murphy 💻 🤔 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
The easiest way to contribute is to use the library and star repository.
Feel free to ask questions on GitHub Discussions.
Please register at GitHub Issues.
See CONTRIBUTING.md.
Please support core member kamiazya.
Note Even just a dollar is enough motivation for me to develop 😊
This software is released under the MIT License, see LICENSE.
FAQs
Graphviz library for TypeScript
The npm package ts-graphviz receives a total of 549,302 weekly downloads. As such, ts-graphviz popularity was classified as popular.
We found that ts-graphviz demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.