This page is a live smoke test for the
ethantroy.dev Mermaid → tldraw diagram pipeline. It verifies that generated SVGs render through Hugo shortcodes, stay readable in light and dark mode, and respect display sizing controls.The diagrams below are authored as Hugo shortcode blocks, rendered before the Hugo build, committed under static/diagrams/, and embedded with <object> so tldraw SVG text renders correctly.
Default centered diagram#
Small constrained diagram#
This one uses size="xs" so desktop layouts do not get overwhelmed by simple diagrams.
Explicit width diagram#
This one uses width="28rem" to check custom display sizing without changing the intrinsic SVG geometry.
Left-aligned process diagram#
This checks alignment metadata and a slightly wider flow.
Wider architecture diagram#
This one intentionally uses more nodes to catch wrapping, borders, and theme contrast issues.
If the page looks right, the pipeline is doing what we need: author diagrams in Markdown, keep generated assets deterministic, and let the blog theme choose the matching light or dark SVG at display time.