sketch-diagrams

Hand-drawn architecture diagrams for Astro. Strokes by rough.js, labels in Excalifont, icons from Lucide and Simple Icons, automatic grid layout, inline SVG at build time. No image files, no client JavaScript.

github.com/juanzete/sketch-diagrams · built for the figures on bitof.dev

Two clouds, no keys

Identity federation in both directions. Nothing in this picture is a file you could leak.

<Diagram title="Keyless trust between two clouds" caption="…"
  nodes={[
    { id: 'ci',  label: 'Build runner',   sub: 'cloud A · builds images', col: 0, row: 0, kind: 'accent', icon: 'hammer' },
    { id: 'sts', label: 'Token exchange', sub: 'cloud B · trusts A',      col: 1, row: 0, icon: 'key-round' },
    { id: 'k8s', label: 'Partner cluster', sub: 'cloud B · pulls images', col: 2, row: 1, kind: 'warm', icon: 'si:kubernetes' },
    // …
  ]}
  edges={[{ from: 'ci', to: 'sts', label: 'signed OIDC token' }, /* … */]} />

Edge site

Compute, storage and inference on the same nodes. The uplink carries events, not video.

Themed with CSS variables

Same component, light theme: override the --sd-* variables on any ancestor.