CSS option does not properly apply the CSS to the SVG

[kellerj]

In the mermaid setup, the choice of theme pulls one of the CSS files from the mermaid install during the process into the style element of the SVG tag. The existing logic in the CLI pulls the CSS into the style sheet of the surrounding HTML page.

To make the CSS apply, this CSS needs to replace the CSS inside the SVG. I was able to make this work by adding the code below after the window.mermaid.init(undefined, container) call so as to replace CSS embedded in there by mermaid with the desired style sheet.

I don't know the setup well enough to know how brittle this is. But it did work.

    if (myCSS) {
      window.document.getElementById('mermaidChart0').getElementsByTagName('style')[0].innerHTML = myCSS;
    }

[kellerj]

#18 Applies this proposed change

[agusmba]

Thinking again about this, I see the css config as the "recommended" way of adding css (as seen in the mermaid docs.)

That said, the themes in mermaid have some bugs, and overriding them could be a way of fixing them. Maybe your approach could be an additional option on the cli: "-T" = "--customTheme"?

@tylerlong what do you think?

[kellerj]

An additional CLI option works for me. I'll work on making that as the change instead of replacing the internal CSS. (I admit - I'm not sure of the relationship between CSS outside the SVG element and that inside and how they affect each other. Though - it's clear that they do.)

[tylerlong]

I want to fix this issue in the mermaid project. So that there is a mermaid option which allows you to specify a custom theme.

[tylerlong]

Please refer to #24 (comment)