draw.io - adding diagram distorts image making it fuzzy

Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 1, 2015

Hello,

Does anyone else have this problem? I'm moving a number of pages that have workflow diagrams from and internal website into Confluence.

Instead of recreating all the workflows individually, as there are far too many, I simply create a screenshot of the diagram, then import it into draw.io and make any changes needed by adding new text boxes and overlay the diagram with them. This works well.

However, all of the diagrams get distorted slightly, they become fuzzy. On most of these we can get away with it, but on some, it's horrendous and not acceptable. Nothing I do (editing the height and width) makes any difference.

This problem is worse on bigger diagrams. With a larger one, it imports it in a smaller size, maybe 75% of what it should be. Even at that size it's still fuzzy.

I don't understand why the diagrams aren't being imported at their correct size in the first place, but there seems to be no way of controlling how that happens.

Cheers

4 answers

1 accepted

0 votes
Answer accepted
David Benson _draw_io_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 2, 2015

draw.io for Confluence is currently a couple of months behind the online version, so it doesn't have the 1MB default image limit, I think it's lower in Confluence.

What we'll do is add an option to the plugin admin screen to set the default resize size for images in draw.io diagrams. That way, you can set it to whatever value you wish. This will go into the next release.

2 votes
Gaudenz Alder December 1, 2015

Use Ctrl+Drag to maintain the original size and resolution.

0 votes
Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 2, 2015

What would also be helpful in relation to re-sizing is being able to change the units of measure.

In Draw.io you use pt. Presumably this stands for point. However, my drawing package uses pixel per inch/centimetre. Being able to change from pt to pixel in Draw.io would be very handy.

Cheers.

0 votes
Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 1, 2015

Gaudenz,

Thank you for your solution, and the speed of your answer!

I've tried this on both a jpg image and a png image.

It works with the png, but not the jpg, which I find odd as jpgs must be the most common graphic file format on the planet.

Anyway, a solution has been found, from now on I'll save the images as png files.

Thanks! smile

Gaudenz Alder December 2, 2015

Should work with all file formats, unless the image is simply too big (in which case you'll get an "Image too big" error dialog). BTW: We resample large images to make sure the client stays responsive.

Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 2, 2015

The jpg is 1.8mb, the png is2mb. I don't think I've ever seen the Image too big msg in the several years I've been using Draw.io.

Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 3, 2015

Another thing that would be helpful is that when you import a graphic, it only imports at 100%, and does not automatically squeeze it down. I don't understand why Draw.io does this. If I create a graphic, surely it's up to me to resize it, not the program that I'm importing it into? Cheers

David Benson _draw_io_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 4, 2015

Autosaves include images. We had cases of diagrams with huge images causing problems with autosave because the network connection wasn't fast enough. So, we had a balancing act between image quality and complaints about perceived lagging causing by constantly saving large diagrams. That's why we can only really let you say which is more important by either using ctrl+drag or setting it Confluence-wide.

Mick Davidson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 9, 2015

Thanks David. Am I correct in saying that if I import a graphic (not a diagram such as a work flow) that as long as it is not bigger than the maximum allowed, then it should import at full size? I've just checked one of mine, which is a png file of 1.1Mb, so I'd expect, given what you've said, that this would import at full size. Cheers

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events