Scale one diagram everywhere

01 / SizingLet the viewBox do the scaling

Resist the urge to recompute coordinates in the browser — laying out is the browser's job, drawing is the compiler's. Schemd emits a stable viewBox, which leaves the host in charge of exactly one thing: width.

.schemd-host {
	--schematic-surface: var(--page-surface, Canvas);
	container-type: inline-size;
}

.schemd-host svg {
	display: block;
	width: 100%;
	height: auto;
}

@container (max-width: 32rem) {
	.schemd-host {
		padding: 0.5rem;
	}
}

Set --schematic-surface to the host's own background; hollow UML markers and connector-label halos paint with it to cover the wire running beneath them. Reserve the aspect ratio while content loads and layout shift never gets a chance to begin.

And when a dense diagram simply will not fit a phone, be honest about it: offer horizontal scrolling or a larger view, rather than shrinking labels toward illegibility.

port:BUS "Sensor bus" at (70, 180) #blue
ic:U1 "Signal processor" at (330, 180) #cyan [left="CLK,DATA,ENABLE" right="FILTERED,FAULT"]
qgate:Q1 "Phase estimator" at (610, 120) #purple [parameter="\theta/2"]
port:OUT "Telemetry" at (875, 180) #emerald

BUS.out -> U1.DATA #blue [ortho]
U1.FILTERED -> Q1.in #purple [bezier]
Q1.out -> OUT.in #emerald [bezier marker-end=arrow]
U1.FAULT -> OUT.in #amber [ortho marker-end=dot]