Mermaid support is broken (by mermaid and svgcheck)

[hoehrmann]

(Leaving this here, it might help other users:)

The current version of svgcheck has a rather odd bug where it attempts to read from a "stdin" file in the current directory when called without arguments. I made a little change to run.py to get it to work at all:

    if len(args) < 1:
        source = "/dev/stdin" # os.getcwd() + "/stdin"

Using the current version of mermaid, my simple flow chart is translated by mmdc into an ... interesting SVG file that makes use of CSS variables and possibly other advanced and anachronistic features.

This comment mermaid-js/mermaid#2102 (comment) suggested running the mmdc output through rsvg-convert -f svg -o in.svg out.svg. That worked nicely, except that all node labels are lost because they are encoded like this:

            <foreignObject style="width: 47.1719px; height: 51px;" height="51" width="47.171875">
              <div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; max-width: 200px;">
                <span class="nodeLabel markdown-node-label">
                  <p>start A</p>
                </span>
              </div>
            </foreignObject>

And SVG implementations usually do not implement a HTML+CSS rendering engine on the side.

I pioneered HTML+CSS to vector graphic conversion adding EMF output support to https://iecapt.sf.net/ over 20 years ago, and a couple of years later added SVG output support to its companion https://cutycapt.sf.net/ and lo and behold, cutycapt --url=file:///home/bjoern/.../in.svg --out=out.svg also handles the the foreignObjects (turning the text into paths). Then svgcheck does not like the colours and I get black text on black background.

Adding this to the mermaid code helps:

%%{init: {'theme':'neutral', 'themeCSS': '* { background-color: white !important; }'}}%%

With this setting, the pipeline mmdc | cutycapt | svgcheck -r produces a legible result.

[cabo]

Hi Björn,

thank you very much!

The current version of svgcheck has a rather odd bug where it attempts to read from a "stdin" file in the current directory when called without arguments. I made a little change to run.py to get it to work at all:

    if len(args) < 1:
        source = "/dev/stdin" # os.getcwd() + "/stdin"

Is that used for anything except error messages?

You may want to create an issue (or a PR) at:
https://github.com/ietf-tools/svgcheck/

Using the current version of mermaid, my simple flow chart is translated by mmdc into an ... interesting SVG file that makes use of CSS variables and possibly other advanced and anachronistic features.

Yes. I always wondered wether it is worth to implement a more powerful SVG processor inside kramdown-rfc given that

• We all agree that 7996 is not here to stay
• the colors problem is hard to address without knowing a way forward.

Adding this to the mermaid code helps:

%%{init: {'theme':'neutral', 'themeCSS': '* { background-color: white !important; }'}}%%

With this setting, the pipeline mmdc | cutycapt | svgcheck -r produces a legible result.

Wow. I'll need to find an easy way to install cutycapt (I don't find it in homebrew).

[cabo]

So how do you actually build cutycapt?
I don't know what a .pro file is.

Would it make sense to port the source from sourceforge to github?

[hoehrmann]

I put the code here https://github.com/hoehrmann/CutyCapt but as you can see I haven't touched the code in 11 years...

Back in the day qmake ; make was all that was needed to build it. I imagine much has changed in Qt and its WebKit integration since then, I do not know what might be needed to build it nowadays.

But it used to be included in most Linux distributions, I used the Debian package.