about ×

HalfViz is a graph visualization environment with a not-coincidental similarity to AT&T’s Nevermind-era, C-language classic GraphViz.

It takes one of the central good ideas of GraphViz – the .dot graph description language – and scales things back in the name of simplicity of implementation and brevity of syntax. Remember, worse is better these days.

The result is the halftone language; a dot-inspired, mostly-declarative format for describing graph relationships and styling the resulting nodes and edges.

the halftone language×


In the editor to the right you can describe your graph symbolically. As you type, the visualization will update to reflect the nodes and connections you have defined.


Your code is read line-by-line and matched for patterns of the form:

name1 -> name2

The names can be single or multiple words and can include digits, punctuation, or space characters. Avoid using curly braces {} since those characters are used in styling the graph.

lone nodes

If you want to create a node without connecting it to any of the others, simply list it on a line by itself:



The semicolon acts as a comment character; anything to the right of it on a line will be ignored.

a simple example

; ostracism in achewood, ca
roast beef -> ray
ray -> téodor
téodor -> roast beef
pat ; pat is all alone

By default all nodes are displayed as grey boxes with the node name as the text label. You can change this for individual nodes by using this dictionary-like notation:

mynode {color:red, label:a simple red box}


The node’s color can be set to any value that is a valid CSS color. For example, all the lines below are equivalent:

rednode1 {color:red}
rednode2 {color:#f00}
rednode3 {color:#ff0000}

Setting the color to the special value none will draw the node’s label in black on a white background:

textnode {color:none, label:just some text}


The node’s displayed text label can be changed to any string that doesn’t use the {} characters. It can also be set to nothing at all:

longwinded {label:a verbose name}
empty {label:} ; don’t label this node

Note that labels can be multiple words and don't need to be surrounded with quotation marks.


A node’s shape can be either dot or box (the default). In both cases the size of the shape will be determined by the length of the node’s label text.

small dot {shape:dot, label:}
very very large dot {shape:dot}
rounded rectangle {shape:box}

Edges can be either directed (and drawn with an arrow) or un-directed (and drawn with an unadorned line). This is controlled by the characters you enter for the edge:

a -> b ; drawn with an arrow
c -- d ; drawn with a line

As with nodes, edges can be styled by appending an options {} block to the edge definition:

src -> dst {color:plum, weight:2}

If no style options are specified, the edge will be drawn in grey with a line weight of 1px.


The color property can be set to the same variety of formats demonstrated in the Nodes section.

line weights

The weight property can be set to a number controlling the width of the line in pixels.

If you wish to use the same formatting for a number of nodes or edges, you can save some typing by modifying the default style properties which apply to graph elements that aren’t explicitly styled.

node styles

The default node style can be set by entering an options block on a line by itself:


This will apply to any nodes defined on subsequent lines that do not set a color for themselves.

The defaults can be changed multiple times. For example, to create two red nodes and two blue ones, try:

a ; will both be red
b ;
c ; will both be blue
d ;

The default node styles will also apply to nodes created in edge definitions that are not explicitly styled elsewhere in the code.

edge styles

Setting the default edge style is similar, but the options block must follow a lone arrow:

-> {color:cyan, weight:6}

Unstyled edges defined on subsequent lines will inherit the specified properties.


back about halfviz