Topic on Project:Support desk

I have this Mermaid chart

flowchart TD
    A[X]
    A --> B[Y]
    A & B --> C[Z]

Exporting it to SVG in https://mermaid.live/ gives me a SVG file which contains HTML embedded all along this file and given it has HTML, I can't upload it to the MediaWiki website image library.

How to present Mermaid charts in MediaWiki?

Category:Diagram extensions point to either Extension:Diagrams and/or Extension:Mermaid. Not sure which of the two is more reliable / better maintained.

You might also scrub the foreignObjects using Scour (also built into Inkscape as the 'export optimized SVG' option) and then upload to Commons.

@TheDJ practically speaking I can't install extensions on this website because it's not my website and most of the managing team is unavailable at the moment due to war so in the next year or so it's unlikely that any extension would be installed.

About Scour

I have found this definition for what foreignObject is:

The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.

I guess my problem then is that my SVG's foreignObject contains HTML.

I use Windows 11 and never worked with Python before either in Windows or Linux so it seems to me that I would have to install Python and then use its CLI from CMD to manipulate the file, but would it really help? Here is why I doubt it; a senior programmer wrote me this:

The exported SVG appears to use embedded HTML for the chart labels. Removing it would remove your labels. If all you want to do is upload the image to a site, it’d probably be easier to just use the PNG export. If you want to keep using SVG, you’d have to convert the labels to svg text tags.

I have actually already tried exporting to PNG but since the chart is very very big, when zooming in into a PNG display, the entire chart appears pixelated or smeared.

What can be done in that case?

@Arlo Barnes

Well, I'd still say that Inkscape for Windows is the GUI solution you want. Then with the text tool you can add, or with Control-Shift-X remove, the relevant parts of the SVG file. Even a text editor with find-and-replace is better than nothing at editing SVG and getting MediaWiki to accept it. And while there's nothing wrong with PNG, it's less ideal for this type of generated graphics, as you found out.

@Arlo Barnes when I open such a file with Inkspace I get this unclear input:

a — Postimages (postimg.cc)

So, personally I misunderstand how Inkspace could help me out here.

Any suggestion is most welcome.

Also note the " + RESET - " button in the SVG in Inkspace.