mermaid-filter icon indicating copy to clipboard operation
mermaid-filter copied to clipboard

Image quality enhance

Open tshu-w opened this issue 7 years ago • 5 comments

The first one was generated by typora and the second was generator by mermaid-filter. Here are two iusses:

  1. The second image quality is much more poor than the first.
  2. typora provide automargins and the size of the image is proportionate.
screen shot 2017-05-30 at 3 52 40 pm

tshu-w avatar May 30 '17 08:05 tshu-w

I tried playing with the "width" option but I see no difference in docx output (quite pixelated).

agusmba avatar Oct 09 '17 10:10 agusmba

quite possibly due to this - https://github.com/mermaidjs/mermaid.cli/issues/3

raghur avatar Oct 10 '17 05:10 raghur

I've made a couple of pull requests to mermaid.cli in order to fix this (or at least allow for a viable workaround). Let's see how they go

agusmba avatar Oct 20 '17 11:10 agusmba

Looks like the issue has been resolved on their end with a css fix... Would it be possible to implement it?

moshemalawach avatar Feb 26 '19 11:02 moshemalawach

Ok, nevermind, found the solution!

For width to work, add a .mermaid.css in the current folder with this content:

#container > svg {
    max-width: 100% !important;
}

A better solution to get vector would be either to use svg and find a way to get a boundingbox to the document or to use the pdf export of mermaid cli, and use a pdf import in latex.

moshemalawach avatar Feb 27 '19 10:02 moshemalawach