width / height options do not alter the size of the generated PNG about mermaid.cli

[agusmba]

@Lucas-C The new version should allow you to use a custom css file where you could set your max-width workaround.

[IAXES]

I just had to create the cssFile @matthew-piziak mentions above, then I could create my scaled output via the latest docker image (npm seems to be pulling an outdated version for some reason), via:

docker run -v $(pwd):/work \
    minlag/mermaid-cli:latest \
    -i "/work/mermaid.mmd" \
    --scale 4 \
    -o "/work/out.png" \
    -b transparent \
    --cssFile "/work/cssfile"

The only downside is that this seems to create a lot of excess horizontal border area around the image, so I just copy-paste it into something like GIMP and "crop to content". Not sure if there's a trivial way to automate this via imagemagick or some other CLI tool. Could likely (not 100% sure) achieve this via convert input.png -flatten -fuzz 1% -trim +repage output.png.

[matthew-piziak]

Okay, I figured it out.

Pass this to --cssFile:

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

…and this to --configFile…

{
  "flowchart": {
      "useMaxWidth": true
  }
}

…and finally --scale to your desired scale.

[matthew-piziak]

This does not work on version 0.5.1. Passing a mermaid.json to -c with {"flowchart": { "useMaxWidth": true}} still produces an image of width 130 despite passing -w 800.

Custom CSS does not work for SVGs, so one can't even render to SVG and then scale up with a different program without giving up the ability to specify, e.g. custom fonts.

[ilyakooo0]

@matthew-piziak Could you elaborate what you meant by --scale? mmdc doesn't seem to have a --scale option.

EDIT: I was using an older version of mmdc.

[tylerlong]

widget and height are actually web page size instead of the generated image size. For example: -w 800 -H 600 means: generate the image in a 800*600 browser window.

The cli is just a thin wrapper around the mermaid library. I guess in a real browser, you cannot change the image size either.

You can look at the code of the CLI, fewer than 100 LoC. Please share your opinions and suggestions.

[Lucas-C]

I sent a PR that fixes the scaling
I still have a strange rendering bug, I'm going to open another issue for it

[tylerlong]

Please read the comments here: #4 (comment)

Overall this should be a mermaid issue. Mermaid doesn't allow user to manually set a width for the charts. It figures out the width according to page width and it also doesn't always take 100% of the page width.

Feel free to create an issue for the mermaid project.

[Lucas-C]

Thanks for your investigations !

Have you considered the flowchart.useMaxWidth configuration entry ? cf. https://mermaidjs.github.io/mermaidAPI.html

This may be a solution, configurable from the CLI as a flag

[agusmba]

Hi @tylerlong

It would be nice to have a way of increasing the resolution of pngs.
A working width/height options could do the trick.
Right now mermaid pngs cannot be used in documents due to their low resolution.

@Lucas-C 's fix seems to allow for better resolution sequence and flowchart graphs, but the default gantt diagram doesn't look right either at 1000 nor 2000 width.

Thank you both!

[agusmba]

@Lucas-C I will make a PR shortly allowing mermaid configuration, so you could try flowchart.useMaxWidth

Unfortunately this is not available for sequence diagrams. In the meantime I was thinking about solving on the cli by inserting @Lucas-C fix only in the case of png, or looking at a different rendering option like using https://github.com/exupero/saveSvgAsPng

[matthew-piziak]

Reconfirmed the above on mmdc version 8.4.8.

[connorjs]

Note: Simply using -trim worked for me. (Thanks for the tip!)

convert input.png -trim output.png