Styling and provider icons

Colours

Shapes are coloured from a fixed palette of twelve swatches. Each swatch sets a fill, a border and a text colour together, which is why a diagram built from them stays legible instead of turning into a colour picker accident.

Provider icons

Shapes can carry a logo above their label, which is what turns a box marked “Lambda” into something a reader recognises at a glance. The icon picker covers the major clouds and the common infrastructure and language logos — AWS services, Azure, Google Cloud, Kubernetes, Docker, Terraform, Postgres, Redis, Kafka and several hundred more.

Pick an icon with nothing selected and you get a new shape already labelled with the service's name. Pick one with shapes selected and it is applied to all of them.

Icons are bundled into the app at build time rather than fetched from a CDN, so they render offline and no request leaves the page to draw them.

Lines, fonts and the sketch look

• Line style — solid, dashed or dotted, on both shape borders and connectors. Dashed is the usual convention for something asynchronous or planned.
• Line width and font size are per-shape, so you can weight the important parts of a diagram.
• Bold for a shape's label.
• Canvas background — a concrete colour that is painted into exports.

The whole canvas can also be switched to a sketch look, which wobbles every line as if it were drawn by hand. That is more useful than it sounds: a diagram that looks provisional invites argument, and a crisp one invites agreement it has not earned yet. Draw the first version of a design in sketch, and switch to clean when it is settled.