search

mermaidjs / mermaid.cli

Development has been moved to https://github.com/mermaid-js/mermaid-cli
MIT License
1.09k stars 117 forks source link

Allow for css configuration of mermaid #12

Closed agusmba closed 7 years ago

agusmba commented 7 years ago

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 commented 7 years ago

Fix has been merged.

kellerj commented 7 years ago

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 commented 7 years ago

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: test2000

(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 commented 7 years ago

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 commented 7 years ago

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 https://github.com/knsv/mermaid/issues/587 )

Maybe someone more involved with the development could comment.

tylerlong commented 6 years ago

Please refer to https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785

tylerlong commented 6 years ago

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