MermaidJS: Suppress using HTML tags in SVG documents

MermaidJS, by default, uses tags that only render inside of web browsers (foreignObject and div). A number of issues have been logged against MermaidJS to address this problem:

• https://github.com/mermaid-js/mermaid-cli/issues/103
• https://github.com/mermaid-js/mermaid/issues/2102
• https://github.com/mermaid-js/mermaid/issues/2485
• https://github.com/mermaid-js/mermaid/issues/2688

Issue 2688 recommends:

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

What would be involved in revising Kroki to configure MermaidJS to avoid using HTML tags for all diagrams so as to generate more conformant SVG documents?

KeenWrite invokes Kroki using an HTTP GET request, so ideally the server could be configured to set htmlLabels to false, which would then allow KeenWrite to display the SVG files without modification:

https://github.com/DaveJarvis/keenwrite/blob/6fa925d27bbec807fc4419454aa81941524f889f/src/main/java/com/keenwrite/preview/DiagramUrlGenerator.java#L26

Alternatively, it looks like Kroki supports HTTP GET URL parameters for setting options:

https://docs.kroki.io/kroki/setup/usage/#_options

See also:

• https://github.com/yuzutech/kroki/issues/1326

[Mogztter]

I was referring to the “internal” requests between Kroki containers. We will still support all the options when sending a request to the gateway server.

[Mogztter]

Kroki supports diagram options: https://docs.kroki.io/kroki/setup/usage/#_options

Currently, the gateway server calls the mermaid companion container with the diagram options but the mermaid service does not use them.

We are using the following default Mermaid configuration: https://github.com/yuzutech/kroki/blob/main/mermaid/src/task.js

So what we need to do is:

1. establish a naming convention for Mermaid configuration (since they are using nested name)
2. establish a convention to infer the type of the value (array, boolean, number…)
3. get the diagram options from the query parameters in: https://github.com/yuzutech/kroki/blob/main/mermaid/src/index.js#L12
4. merge the configuration with the default configuration: https://github.com/yuzutech/kroki/blob/main/mermaid/src/task.js

As a workaround, I think you can use a directive:

%%{ init: { "flowchart": { "htmlLabels": false } }%%

https://mermaid-js.github.io/mermaid/#/./directives?id=declaring-directives

As a side note, I’m leaning toward HTTP headers (rather than query parameters) to send diagram options to a companion container:

https://github.com/yuzutech/kroki/blob/f953fcf117053ea00c47d45caec5bb3b5ad897d4/server/src/main/java/io/kroki/server/action/Delegator.java#L33-L37