Spent Hours Fighting Mermaid SVG → PNG Export (Missing Text Nightmare)

So I've been building this Mermaid diagram tool and hit the most frustrating fucking bug. SVG exports looked perfect, but PNG exports? Just empty boxes. No text. Nothing. Just sad, hollow rectangles where my beautiful diagrams should be.

I was hungry, pissed off, and ready to throw my laptop out the window.

The Problem

When converting Mermaid diagrams from SVG to PNG using Canvas, all the text just vanished. The boxes, arrows, shapes — all fine. But ZERO text. Looked like some abstract art project gone horribly wrong.

Tried everything:

• Inlining computed styles — nothing
• Embedding fonts as base64 data URLs — nothing
• Waiting for document.fonts.ready — nothing
• Cloning DOM elements with styles — nothing
• Every goddamn StackOverflow solution I could find — NOTHING

Asked AI for help? That outdated piece of shit kept giving me the same recycled answers that didn't work. Had to figure this out myself like it's 2010.

The Root Cause

Turns out since Mermaid v9.2, the library defaults to using foreignObject elements with HTML <div> tags to render text labels. Sounds cool, right?

Wrong. So fucking wrong.

Canvas drawImage() cannot render foreignObject content due to browser security restrictions. So when you try to convert the SVG to PNG via canvas, all that text just... disappears into the void.

Hours. HOURS of my life gone because of this bullshit.

The Fix

One line. ONE. FUCKING. LINE.

mermaid.initialize({
  flowchart: {
    htmlLabels: false  // 👈 THIS RIGHT HERE. THIS MOTHERFUCKER.
  },
  sequence: { htmlLabels: false },
  gantt: { htmlLabels: false },
  // ... etc for all diagram types
});
Copy

Setting htmlLabels: false forces Mermaid to use native SVG <text> elements instead of foreignObject + HTML. Canvas can render native SVG text just fine.

Boom. Done. Fixed. I wanted to scream.

Lessons Learned

Read the GitHub issues first. This was a known issue with multiple reports. Could've saved myself hours of suffering. But no, I had to be a stubborn idiot.

foreignObject ≠ Canvas friendly. Browser security restrictions prevent canvas from rendering foreignObject content. Thanks for nothing, browsers.

AI assistants are fucking useless for edge cases. When you hit something that's not in the first page of Google results, you're on your own. Back to reading source code like a caveman.

Sometimes the fix is stupidly simple. Spent hours on complex workarounds when it was just a config flag. ONE. CONFIG. FLAG.

Hope this saves someone else the headache and the hunger-fueled rage. If your Mermaid PNG exports are showing empty boxes, check your htmlLabels setting before you lose your mind like I did.

Now I'm gonna go eat something.

Happy diagramming! 📊✨