mermaid-cli
mermaid-cli copied to clipboard
mermaid-js
Feature/css styling svg
:bookmark_tabs: Summary
Added requested tests to be able to get the code from the dormant PR https://github.com/mermaid-js/mermaid-cli/pull/60 into master
Resolves #55
:straight_ruler: Design Decisions
Describe the way your implementation works or what design decisions you made if applicable.
I changed run-tests.sh so that it will use CSS files if found with same name as the input .mdd file.
I tried to get a conversion (SVG->PNG) as requested to work, but failed miserably. Tried both using ImageMagick, and latest Inkscape. Installed both locally and in the docker generated from DockerfileBuild. It seems to be some issues converting from Mermaid SVGs to PNG in these tools. However I think that might be a bit out of scope to troubleshoot? I've validated that the generated SVG looks sane (flowchart4.mmd) in Chrome. (It picks up the CSS)
I've also tried using the rsvg-convert to no avail, it fails to parse the included stylesheet from mermaid: (I.e. not the one introduced by -C option)
CSS parsing error
CSS parsing error
CSS unrecoverable error
parsing error: 1:2177:could not recognize next production
parsing error: 1:2206:while parsing rulset: current char must be a '}'
parsing error: 1:2205:while parsing declaration: next property is malformed
Which seems to originate from this style:
--mermaid-font-family: "trebuchet ms ",verdana,arial,sans-serif;
If I remove that, rsvg-convert converts without warning, but with a unsatisfying result. (Black filled shapes)
(SVG still looks good in Chrome though)
@niclas-g @joelburton thank you for your contribution! I will look into the case now. :)
@niclas-g : can you please integrate the latest changes from master and ping me? The svg-to-png convertion should be supported by https://github.com/mermaid-js/mermaid-cli/blob/b7d0a8465acd4fe617c63293f882ae480df24954/.github/workflows/compile-mermaid.yml#L42 If the quality of the conversion is not good, we will have to live with it. I need the svg files to be converted to png, because png is the supported file format by Percy framework.
@niclas-g & @joelburton : will try to take over this issue and prepare a production ready PR. I will include both of you as co-authors to give the credit you both deserve. Unfortunately, I think it is wasteful to have the 2 PRs in the current state any longer. Please, coordinate with me, if you would like to continue working on the issue.