Nodes

A node line declares a node, or updates one, by its id:

id  [size] [shape] [color] [url] [text…]

Everything after the id is optional. Attributes that are present must appear in this order; the Attributes page explains how each word is recognized.

plain
sized big
shaped hex
colored red
linked /example.com
labeled This is the label
everything big hex red /example.com This is the label

Ids

The id is the first word on the line. It names the node, and edges refer to nodes by id. An unquoted id may contain only ASCII letters, digits, underscore _, colon : and hyphen -. A quoted id may contain anything, including spaces, but can't be empty.

web-server  square blue
db_1        square purple
ns:item     square teal
42          square orange
web-server -> db_1 -> ns:item -> 42

Ids are case-sensitive: Api and api are two different nodes. Quoting doesn't change an id, so "api" and api are the same node. A line whose first word isn't a valid id is reported as invalid node id and skipped. Quote the id, or use the label text, to show anything a plain id can't hold:

"example.com" /example.com
"v1.2"  hex (stable)
cafe    circle brown Café ☕
"example.com" -> "v1.2" -> cafe

Defaults

A node that doesn't specify an attribute gets the default:

lonely

lonely normal circle gray

Labels

A node shows its text if it has any, and its id otherwise. Labels are centered on the node, and the font scales with the node's size. Labels longer than 22 characters are cut to 21 characters plus …. Hover over the node to see the full text, its id, and its link.

a
b square Short label
c square This label is much too long to fit in the node
d big square Bigger node, bigger text

Label text runs to the end of the line, or to a comment. It can contain any characters, including Unicode, except that outside quotes whitespace followed by # starts a comment and -> makes the line an edge line. Quote the label, or just the part with those characters, to use them:

a square "Input -> Output"
b square Fix issue "#42"

white, yellow and green nodes get dark label text, and all other colors get light text. On the default dark backdrop, labels on those three colors are hard to read, and on a light background the reverse is true (see label color). A node with shape none draws only its label, in the node's color.

Implicit nodes

Any id used in an edge becomes a node with default attributes, so a diagram can consist of edges alone. Add a node line, before or after the edge, to style a node.

a -> b -> c -> a
b big square red Styled later

Redefining nodes

A node can appear on several node lines. Each line updates only the attributes it gives, and later lines win. In particular, text is replaced only when a line provides new text, so repeating a bare id never erases a label.

n square Original label
n red                       # adds a color, keeps shape and label
n big                       # adds a size
n hex New label             # replaces shape and label

An empty quoted string clears the text, so the id is shown as the label again. Other attributes can't be removed once given, other than by deleting the line. You can set them back explicitly instead, for example with normal, circle or gray.

n big square red Label
n normal circle gray ""     # back to the defaults, labeled n

Reserved words as ids

Because the id always comes first, a reserved word can be an id: circle square is a square node named circle. The exception is a line holding only a color name. That line sets the background, so a node named after a color must be quoted, have at least one attribute, or be created by an edge.

circle square A node called circle
big    triangle A node called big
red    red                    # a node called red (a bare red line would set the background)
"blue"                        # a node called blue
red -> big -> circle -> blue

Placement

The language says nothing about where nodes go. Nodes without a saved position are spread around a circle in the middle of the canvas, in id order. Drag a node to place it, and its position is stored in the URL. Renaming a node's id makes it a new node, so it loses its position. See Sharing & positions.

n1 -> n2 -> n3 -> n4 -> n5 -> n6 -> n7 -> n8 -> n1