Sizes, shapes, lines & colors

modl has 28 reserved words: six sizes, six node shapes, four line styles and twelve colors. They are recognized only in lowercase, and only in their attribute slot.

Sizes

A size scales a node by a fixed factor of the normal node box, 110 × 64 pixels. For edges, size scales only the label. Labels never go below 10px.

Size	Scale	Node box	Node label	Edge label
`tiny`	¼×	27.5 × 16	10px	10px	try it
`small`	½×	55 × 32	10px	10px	try it
`normal`	1×	110 × 64	13px	12px	try it
`big`	2×	220 × 128	26px	24px	try it
`bigger`	4×	440 × 256	52px	48px	try it
`huge`	8×	880 × 512	104px	96px	try it

tiny through big

tiny   tiny square teal
small  small square teal
normal normal square teal
big    big square teal

Open in editor

bigger and huge need room (zoom out with −)

bigger bigger circle orange
huge   huge circle red
bigger -> huge bold

Open in editor

For an image node, a size means "fit the picture inside this box". Without a size, the image is shown at its natural size.

Node shapes

Shape	Drawn as
`circle`	a circle (the default)	try it
`square`	a rounded rectangle, wider than tall	try it
`diamond`	a rhombus filling the node box	try it
`triangle`	a triangle pointing up	try it
`hex`	a hexagon with flat top and bottom	try it
`none`	no outline: just the label, in the node's color	try it

All six shapes

circle   big circle blue
square   big square blue
diamond  big diamond blue
triangle big triangle blue
hex      big hex blue
none     big none blue

Open in editor

Edges stop at the outline of the shape they point to. A none node has no outline, so arrows run almost to the middle of its label. That makes none best for free-floating captions and titles:

Captions with none

title big none white System overview
note  small none gray (b is optional)
a square blue Required
b square purple Optional
a -> b dashed

Open in editor

Line styles

Style	Drawn as
`solid`	a continuous 2.2px line (the default)	try it
`dashed`	long dashes	try it
`dotted`	round dots	try it
`bold`	a thicker, 3.5px solid line	try it

Line styles in a diagram

app -> db bold blue writes
app -> cache dashed teal reads
cache -> db dotted gray refill
app -> log dashed orange async

Open in editor

Colors

The same twelve colors work for nodes, edges and the background. On a node, the color tints a translucent fill and draws the outline. On an edge, it colors the line and arrowhead. As a background, it is used solid.

Color	Value
`gray`	#9aa4b2 (default)	node & edge	background
`black`	#1f2937	node & edge	background
`white`	#f8fafc	node & edge	background
`red`	#ef4444	node & edge	background
`orange`	#f97316	node & edge	background
`yellow`	#eab308	node & edge	background
`green`	#22c55e	node & edge	background
`teal`	#14b8a6	node & edge	background
`blue`	#3b82f6	node & edge	background
`purple`	#a855f7	node & edge	background
`pink`	#ec4899	node & edge	background
`brown`	#92400e	node & edge	background

The whole palette

gray   square gray
black  square black
white  square white
red    square red
orange square orange
yellow square yellow
green  square green
teal   square teal
blue   square blue
purple square purple
pink   square pink
brown  square brown
gray -> black -> white -> red gray
orange -> yellow -> green -> teal gray
blue -> purple -> pink -> brown gray

Open in editor

The palette nodes need a shape (or any attribute) because a line holding only a color name sets the background.

Label color and backgrounds

A node's label color is chosen from the node's color alone. white, yellow and green nodes get dark labels, and the other nine colors get light labels. The background isn't taken into account, and node fills are mostly transparent, so:

On the default dark backdrop, or a black or other dark background, labels on white, yellow and green nodes are hard to read. Use the other colors for nodes with labels.
On a white or other light background, it's the reverse: white, yellow and green nodes read best.
Edge labels are always light text with a dark outline, so they read on any background.
none nodes draw their label in the node's color, so pick a color that contrasts with the background.

Dark background: avoid white, yellow, green

black
a square blue Readable
b square purple Readable
c square yellow Hard to read
d square green Hard to read
a -> b
c -> d

Open in editor

Light background: prefer white, yellow, green

white
a square yellow Readable
b square green Readable
c square blue Hard to read
d square purple Hard to read
a -> b black
c -> d black

Open in editor