Allow for css configuration of mermaid

[agusmba]

Right now the css is hardcoded in mermaid.cli.
It would be nice to be able to indicate a local css to take precedence and thus modify the resulting images.

I will try to propose something.

[agusmba]

Fix has been merged.

[kellerj]

This does not seem to be working properly. It does seem that the CSS is getting pulled in somewhere in the process as fonts and spacing changes. But then it is not included in the in-memory HTML page used for rendering, so most of the formatting does not take effect.

[agusmba]

Do you have a simple non-working example?

If I write in the repository:

$ node index.bundle.js -w 2000 -i test/sequence.mmd -o test2000.png -C test/testCSS.css

I get:

(If you don't have Exo 2 installed locally you might see a different font)

Sorry in my testCSS.css I also uncommented the width fix, in order to get a good resolution png.

[kellerj]

I can create one - may take a day or so to get the time. But the problem seems to be in the colors and line styles mainly. I'm not sure why the font items work. (But those were inconsistent between the PNG and SVG output.)

I did put in a new issue with a linked PR (#17) which has the patch that fixed this issue for me. But, depending on how you intended that CSS file to be used. (Mine was a full altered copy of the default mermaid.css file. From my use on the 7.0.x version of the CLI, installing the specified file into the SVG was what was happening.)

[agusmba]

Thanks @kellerj

You are right I was reluctant to touch the internal CSS, because I believed that mermaid's CSS was supposed to go at the html level, and not at the svg level (see the full example at mermaid's page )

Also I thought some configuration parameters (json) could affect the internal CSS. Do they still work if you overwrite the internal CSS?

My only complaint about the internal CSS was that it was preventing my changing the notes font since it seemed to be hardcoded (I opened mermaid-js/mermaid#587 )

Maybe someone more involved with the development could comment.

[tylerlong]

Please refer to #24 (comment)

[tylerlong]

The document of mermaid is quite dated. We need to update it.