Graphviz PNG Quality

Hi Team, love the platform, I’ve recently been utilising Quickchart for its graphviz capabilities but have come a bit stuck with the quality of the png that is created and wondered whether there was a way to increase the quality. I’m automatically dropping the chart into a document using integromat, the URL that integromat is calling, as an example, is:

Any suggestions would be great, I’ve been playing around with the setting covered here (PNG | Graphviz) but couldn’t make the work.

Thanks!
David

Hey @davidwatters, do you have an example graphviz config that is producing low-quality visuals? I can make suggestions, but may be easiest if I tweaked yours directly.

Almost certainly the best way to ensure quality is to use the SVG format. Does your Integromat use case accept SVGs?

Hi Ian, thanks for the quick response, apologies I did copy in the quickchart graphviz link but think it imported as an image rather than the code see below:

https://quickchart[dot]io/graphviz?format=png&graph=digraph%20g%20%7B%20bgcolor=%22transparent%22%0A%20%20node%20%5Bshape=plain%5D%0A%20%20a%20%5Bfontname=%22Roboto%22%20label=%20%3C%3CTABLE%20border=%220%22%20WIDTH=%221000%22%3E%0A%20%20%3CTR%3E%0A%20%20%20%20%3CTD%3E%3CFONT%20POINT-SIZE=%2220%22%20color=%22black%22%20%3E%3Cbr%20align=%22left%22/%3E%3Cbr%20align=%22left%22/%3EWhen%20a%20workforce%20identifies%20as%20Cause,%20it%E2%80%99s%20crucial%20to%20recognize,%20celebrate,%20and%20reward%20the%3Cbr%20align=%22left%22/%3Esignificance%20their%20contribution%20plays%20in%20moving%20the%20organization%20forward.%20This%20is%20a%20point%20of%3Cbr%20align=%22left%22/%3Eemphasis%20for%20your%20people,%20and%20an%20important%20part%20of%20their%20identity.%20Recognition%20should%20focus%20on%3Cbr%20align=%22left%22/%3Ethe%20outcomes%20being%20created%20as%20a%20direct%20result%20of%20their%20efforts.%20In%20some%20cases%20it%20may%20be%3Cbr%20align=%22left%22/%3Eappropriate%20to%20adopt%20language%20identifying%20the%20company%20as%20having%20a%20%E2%80%9CCulture%20of%20Purpose,%E2%80%9D%20for%3Cbr%20align=%22left%22/%3Eexample.%20At%20the%20same%20time,%20those%20who%20identify%20as%20Craft%20or%20Community%20also%20play%20important%20roles%3Cbr%20align=%22left%22/%3Ein%20the%20organization.%20The%20best%20strategy%20is%20to%20maintain%20a%20system%20of%20reinforcing%20all%20three%3Cbr%20align=%22left%22/%3Emotivators%20for%20your%20people.%3Cbr%20align=%22left%22/%3E%3C/FONT%3E%3C/TD%3E%0A%20%20%3C/TR%3E%0A%3C/TABLE%3E%3E%5D;%0A%7D

Weirdly when I change the format to SVG the image displays as blank when its imported through integromat but comes up fine when its png… any ideas you have would be great!

Cheers
David

Hi David,

Thanks for that. Sounds like SVG is not going to be an option. PNG will start to look fuzzy when it is resized. My best advice right now is to use the width and height parameters to get it as close to the final format size as possible. This should minimize the blurriness.

For retina devices, you’ll want to specify the final width & height multiplied by 2.

Hope this helps

Ian

1 Like

Thanks Ian, have had a play around and can’t quite get it looking right but I’ll continue to have a go. Is there another option for longer variable text other than graphviz within the QuickChart world? Basically I’d like to generate, through a URL, formatted dynamic text which is then dropped in to a document or report via integromat, (its worked brilliantly so far with your charts they look awesome). Have had a look around and haven’t seen much. No stress if not!

Cheers
David