05 / 11
Scale one diagram everywhere
Let the SVG viewBox preserve geometry while the host chooses its display size.
01 / Sizing
Let the viewBox do the scaling
Do not recalculate diagram coordinates in the browser. Schemd emits a stable viewBox, so the host only needs to control width.
css
.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 background. Hollow UML markers and connector-label halos use it to cover the wire beneath them.
Keep the aspect ratio reserved while content loads to avoid layout shift. If a dense diagram becomes unreadable on a phone, offer horizontal scrolling or a larger view instead of shrinking labels indefinitely.