@ts-graphviz/common

What is @ts-graphviz/common?

@ts-graphviz/common is a TypeScript library that provides common utilities and types for working with Graphviz, a graph visualization software. It is part of the ts-graphviz project, which aims to provide a set of tools for creating and manipulating Graphviz graphs in TypeScript.

What are @ts-graphviz/common's main functionalities?

Graph Creation

This feature allows you to create a directed graph (Digraph), add nodes, and add edges between nodes. The `toDot` method converts the graph to DOT format, which is the plain text graph description language used by Graphviz.

const { Digraph } = require('@ts-graphviz/common');
const g = new Digraph('G');
g.addNode('A');
g.addNode('B');
g.addEdge(['A', 'B']);
console.log(g.toDot());

Node and Edge Attributes

This feature allows you to add attributes to nodes and edges. Attributes can include properties like color, shape, and labels, which customize the appearance and behavior of the graph elements.

const { Digraph } = require('@ts-graphviz/common');
const g = new Digraph('G');
g.addNode('A', { color: 'red' });
g.addNode('B', { shape: 'box' });
g.addEdge(['A', 'B'], { label: 'A to B' });
console.log(g.toDot());

Subgraphs

This feature allows you to create subgraphs within a main graph. Subgraphs can be used to group nodes and edges together, often for the purpose of applying specific attributes or for organizational purposes.

const { Digraph, Subgraph } = require('@ts-graphviz/common');
const g = new Digraph('G');
const sg = new Subgraph('cluster_0');
sg.addNode('A');
sg.addNode('B');
g.addSubgraph(sg);
console.log(g.toDot());

Other packages similar to @ts-graphviz/common

graphlib

Graphlib is a JavaScript library for creating and manipulating directed graphs. It provides a rich set of features for graph creation, traversal, and manipulation. Compared to @ts-graphviz/common, graphlib is more focused on the algorithmic aspects of graph manipulation rather than visualization.

cytoscape

Cytoscape is a JavaScript library for visualizing complex networks and graphs. It provides a wide range of features for graph visualization, including layout algorithms, styling, and interaction. While @ts-graphviz/common focuses on generating DOT files for Graphviz, Cytoscape is more geared towards interactive graph visualization in web applications.

d3-graphviz

d3-graphviz is a library that combines D3.js and Graphviz to render graphs in the browser. It allows you to create and manipulate graphs using D3.js and then render them using Graphviz. Compared to @ts-graphviz/common, d3-graphviz is more focused on rendering and visualizing graphs in a web environment.

README

@ts-graphviz/common

It is part of the ts-graphviz library, which is split into modular packages to improve maintainability, flexibility, and ease of use.

This package contains type information, constants, and utility functions related to the DOT language attributes, attribute values, and models for ts-graphviz.

Features

• Type definitions for DOT language elements, such as attributes and attribute values
• Constants representing common attribute names and values
• Utility functions for working with DOT language elements

Usage

Import the necessary types, constants, or utility functions from the @ts-graphviz/common package:

import { NodeAttributesObject, EdgeAttributesObject } from '@ts-graphviz/common';

Use the imported items in your project to work with the DOT language elements:

const nodeAttr: NodeAttributesObject = {
  label: 'Node label',
  shape: 'ellipse',
};

const edgeAttr: EdgeAttributesObject = {
  label: 'Edge label',
  color: 'red',
};

For more examples and usage details, please refer to the ts-graphviz documentation.

Contributing

Contributions to the ts-graphviz project are welcome.

Please refer to the main ts-graphviz repository for guidelines on how to contribute.

License

This package is released under the MIT License.