ts-graphviz
    TypeScript icon, indicating that this package has built-in type declarations

    0.16.0 • Public • Published

    GitHub Action npm version License: MIT code style: prettier PRs Welcome All Contributors

    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:

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

    See Also

    Graphviz-dot Test and Integration

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Yuki Yamazaki

    💻 ⚠️ 📖 🤔

    LaySent

    🐛 ⚠️

    elasticdotventures

    📖

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

    Contributing

    For more info on how to contribute to ts-graphviz, see the docs.

    License

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

    Keywords

    Install

    npm i ts-graphviz

    DownloadsWeekly Downloads

    3,506

    Version

    0.16.0

    License

    MIT

    Unpacked Size

    218 kB

    Total Files

    8

    Last publish

    Collaborators

    • kamiazya