clean Shapes¶

The clean library provides 21 flat technical-diagramming shapes. Each shape is a D2 class applied with class: <name>. Differentiation is carried by tint (paper for compute, actors, AI, and logic; slate for data; muted + dashed for external systems) and by shape, with the single clay accent reserved for emphasis (clean-primary).

Every diagram below renders in both light and dark to match the documentation theme.

Usage¶

import d2

code = """
client: Client { class: clean-client }
gw: API Gateway { class: clean-gateway }
api: Orders API { class: clean-primary }
db: Postgres { class: clean-database }

client -> gw { class: clean-flow }
gw -> api { class: clean-flow-primary }
api -> db { class: clean-flow }
"""

svg = d2.compile(code, library="clean")

Compute¶

Paper-tinted boxes for services and endpoints. clean-primary carries the clay accent for the emphasized node; clean-gateway is a hexagon and clean-cloud a cloud outline.

Class	Use
`clean-service`	Generic service or component box.
`clean-primary`	Emphasized or primary node, carrying the clay accent.
`clean-api`	API or endpoint.
`clean-gateway`	Gateway or ingress (hexagon).
`clean-function`	Function, lambda, or handler.
`clean-cloud`	Cloud or managed service (cloud shape).

Data¶

Slate-tinted shapes for the data plane. clean-database and clean-storage are cylinders; clean-cache and clean-queue are slate rectangles.

Class	Use
`clean-database`	Relational or primary datastore (cylinder).
`clean-cache`	Cache layer such as Redis or a CDN.
`clean-storage`	Object or blob storage (cylinder).
`clean-queue`	Message queue or stream.

Actors¶

Clients and people. clean-user is a person silhouette; clean-external is a muted, dashed box for third-party systems outside your control.

Class	Use
`clean-client`	Generic client or consumer.
`clean-browser`	Web client.
`clean-mobile`	Mobile client.
`clean-user`	End user (person shape).
`clean-external`	Third-party or external system (muted fill, dashed border).

AI¶

Paper-tinted shapes for model-centric flows. clean-document is a page shape for artifacts and inputs.

Class	Use
`clean-model`	Model or inference endpoint.
`clean-agent`	Agent.
`clean-document`	Document or artifact (page shape).

Logic & Structure¶

Control-flow and grouping shapes. clean-decision is a diamond; clean-group is a transparent container with a hairline boundary for grouping related nodes.

Class	Use
`clean-decision`	Branch or decision point (diamond).
`clean-process`	Process or step.
`clean-group`	Transparent grouping container with a hairline boundary.

Flow Edges¶

Four edge classes set the emphasis of a connection. clean-flow-primary uses the clay accent for the main path; clean-flow-muted and clean-flow-dashed de-emphasize secondary, optional, or asynchronous links.

Class	Use
`clean-flow`	Standard connection.
`clean-flow-primary`	Clay-accented primary path.
`clean-flow-muted`	Low-emphasis or secondary link.
`clean-flow-dashed`	Optional, asynchronous, or external link.

Panels and Typography¶

Use clean-panel for the outer grouped surface and clean-band for a slate-tinted sub-grouping such as a data plane. For text-only labels use clean-title, clean-subtitle, clean-label, clean-section-label, and clean-note.