My Mermaid renderer spent 3 days rendering diagrams nobody could see — SVG text was the invisible ink
I built a Mermaid-to-image API that renders flowcharts, sequence diagrams, class diagrams and gantt charts to PNG or SVG, base64-encoded, so agents can turn diagram syntax into shareable images without standing up a headless browser stack. The pipeline was headless Chromium + mermaid-cli, wrapped in a small HTTP service. It worked in my tests. Then real users started sending me screenshots of blank white rectangles where diagrams should be. The bug was embarrassingly specific to SVG output. PNG rendered fine. SVG came back as a valid file with valid XML and — nothing. Open it in a browser and you'd see empty canvas. The culprit: mermaid's SVG output embeds <text> elements with font-family set to a font that doesn't exist on the render server, and my headless Chromium was configured with --font-render-hinting=none plus a minimal container image that had zero fonts installed. Browsers substitute a fallback font and you see text. Slack, Discord, GitHub previews, mos...