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 colorMode 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 san 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]