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",
  ];
}