Rendering a dot graph from Java server is simple.

String svg = Graphviz.fromString("graph g {a--b}").createSvg();

The Graphviz graph specification must begin with a directive stating whether a directed graph (digraph) or an undirected graph (graph) is desired. Semantically, this indicates whether or not there is a natural direction from one of the edge's nodes to the other. An optional graph ID follows this and paired curly braces denotes the body of the statement list (stmt_list).

Optionally, a graph may also be described as strict. This forbids the creation of multi-edges (i.e., there can be at most one edge with a given tail node and head node in the directed case). For undirected graphs, there can be at most one edge connected to the same two nodes. Subsequent edge statements using the same two nodes will identify the edge with the previously defined one and apply any attributes given in the edge statement.

Here is the basic structure:

[strict] (graph | digraph) [ID] '{' stmt_list '}'

The graph statement (graph_stmt), the node statement (node_stmt), and the edge statement (edge_stmt) are the three most commonly used statements in the Graphviz DOT language. Graph statements allow for attributes to be set for all components of the graph. Node statements define and provide attributes for graph nodes. Edge statements specify the edge operations between nodes and they supply attributes to the edges. For the edge operations, a directed graph must specify an edge using the edge operator -> while an undirected graph must use the -- operator.

Within these statements follow statement lists. Thus for a node statement, a list of nodes is expected. For an edge statement, a list of edge operations. Any of the list items can optionally have an attribute list (attr_list) which modify the attributes of either the node or edge.

Comments may be placed within the statement list. These can be marked using a // or a /* */ structure. Comment lines are denoted by a # character. Multiple statements within a statement list can be separated by linebreaks or ; characters between multiple statements

Here is an example where nodes (in this case styled as boxes and circles) can be easily defined along with their connections:

digraph boxes_and_circles {

  # a 'graph' statement
  graph [overlap = true, fontsize = 10]

  # several 'node' statements
  node [shape = box,
        fontname = Helvetica]
  A; B; C; D; E; F

  node [shape = circle,
        fixedsize = true,
        width = 0.9] // sets as circles
  1; 2; 3; 4; 5; 6; 7; 8

  # several 'edge' statements
  A->1 B->2 B->3 B->4 C->A
  1->D E->A 2->4 1->5 1->F
  E->6 4->6 5->7 6->7 3->8
}

Subgraphs play three roles in Graphviz. First, a subgraph can be used to represent graph structure, indicating that certain nodes and edges should be grouped together. This is the usual role for subgraphs and typically specifies semantic information about the graph components. It can also provide a convenient shorthand for edges. An edge statement allows a subgraph on both the left and right sides of the edge operator. When this occurs, an edge is created from every node on the left to every node on the right. For example, the specification

A -> {B C}

is equivalent to

A -> B
    A -> C

In the second role, a subgraph can provide a context for setting attributes. For example, a subgraph could specify that blue is the default color for all nodes defined in it. In the context of graph drawing, a more interesting example is

subgraph {
        rank = same; A; B; C;
    }

This anonymous subgraph specifies that the nodes A, B and C should all be placed on the same rank.

The third role for subgraphs directly involves how the graph will be laid out by certain layout types. If the name of the subgraph begins with cluster, Graphviz notes the subgraph as a special cluster subgraph. If supported, the layout will make it such that the nodes belonging to the cluster are drawn together, with the entire drawing of the cluster contained within a bounding rectangle.

Graphviz attributes allow you to style your Graphviz graph. Combinations of attributes for nodes, edges, clusters, and for the entire graph provide for highly-customized layouts.

All Graphviz attributes are specified by name-value pairs. Thus, to set the fillcolor of a node abc, one would use

abc [fillcolor = red]

Edge attributes are set the same way as node attributes. For example, to set the arrowhead style of an edge abc -> def, one would use

abc -> def [arrowhead = diamond]

By default, Graphviz can use colors provided as hexadecimal values, or, as X11 color names. The following provides the entire list of X11 color names. Some colors have additional 4-color palettes based on the named color. Those additional colors can be used by appending the digits 1-4 to the color name. Gray (or grey) has variations from 0-100. Please note that, in all color names, 'gray' is interchangeable with 'grey'

There's no shortage of shapes available for nodes. Nodes can be changed from the default ellipse shape by using the shape parameter. This table provides a listing of all the possible node shapes.

Node Appearance	Value for shape
	square
	oval
	diamond
	egg
plaintext	plaintext
	point
	triangle
	house
	invhouse

The shapes of arrows are highly customizable. When defining an edge, the arrowhead parameter allows you change the style of arrowhead from the default normal arrow shape, to one of several others. Here are some of the other arrowhead types that could be used.

Arrow Appearance	Value for arrowhead
	normal
	box
	crow
	curve
	diamond
	dot
	inv
	none
	tee
	vee

Graphviz layouts can be modified radically by rendering the graph with different Graphviz layouts.

By default, the Graphviz function renders graphs with the standard dot layout. However, the neato, twopi, and circo layouts are selectable by setting the graph attribute layout equal to either neato, twopi, or circo in a Graphviz graph statement.

By default, the GraphViz function renders graphs using the standard dot layout. However, the neato, twopi, and circo layouts are selectable by supplying those names in a layout statement.

graph [layout = dot|neato|twopi|circo]

The dot layout flows the directed graph in the direction of rank (i.e., downstream nodes of the same rank are aligned). By default, the direction is from top to bottom (where the graph attribute rankdir is set to TB). The following examples will use the same Graphviz DOT code, differing only in the choice of layout. Here is the default dot output.

digraph {

graph [layout = dot]

node [shape = circle,
      style = filled,
      color = grey]

node [fillcolor = red]
a

node [fillcolor = green]
b c d

node [fillcolor = orange]

edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}

The neato layout provides spring model layouts. This is a suitable layout if the graph is not too large (less than 100 nodes) and you don't know anything else about it. The neato layout attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling. Have a look at the previous graph, rendered with the neato layout:

digraph g {

graph [layout = neato]

node [shape = circle,
      style = filled,
      color = grey]

node [fillcolor = red]
a

node [fillcolor = green]
b c d

node [fillcolor = orange]

edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}

The twopi layout provides radial layouts. Nodes are placed on concentric circles depending their distance from a given root node. In the following example, that root node is the red one.

digraph {

graph [layout = twopi]

node [shape = circle,
      style = filled,
      color = grey]

node [fillcolor = red]
a

node [fillcolor = green]
b c d

node [fillcolor = orange]

edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}

With circo, a circular layout results. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.

digraph {

graph [layout = circo]

node [shape = circle,
      style = filled,
      color = grey]

node [fillcolor = red]
a

node [fillcolor = green]
b c d

node [fillcolor = orange]

edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}

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

The name of the subgraphs are important, to be visually seperated they must be prefixed with cluster_

digraph { 
	subgraph cluster_0 {
		label="Subgraph A";
		a -> b;
		b -> c;
		c -> d;
	}
	
	subgraph cluster_1 {
		label="Subgraph B";
		a -> f;
		f -> c;
	}
}