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. graphs 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: name3 comments 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} colors 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} labels 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. shapes 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. colors 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.