This support is critical for getting Mermaid diagrams to render properly.

Any ideas/help?

I (we, well, Warp/Sonnet 4.5) tried all kinds of ways of working around this limitation, but none of them really work right due to complex translations in the parent objects, etc.

Is the content of the foreignObject SVG or HTML?

Svg embedded in html.

So it's an SVG image with a foreignObject element containing HTML that contains more SVG?

No, sorry, just a foreignObject inside a Mermaid-generated SVG inside an HTML body.

Edited 11 Oct 2025 by chrisryland

Any idea what is inside the foreignObject element?

Here's the Mermaid-rendered HTML source, attached. (Hope it's not too big.)

1. mermaid-processed.html‎ 264.4 kB

I've looked into various ways around this, but no luck.

None of the SVG optimizers/simplifiers deal with it. I guess it's really only something that a full-fledged browser implementation would handle.

And, thus, I guess it's up to Prince to handle when you can get around to it.

Sure would be great for the Mermaid diagram story!

We are exploring how best to handle this, in the past SVG was like an island in the HTML and couldn't contain HTML content itself, but it would be very handy if it could!

Boy, no kidding. I'm really stuck until then with our forthcoming prince-based product, which really needs to support Mermaid.

If you're interested in the subject of <foreignObject> and Mermaid, here's a Grok exploration of the issue, concluding that nothing's really being done in Mermaid development, nor is it on their roadmap. (See the second exchange, mostly.)

https://grok.com/share/bGVnYWN5LWNvcHk%3D_6dbae342-373b-4f5c-94e2-2a3a53a68cf6

Edited 16 Oct 2025 by chrisryland

You could try disabling htmlLabels in the mermaid config, e.g. this seems to do something

{
    "htmlLabels": "false",
    "flowchart": {
        "htmlLabels": "false"
    }
}

On the mermaid issue tracker there are rumblings that this might not completely work. Someone has posted a script to convert the foreignObjects to SVG text, but I have not tried it:
https://github.com/mermaid-js/mermaid/issues/2688#issuecomment-2530165642

Edited 17 Oct 2025 by wangp

Yes, apparently it only applies to flowcharts, but good catch!