Skip to main content

​
The Problem

Traceo’s diagram gallery showed thumbnails that cropped diagrams — only the top-left corner was visible. A CSS scale hack (scale-75 with 133% oversized container) attempted to shrink the diagram but still clipped at the overflow-hidden boundary.

​
The Root Cause

Mermaid’s render() function produces SVGs with hardcoded pixel dimensions (e.g., width="850" height="480"). When placed in a 160px card, the SVG renders at full size and overflows. CSS transforms (scale) reduce the visual size but don’t change the element’s layout dimensions, so overflow-hidden still clips.

​
The Fix

Post-process the SVG string before injection: extract the original width/height, construct a viewBox, then replace dimensions with width="100%" height="100%" preserveAspectRatio="xMidYMid meet". This makes the SVG scale responsively to any container without clipping. Implemented as a fitContainer prop on MermaidRenderer, toggled only for gallery thumbnails.

​
The Takeaway

When embedding generated SVGs in constrained containers, CSS alone is insufficient. The SVG element itself needs viewBox + percentage dimensions + preserveAspectRatio. Regex surgery on the SVG string is the pragmatic approach when working with dangerouslySetInnerHTML — avoids DOM parsing overhead for a single attribute rewrite.