Editing DOT (graph description language)

{{Short description|File format}}
{{Infobox file format
| name                   = DOT
| icon                   = 
| iconcaption            = 
| screenshot             = 
| caption                = 
|_noextcode              = on
| extensions             = <code>.gv</code><!--{{nbsp|3}}<code>.dot</code>-->
|_nomimecode             = on
| mime                   = <!--<code></code>-->
| type_code              = <!-- {{hlist |"gv" |"dot"}} -->
| uniform_type           = <!-- <code></code>-->
| conforms_to            = <!--<code></code><br /><code></code>-->
| magic                  = 
| developer              = 
| released               = <!--{{start date and age|df=yes|paren=yes|2000|00|00}}-->
| latest_release_version = 
| latest_release_date    = <!--{{start date and age|2000|00|00|df=yes}}-->
| genre                  = [[Graph (discrete mathematics)|Graph]] description language
| container_for          = 
| contained_by           = 
| extended_from          = 
| extended_to            = 
| standard               = 
| open                   = Yes
| url                    = 
}}

'''DOT''' is a [[Graph (discrete mathematics)|graph]] description language, developed as a part of the [[Graphviz]] project. DOT graphs are typically stored as [[Computer file|file]]s with the <code>.gv</code> or <code>.dot</code> [[filename extension]] — <code>.gv</code> is preferred, to avoid confusion with the <code>.dot</code> extension used by versions of [[Microsoft Word]] before 2007.<ref>{{cite web |url=http://marc.info/?l=graphviz-devel&m=129418103126092|title=File extension .dot or .gv? |website=marc.info |access-date=2011-03-08}}</ref> <code>dot</code> is also the name of the main program to process DOT files in the Graphviz package.

Various programs can process DOT files. Some, such as ''dot'', ''neato'', ''twopi'', ''circo'', ''fdp'', and ''sfdp'', can read a DOT file and render it in graphical form. Others, such as ''gvpr'', ''gc'', ''acyclic'', ''ccomps'', ''sccmap'', and ''tred'', read DOT files and perform calculations on the represented graph. Finally, others, such as ''lefty'', ''dotty'', and ''grappa'', provide an interactive interface. The GVedit tool combines a text editor and a non-interactive viewer. Most programs are part of the Graphviz package or use it internally.

DOT is historically an acronym for "DAG of tomorrow", as the successor to a DAG format and a ''dag'' program which handled only [[Directed acyclic graph|directed acyclic graphs]].<ref>{{Cite web |date=2022-11-14 |title='dot' name (etymology) |url=https://forum.graphviz.org/t/dot-name-etymology/1367 |access-date=2023-07-10 |website=Graphviz |language=en}}</ref>

== Syntax ==
=== Graph types ===
==== Undirected graphs ====
[[File:DotLanguageUndirected.svg|right|thumb|An undirected graph]]
At its simplest, DOT can be used to describe an [[Graph (discrete mathematics)#Undirected graph|undirected graph]]. An undirected graph shows simple relations between objects, such as reciprocal friendship between people. The <code>graph</code> keyword is used to begin a new graph, and nodes are described within curly braces. A double-hyphen (<code>--</code>) is used to show relations between the nodes.
<syntaxhighlight lang="dot">
// The graph name and the semicolons are optional
graph graphname {
    a -- b -- c;
    b -- d;
}
</syntaxhighlight>
{{-}}

==== Directed graphs ====
[[File:DotLanguageDirected.svg|right|thumb|A directed graph]]
Similar to undirected graphs, DOT can describe [[Graph (discrete mathematics)#Directed graph|directed graphs]], such as [[flowchart]]s and dependency [[Tree (graph theory)|tree]]s. The syntax is the same as for undirected graphs, except the <code>digraph</code> keyword is used to begin the graph, and an arrow (->) is used to show relationships between nodes.
<syntaxhighlight lang="dot">
digraph graphname {
    a -> b -> c;
    b -> d;
}
</syntaxhighlight>
{{-}}

=== Attributes ===
[[File:DotLanguageAttributes.svg|right|thumb|A graph with attributes]]

Various attributes can be applied to graphs, nodes and edges in DOT files.<ref>{{cite web|title=Node, Edge and Graph Attributes|url=http://www.graphviz.org/doc/info/attrs.html |website=graphviz.org|access-date=2017-05-12}}</ref> These attributes can control aspects such as color, shape, and line styles.  For nodes and edges, one or more [[attribute–value pair]]s are placed in square brackets <code>[]</code> 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.

<syntaxhighlight lang="dot">
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.
}
</syntaxhighlight>HTML-like labels are supported, although initially Graphviz did not handle them.<ref>{{cite web|url=http://www.graphviz.org/doc/info/shapes.html#html|title=Node Shapes: HTML-Like Labels|website=graphviz.org|access-date=2017-05-12}}</ref>{{-}}

=== Comments ===
DOT supports [[C (programming language)|C]] and [[C++]] style single line and multiple line [[Comment (computer programming)|comments]]. In addition, it ignores lines with a number sign symbol <code>#</code> as their first character, like many interpreted languages.

== Layout programs ==
[[File:Huffman (To be or not to be).svg|right|thumb|Binary tree generated in Graphviz from a DOT description by an online [http://huffman.ooz.ie/ Huffman Tree generator]]]
The DOT language defines a graph, but does not provide facilities for rendering the graph.  There are several programs that can be used to render, view, and manipulate graphs in the DOT language:

=== General ===

* [[Graphviz]] – a collection of CLI utilities and libraries to manipulate and render graphs into different formats like [[Scalable Vector Graphics|SVG]], [[PDF]], [[Portable Network Graphics|PNG]] etc.
**<code>dot</code> – CLI tool for conversion between {{Code|.dot}} and other formats

===JavaScript===

* Canviz{{snd}}a [[JavaScript]] library for rendering DOT files<ref>{{cite web| url=http://www.ryandesign.com/canviz/ |title=canviz: graphviz on a canvas |access-date=2017-06-02}}</ref>
* d3-graphviz{{snd}}a [[JavaScript]] library based on Viz.js and [[D3.js]] that renders DOT graphs and supports animated transitions between graphs and interactive graph manipulation<ref>{{cite web |url=https://github.com/magjac/d3-graphviz |website=github.com |title=GitHub - magjac/d3-graphviz: Graphviz DOT rendering and animated transitions using D3 |access-date=2018-06-06}}</ref>
* Vis.js{{snd}}a [[JavaScript]] library that accept DOT as input for network graphs.<ref>{{cite web |url=http://visjs.org/docs/network/#importDot |website=vis.js |title=Import data in DOT language |access-date=2018-12-22}}</ref>
*Viz.js – a JavaScript port of Graphviz that provides a simple wrapper for using it in the browser.
* hpcc-js/wasm Graphviz{{snd}}a fast WASM library for Graphviz similar to Viz.js<ref>{{cite web |url=https://github.com/hpcc-systems/hpcc-js-wasm#graphviz-graphvizlibwasm |title=hpcc-js/wasm |website=[[GitHub]] |access-date=2020-10-21}}</ref>

===Java===

* [[Gephi]]{{snd}}an interactive visualization and exploration platform for all kinds of networks and complex systems, dynamic and hierarchical graphs
* Grappa{{snd}}a partial port of Graphviz to [[Java (programming language)|Java]]
* graphviz-java{{snd}}an open source partial port of Graphviz to [[Java (programming language)|Java]] available from github.com
* ZGRViewer{{snd}}a DOT viewer<ref>{{cite web |url=http://zvtm.sourceforge.net/zgrviewer.html |website=zvtm.sourceforge.net |title=ZGRViewer |access-date=2017-05-12}}</ref>

===Other===

* Beluging{{snd}}a [[Python (programming language)|Python]]- & [[Google Cloud Platform]]-based viewer of DOT and Beluga extensions
* Delineate{{snd}}a [[Rust (programming language)|Rust]] application for [[Linux]] than can edit fully-featured DOT graph with interactive preview, and export as PNG, SVG, or JPEG
* dot2tex{{snd}}a program to convert files from DOT to [[PGF/TikZ]] or [[PSTricks]], both of which are rendered in [[LaTeX]]<ref>{{cite web |title=dot2tex – A Graphviz to LaTeX converter |url=https://dot2tex.readthedocs.io/ |website=dot2tex.readthedocs.io |date=2019-11-01}}</ref>
* [[OmniGraffle]]{{snd}}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 (software)|Tulip]]{{snd}}a [[software framework]] in [[C++]] that can import DOT files for analysis<ref>{{cite web |url=http://tulip.labri.fr/ |website=tulip.labri.fr |title=Data Visualization Software – Tulip |access-date=2017-05-12}}</ref>
* VizierFX{{snd}}an [[Apache Flex]] graph rendering library in [[ActionScript]]<ref>{{cite web |url=https://github.com/gvhung/vizierfx |website=github.com |title=GitHub - gvhung/vizierfx: Automatically exported from code.google.com/p/vizierfx |access-date=2017-05-12}}</ref>

== Notes ==
{{Reflist}}

== See also ==
{{commonscat|DOT language}}

=== External links ===
* [https://www.graphviz.org/documentation/ DOT tutorial and specification]
** [https://www.graphviz.org/pdf/dotguide.pdf Drawing graphs with dot]
** [https://www.graphviz.org/doc/info/attrs.html Node, Edge and Graph Attributes]
** [https://www.graphviz.org/doc/info/shapes.html Node Shapes]
** [https://www.graphviz.org/gallery/ Gallery of examples]
* [https://dreampuf.github.io/GraphvizOnline/ Graphviz Online]: instant conversion and visualization of DOT descriptions
* [https://www.boost.org/libs/graph/doc/index.html Boost Graph Library]
* [http://www0.cs.ucl.ac.uk/staff/W.Langdon/lisp2dot.html lisp2dot] or [https://github.com/andrewlin16/tree2dot tree2dot]: convert [[Lisp (programming language)|Lisp programming language]]-like program trees to DOT language (designed for use with [[genetic programming]])

{{Graph representations}}
[[Category:Mathematical software]]
[[Category:Graph description languages]]
[[Category:Graph drawing]]