Key Features ✨

ts-graphviz package provides models and ASTs for the Graphviz DOT language fully integrated with TypeScript.

• TypeScript-friendly API
  • It provides models in the DOT language. TypeScript type definitions are also provided for attributes and even attribute types.
• Freedom from programming paradigms
  • Designed to be object-oriented, it provides APIs that can be adapted to both imperative and declarative APIs. You can choose the paradigm that best fits your project.
• Suitable for any use cases
  • Both a high-layer API to provide models and a low-layer API to handle ASTs are provided to address any use cases.
• Modular and Extensible
  • The library is split into multiple packages, each serving a specific purpose. This modular design allows users to pick and choose the functionality they need, resulting in improved maintainability and flexibility.
• Cross Platform
  • It supports both Node.js and Deno and Browser.
• Customizable
  • It provides a way to extend the library's type system to customize graph visualization solutions to meet specific needs.

Installation 💽

Node.js

This package can then be installed using a package manager.

1# npm
2$ npm install -S ts-graphviz
3# or yarn
4$ yarn add ts-graphviz
5# or pnpm
6$ pnpm add ts-graphviz

Note Want to try before installing? Check out Runkit to see how it works.

Deno 🦕

Deno v1.28 and above supports npm.

You can install and use the package by specifying the following:

1import { toDot } from 'npm:ts-graphviz';

Usage 📑

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.

Object-Oriented ❤️

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).

1import { attribute as _, Digraph, Subgraph, Node, Edge, toDot } from 'ts-graphviz';
2
3const G = new Digraph();
4const A = new Subgraph('A');
5const node1 = new Node('node1', {
6  [_.color]: 'red'
7});
8const node2 = new Node('node2', {
9  [_.color]: 'blue'
10});
11const edge = new Edge([node1, node2], {
12  [_.label]: 'Edge Label',
13  [_.color]: 'pink'
14});
15G.addSubgraph(A);
16A.addNode(node1);
17A.addNode(node2);
18A.addEdge(edge);
19const dot = toDot(G);
20// digraph {
21//   subgraph "A" {
22//     "node1" [
23//       color = "red",
24//     ];
25//     "node2" [
26//       color = "blue",
27//     ];
28//     "node1" -> "node2" [
29//       label = "Edge Label",
30//       color = "pink",
31//     ];
32//   }
33// }

1import { Digraph, Node, Edge, EdgeTargetTuple, attribute as _, toDot } from 'ts-graphviz';
2
3class MyCustomDigraph extends Digraph {
4  constructor() {
5    super('G', {
6      [_.label]: 'This is Custom Digraph',
7    });
8  }
9}
10class MyCustomNode extends Node {
11  constructor(id: string) {
12    super(`node_${id}`, {
13      [_.label]: `This is Custom Node ${id}`,
14    });
15  }
16}
17
18class MyCustomEdge extends Edge {
19  constructor(targets: EdgeTargetTuple) {
20    super(targets, {
21      [_.label]: 'This is Custom Edge',
22    });
23  }
24}
25
26const digraph = new MyCustomDigraph();
27const node1 = new MyCustomNode('A');
28const node2 = new MyCustomNode('B');
29const edge = new MyCustomEdge([node1, node2]);
30digraph.addNode(node1);
31digraph.addNode(node2);
32digraph.addEdge(edge);
33const dot = toDot(digraph);
34// digraph "G" {
35//   label = "This is Custom Digraph";
36//   "node_A" [
37//     label = "This is Custom Node A";
38//   ];
39//   "node_B" [
40//     label = "This is Custom Node B";
41//   ];
42//   "node_A" -> "node_B" [
43//     label = "This is Custom Edge";
44//   ];
45// }

1const g = new Digraph();
2g.with({
3  Node: MyCustomNode,
4  Edge: MyCustomEdge,
5});
6const a = g.createNode('A'); // MyCustomNode
7const b = g.createNode('B'); // MyCustomNode
8g.createEdge([a, b]); // MyCustomEdge
9const dot = toDot(g);
10// digraph {
11//   "node_A" [
12//     label = "This is Custom Node A";
13//   ];
14//   "node_B" [
15//     label = "This is Custom Node B";
16//   ];
17//   "node_A" -> "node_B" [
18//     label = "This is Custom Edge";
19//   ];
20// }

1const G = fromDot(
2  `digraph {
3    node_A [
4      label = "This is a Label of Node A";
5    ];
6  }`,
7);
8
9G.edge(['node_A', 'node_B']);
10
11const dot = toDot(G)
12// digraph {
13//   "node_A" [
14//     label = "This is a Label of Node A";
15//   ];
16//   "node_A" -> "node_B";
17// }

Declarative API 😎

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.

1import { attribute as _, digraph, toDot } from 'ts-graphviz';
2
3 const G = digraph('G', (g) => {
4  const a = g.node('aa');
5  const b = g.node('bb');
6  const c = g.node('cc');
7  g.edge([a, b, c], {
8    [_.color]: 'red'
9  });
10  g.subgraph('A', (A) => {
11    const Aa = A.node('Aaa', {
12      [_.color]: 'pink'
13    });
14
15    const Ab = A.node('Abb', {
16      [_.color]: 'violet'
17    });
18    const Ac = A.node('Acc');
19    A.edge([Aa.port('a'), Ab, Ac, 'E'], {
20      [_.color]: 'red'
21    });
22  });
23});
24
25const dot = toDot(G);
26// digraph "G" {
27//   "aa";
28//   "bb";
29//   "cc";
30//   subgraph "A" {
31//     "Aaa" [
32//       color = "pink",
33//     ];
34//     "Abb" [
35//       color = "violet",
36//     ];
37//     "Acc";
38//     "Aaa":"a" -> "Abb" -> "Acc" -> "E" [
39//       color = "red",
40//     ];
41//   }
42//   "aa" -> "bb" -> "cc" [
43//     color = "red",
44//   ];
45// }

Note Of course, we also provide an API for creating strict mode graphs.

1import { strict, toDot } from 'ts-graphviz';
2
3const G = strict.graph(...);
4const dot = toDot(G);
5// strict graph {
6// }

1const { digraph } = withContext({
2  Digraph: MyCustomDigraph,
3  Node: MyCustomNode,
4  Edge: MyCustomEdge,
5});
6
7const G = digraph((g) => {
8  const a = g.node('A'); // MyCustomNode
9  const b = g.node('B'); // MyCustomNode
10  g.edge([a, b]); // MyCustomEdge
11});
12const dot = toDot(g);
13// digraph "G" {
14//   label = "This is Custom Digraph";
15//   "node_A" [
16//     label = "This is Custom Node A";
17//   ];
18//   "node_B" [
19//     label = "This is Custom Node B";
20//   ];
21//   "node_A" -> "node_B" [
22//     label = "This is Custom Edge";
23//   ];
24// }

@ts-graphviz/adapter Module 🔌

This module status is .

Provides an interface to run Graphviz dot commands.

Graphviz must be installed so that the dot command can be executed.

Execute the dot command to output a DOT language string to a stream or file.

This module provides the following functions.

• The toStream function converts DOT to Stream.

  1import { toStream } from 'ts-graphviz/adapter';
  2
  3const dot = `
  4  digraph example {
  5    node1 [
  6      label = "My Node",
  7    ]
  8  }
  9`;
  10
  11const stream = await toStream(dot, { format: 'svg' });
  12// Node.js
  13stream.pipe(process.stdout);
  14// Deno
  15await stream.pipeTo(Deno.stdout.writable);

• Writes DOT to a file at the specified path toFile function

  1import { toFile } from 'ts-graphviz/adapter';
  2
  3const dot = `
  4  digraph example {
  5    node1 [
  6      label = "My Node",
  7    ]
  8  }
  9`;
  10
  11await toFile(dot, './result.svg', { format: 'svg' });

Note Designed to work with Node.js and Deno, Stream is runtime native.

@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.

• The fromModel function converts Model to AST.
• The toModel function converts AST to Model.
• The stringify function converts AST to DOT.
• The parse function to convert from DOT to AST.

Note As you can see from the above figure, the toDot function provided by the ts-graphviz package is a composite of fromModel and stringify. The fromDot function is a composite of parse and toModel.

Detailed usage is TODO. Please refer to the TypeScript type definition.

1import { parse } from '@ts-graphviz/ast';
2
3const ast = parse(`
4  digraph example {
5    node1 [
6      label = "My Node",
7    ]
8  }
9`);
10// {
11//   type: 'Dot',
12//   location: {
13//     start: { offset: 3, line: 2, column: 3 },
14//     end: { offset: 68, line: 7, column: 1 }
15//   },
16//   children: [
17//     {
18//       id: {
19//         value: 'example',
20//         quoted: false,
21//         type: 'Literal',
22//         location: {
23//           start: { offset: 11, line: 2, column: 11 },
24//           end: { offset: 18, line: 2, column: 18 }
25//         },
26//         children: []
27//       },
28//       directed: true,
29//       strict: false,
30//       type: 'Graph',
31//       location: {
32//         start: { offset: 3, line: 2, column: 3 },
33//         end: { offset: 67, line: 6, column: 4 }
34//       },
35//       children: [
36//         {
37//           id: {
38//             value: 'node1',
39//             quoted: false,
40//             type: 'Literal',
41//             location: {
42//               start: { offset: 25, line: 3, column: 5 },
43//               end: { offset: 30, line: 3, column: 10 }
44//             },
45//             children: []
46//           },
47//           type: 'Node',
48//           location: {
49//             start: { offset: 25, line: 3, column: 5 },
50//             end: { offset: 63, line: 5, column: 6 }
51//           },
52//           children: [
53//             {
54//               key: {
55//                 value: 'label',
56//                 quoted: false,
57//                 type: 'Literal',
58//                 location: {
59//                   start: { offset: 39, line: 4, column: 7 },
60//                   end: { offset: 44, line: 4, column: 12 }
61//                 },
62//                 children: []
63//               },
64//               value: {
65//                 value: 'My Node',
66//                 quoted: true,
67//                 type: 'Literal',
68//                 location: {
69//                   start: { offset: 47, line: 4, column: 15 },
70//                   end: { offset: 56, line: 4, column: 24 }
71//                 },
72//                 children: []
73//               },
74//               location: {
75//                 start: { offset: 39, line: 4, column: 7 },
76//                 end: { offset: 57, line: 4, column: 25 }
77//               },
78//               type: 'Attribute',
79//               children: []
80//             }
81//           ]
82//         }
83//       ]
84//     }
85//   ]
86// }

Extending the Type System 🧰

The status of this feature is .

With ts-graphviz, you can extend the library's type system to customize graph visualization solutions to meet specific needs.

Note To allow for customization, types are named with the $ symbol.

If you want to extend a type definition in cases not listed below, check the source code to see if you can extend it with $....

If not, please create an issue or pull request.

Use Case: Specifying Custom Graph Layout and Output Formats

1import { $keywords } from '@ts-graphviz/common';
2import { toFile } from '@ts-graphviz/adapter';
3
4// 1. Declare the '@ts-graphviz/adapter' module.
5declare module '@ts-graphviz/adapter' {
6  export namespace Layout {
7    // 2. Define the $values interface in the Layout namespace.
8    // 3. Inherit from $keywords<'my-custom-algorithm'> and specify the name of the new layout engine in <...>.
9    export interface $values extends $keywords<'my-custom-algorithm'> {}
10  }
11
12  export namespace Format {
13    // 4. Define the $values interface in the Format namespace.
14    // 5. Inherit from $keywords<'mp4'> and specify the name of the new output format in <...>.
15    export interface $values extends $keywords<'mp4'> {}
16  }
17}
18
19toFile('digraph { a -> b }', '/path/to/file', {
20  layout: 'my-custom-algorithm',
21  format: 'mp4',
22});

Use Case: Adding Custom Attributes

1import { $keywords } from '@ts-graphviz/common';
2import { digraph, toDot, attribute as _ } from 'ts-graphviz';
3
4// 1. Declare the '@ts-graphviz/common' module.
5declare module '@ts-graphviz/common' {
6  export namespace GraphAttributeKey {
7    // 2. Define the $values interface in the GraphAttributeKey namespace.
8    // 3. Inherit from $keywords<'hoge'> and specify the name of the new attribute in <...>.
9    export interface $values extends $keywords<'hoge'> {}
10  }
11
12  export namespace Attribute {
13    // 4. Define the $keys interface in the Attribute namespace.
14    // 5. Inherit from $keywords<'hoge'> and specify the name of the new attribute in <...>.
15    export interface $keys extends $keywords<'hoge'> {}
16
17    // 6. Define the $types interface in the Attribute namespace.
18    // 7. Specify the new attribute in the key and define its corresponding value in the value.
19    export interface $types {
20      hoge: string;
21    }
22  }
23}
24
25console.log(
26  toDot(
27    digraph((g) => {
28      g.set(_.hoge, 'fuga');
29    }),
30  ),
31);

Deep dive 🏊‍♂️

Architecture 🏛

See ARCHITECTURE.md for more details.

Security 🛡️

See SECURITY.md for more details.

Who's using ts-graphviz 📜

• Apollo GraphQL
• AWS
• IBM (StrongLoop)
• The University of Tokyo
• Transmute

Note Let us know that you're using ts-graphviz on GitHub Discussions 🙏

Related Projects 💫

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.

Contributors 👥

Thanks goes to these wonderful people (emoji key):

Yuki Yamazaki 💻 ⚠️ 📖 🤔	LaySent 🐛 ⚠️	elasticdotventures 📖	Christian Murphy 💻 🤔 📖	Artem 🐛	fredericohpandolfo 🐛	diegoquinteiro 🐛
robross0606 🤔	Blake Regalia 🐛	bigbug 💬	mrwk 💬	svdvonde 💬	Adam 💬	Trevor Scheer ️️️️♿️
Prem Pillai 🐛	nagasawaryoya 💻 ⚠️	YukiSasaki 💻 ⚠️	Madd0g 🐛	j4k0xb 🐛	HKrogstie 🐛

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

How to Contribute 💪

The easiest way to contribute is to use the library and star repository.

Questions 💭

Feel free to ask questions on GitHub Discussions.

Report bugs / request additional features 💡

Please register at GitHub Issues.

Development / Bug Fixes 🧑‍💻

See CONTRIBUTING.md.

Financial Support 💸

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor

Thank you to all our backers! 🙏 Become a backer

Please support ts-graphviz on Open Collective or GitHub Sponsors.

Note Even just a dollar is enough motivation to develop 😊

ts-graphviz for Enterprise 🏢

Available as part of the Tidelift Subscription.

The maintainers of ts-graphviz and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open-source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use.

Learn more.

License ⚖️

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