DOT (graph description language)

An undirected graph

At its simplest, DOT can be used to describe an undirected graph. An undirected graph shows simple relations between objects, such as friendship between people. The graph keyword is used to begin a new graph, and nodes are described within curly braces. A double-hyphen (--) is used to show relations between the nodes.

// The graph name and the semicolons are optional
graph graphname {
    a -- b -- c;
    b -- d;
}

A directed graph

Similar to undirected graphs, DOT can describe directed graphs, such as flowcharts and dependency trees. The syntax is the same as for undirected graphs, except the digraph keyword is used to begin the graph, and an arrow (->) is used to show relationships between nodes.

digraph graphname {
    a -> b -> c;
    b -> d;
}

A graph with attributes

Various attributes can be applied to graphs, nodes and edges in DOT files. [2] These attributes can control aspects such as color, shape, and line styles. For nodes and edges, one or more attribute–value pairs are placed in square brackets ([]) after a statement and before the semicolon (which is optional). Graph attributes are specified as direct attribute–value pairs under the graph element, where multiple attributes are separated by a comma or using multiple sets of square brackets, while node attributes are placed after a statement containing only the name of the node, but not the relations between the dots.

graph graphname {
    // This attribute applies to the graph itself
    size="1,1";
    // The label attribute can be used to change the label of a node
    a [label="Foo"];
    // Here, the node shape is changed.
    b [shape=box];
    // These edges both have different line properties
    a -- b -- c [color=blue];
    b -- d [style=dotted];
    // [style=invis] hides a node.
}

HTML-like labels are only available on versions of Graphviz that are newer than mid-November 2003, in particular, they are not considered as part of release 1.10.[3]

Dot supports C and C++ style single line and multiple line comments. In addition, it ignores lines with a number sign symbol (#) as their first character.

// This is a single line comment.
/* This is a
   multiple line
   comment. */
# Lines like this are also ignored.

• Graphviz – a collection of libraries and utilities to manipulate and render graphs

• Canviz – a JavaScript library for rendering DOT files[4]
• d3-graphviz – a JavaScript library based on Viz.js and D3.js that renders DOT graphs and supports animated transitions between graphs and interactive graph manipulation[5]
• Vis.js – a JavaScript library that accept DOT as input for network graphs.[6]
• Viz.js – a JavaScript port of Graphviz that provides a simple wrapper for using it in the browser.
• hpcc-js/wasm Graphviz – a fast WASM library for Graphviz similar to Viz.js[7]

• Gephi – an interactive visualization and exploration platform for all kinds of networks and complex systems, dynamic and hierarchical graphs
• Grappa – a partial port of Graphviz to Java
• graphviz-java – an open source partial port of Graphviz to Java available from github.com
• ZGRViewer – a DOT viewer[8]

• Beluging – a Python- & Google Cloud Platform-based viewer of DOT and Beluga extensions
• dot2tex – a program to convert files from DOT to PGF/TikZ or PSTricks, both of which are rendered in LaTeX[9]
• OmniGraffle – a digital illustration application for macOS that can import a subset of DOT, producing an editable document (but the result cannot be exported back to DOT)
• Tulip – a software framework in C++ that can import DOT files for analysis[10]
• VizierFX – an Apache Flex graph rendering library in ActionScript[11]