Styling

Eraser’s diagram-as-code offers basic styling options which can be applied at the diagram-level or the node or group level.

Here’s an overview of all the syntax.

colorMode

Color mode gives you the ability to control the lightness of the fill colors

• pastel: Generally lighter fill (default)
• bold: Generally darker fill
• outline: Transparent fill

Here are examples of colorMode being applied across diagram types.

Here are syntax examples of colorMode being applied at the diagram level and at the node level:

// diagram level application
colorMode bold

// node level application
Server [color: green, colorMode: bold]

styleMode

Style mode gives you the ability to apply embellishments.

• shadow: Apply a shadow behind nodes and groups (default)
• plain: No shadows or watercolor
• watercolor: Apply a watercolor look to nodes and groups

Here are examples of styleMode being applied.

Here are syntax examples of styleMode being applied at the diagram level and at the node level:

// diagram level application
styleMode plain

// node level application
Server [color: green, styleMode: plain]

typeface

Typeface gives you the ability to apply different typeface styles for text.

• rough: A handwriting font
• clean: A clean sans serif font
• mono: A monospaced font

Here are examples of typeface being applied.

Here are syntax examples of typeface being applied at the diagram level and at the node level:

// diagram level application
typeface clean

// node level application
Server [color: green, typeface: clean]

textSize

Text size sets the size of labels.

• small: The default size
• medium: Larger labels
• large: The largest labels

Here are syntax examples of textSize being applied at the diagram level and at the node level:

// diagram level application
textSize medium

// node level application
Server [textSize: large]

wrap

Wrap sets whether labels wrap to fit. With wrap off, labels break only at \n. It applies to cloud architecture diagrams and flow charts.

// diagram level application
wrap off

// node level application
web-01 [icon: aws-ec2, label: "web-01\n10.0.12.34", wrap: off]

The diagram-level line applies to everything defined after it.

connectorStyle

Connector style sets the path of a connection’s line. It applies to cloud architecture diagrams and flow charts only.

• elbow: Right-angled lines (default)
• straight: Straight lines
• arc: Curved lines

Here are syntax examples of connectorStyle being applied at the diagram level and at the connection level:

// diagram level application
connectorStyle straight

// connection level application
A > B: [connectorStyle: arc]

The diagram-level line applies to every connection defined after it, so put it at the top. On a connection, the : before the [ ] is required.

You can also pick it from Connector style in the property bar, with the diagram or some of its connections selected.

Some connections are always drawn as elbows: a node connected to itself, a node connected to a group it sits in, and several connections between the same two nodes.