My Mermaid renderer taught me that headless Chrome is a 300MB tax on every deploy

In a recent discovery, a developer learned a valuable lesson about the true cost of using headless Chrome for rendering diagrams in an agent pipeline. The developer initially used Puppeteer to spin up headless Chrome, render the diagram, and screenshot it, following the common tutorial advice. However, this approach had unforeseen consequences.

Deploying a new container resulted in a 300MB increase in size due to the browser and its dependencies. This led to significant slowdowns in cold starts, taking several seconds instead of milliseconds. Moreover, memory usage spiked, causing workers to be OOM-killed mid-render. The developer was effectively paying a hidden "browser tax" on every deployment solely to convert text into a PNG image.

Recognizing the inefficiency, the developer redesigned the system. Instead of relying on a general-purpose tool like headless Chrome, they created a single-purpose endpoint that accepts Mermaid syntax and returns a base64 PNG or SVG. This streamlined approach eliminated the need for a local render stack to be installed, resulting in faster cold starts and stable memory usage.

The developer shared their findings by packaging the solution as https://x402.freeq.one/tools/mermaid.html. By measuring the actual costs of using headless Chrome per deployment, the developer discovered that in this particular case, a simpler solution was not only more efficient but also avoided the unnecessary overhead. The lesson learned emphasizes the importance of carefully evaluating the impact of general-purpose tools before incorporating them into a system, as they may not always be the most cost-effective choice.